/* ================= CSS VARIABLES ================= */
:root {
--font-family: Neue Haas Grotesk Display Pro;
--normal: 400px;
--color-primary: #092295;
--color-secondary: #00AA89;
--color-accent: #CBB360;
--color-success: #1fa67a;
--color-bg: #fafcfc;
--color-white: #ffffff;
--color-gray: #F1F1F1;
--color-dark: #000000;
--color-muted: #716C6D;
--color-blue:#40468E;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 20px;
--radius-full: 50%;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
--shadow-md: 0 6px 18px rgba(0,0,0,0.15);
--font-16: 16px;
--bg-light: #f6f6f5;
--bg-row: #F9FAFB;
--text-dark: #472F00;
--color-highlight:#CBB360;
--footer-border: #f1d17a;
--footer-text: #ffffff;
--footer-muted: #cfd6ff;
}
/*html {font-size: 62.5%;}*/
* { box-sizing: border-box;}
body {font-weight: 500; font-size:18px; font-family: var(--font-family); background: var(--color-bg); color: #716C6D;}
p:last-child{margin-bottom: 0; }
.text-blue{color: var(--color-blue) !important;}
.text-green{color: var(--color-secondary) !important;}
.text-dark{color: var(--text-dark) !important;}
.text-muted{color: var(--color-muted) !important;}
.highlight {color: var(--color-accent) !important;}
.uppercase{text-transform: uppercase;}
.fw-b{font-weight: 600;}
.fw-sb{font-weight: 700;}
.f-18{font-size: 18px;}
.f-20{font-size: 20px !important;}
.mb-10{margin-bottom: 6.25rem;}

.sitebtn{padding: 10px 18px; min-width: 135px; border-radius: var(--radius-md); font-size: 16px; display: inline-flex; border: 1px solid transparent; transition: 0.5s; justify-content: center; text-decoration: none;align-items: center; font-weight: 600;}
.btn-green{background:var(--color-secondary);color: #fff;transition: background 0.3s ease,transform 0.2s ease,box-shadow 0.2s ease; }
/*.btn-green:hover {background: #009176; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,170,137,0.35);}*/
.btn-green:hover {background: #029578;color: #fff;}
.btn-blue{background:var(--color-primary);color: #fff;transition: background 0.3s ease,transform 0.2s ease,box-shadow 0.2s ease; }
.btn-blue:hover {background: transparent;color: var(--color-primary);border: 1px solid var(--color-primary);}
/*.btn-blue:hover {background: var(--color-primary); transform: translateY(-2px); box-shadow:0 6px 16px rgb(9 34 149 / 65%);}*/
/*.sitebtn:active {transform: translateY(0); box-shadow: 0 3px 8px rgba(0,170,137,0.25);}
.sitebtn:focus-visible {outline: none;box-shadow: 0 0 0 3px rgba(0,170,137,0.4);}*/
.btn-white, .btn:focus-visible {background: var(--color-white);color: var(--color-secondary);font-size: 18px;font-weight: 600; min-width: 150px; display: inline-flex; align-items: center; justify-content: center;text-decoration: none;}
.btn-white:hover {background: #fff;color: var(--color-secondary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,170,137,0.35);}
.sitebtn .icon {background: url("../webImages/images/arrow-icon.png") no-repeat; width: 14px; height: 24px; margin-left: 8px; transition: 0.5s;}
.sitebtn svg{transition: 0.5s;}
.sitebtn svg{margin-left: 8px;}
.sitebtn .lft-icon svg{margin: 0 8px 0 0px;}
.sitebtn:hover .lft-icon svg{transform: translateX(0px) translateY(1px);}
.sitebtn:hover .icon, .sitebtn:hover svg{transform: translateX(5px);}
/*.btn-success {background: var(--color-secondary); border: none; border-radius: var(--radius-md); padding: 10px 22px;}*/
.btn-outline-success {border: 1px solid var(--color-secondary); background: transparent; color: var(--color-secondary);  border-radius: var(--radius-md);  padding: 10px 22px;}
.btn-gray{background:#E5E7EB;color: var(--text-dark);transition: 0.5s}
.btn-gray:hover{background: var(--text-dark);color:#E5E7EB;}
.btn-group {gap: 10px;}

.text-link, .text-underline{text-decoration: none;position:relative;}
.text-link:hover, .text-underline:hover {text-decoration: none;}
.text-link:before, .text-underline:before{ width: 100%;bottom:-2px; height: 1px; border-radius: 13px;background:var(--color-secondary); position:absolute; content:"";transform: scaleX(0);  transform-origin: left;  transition: transform 0.8s ease;}
.text-link:hover:before{transform: scaleX(100%);}
.text-underline:before{transform: scaleX(100%);}
.text-underline:hover:before{transform: scaleX(0);}
a.text-blue:before{background:var(--color-blue);}
a.text-green:before{background: var(--color-secondary);}
a.link-underline{text-decoration: underline !important; transition: 0.5s;}
a.link-underline:hover{text-decoration:none !important;}

.page-heading{display: flex; align-items: center; justify-content: space-between;}
.page-heading .main-title{text-align: left;}
.page-heading .sitebtn{text-align: center;}
.post-meta {color: #716C6D;display: flex;align-items: center;gap: 8px;flex-wrap: wrap;}
.post-meta strong {font-weight: 600;color: #716C6D;}
.post-meta .separator {color: var(--color-muted);}

.main-title {font-size: 3rem;line-height: 3.5rem; color: var(--color-primary);font-weight: 700;text-align: center;}
.small-title {color: var(--color-accent);font-weight: 700; font-size: 1.5rem; line-height: normal; text-align: center;margin-bottom: 8px;}

header{padding: 1.75rem 0;}
/*header .container{max-width: 90%;}*/
header .brand-logo{transition: 0.5s;}
header .brand-logo:hover, .hero-logo:hover{transform: translateY(-2px);}
.navbar {padding: 0; margin: 0; justify-content: space-between;}
.navbar-brand {display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 28px;color: #0b3ea8;}
.navbar-brand img {height: 40px;}
.navbar-expand-lg .navbar-nav .nav-link{ font-size: 18px;font-weight: 700;color:var(--color-primary);padding:0px 20px;}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show,.nav-link:focus, .navbar-expand-lg .navbar-nav .nav-link:hover{color: var(--color-accent);}
.navbar-collapse{margin-left: auto;justify-content: flex-end;}
header .brand-logo{transition: 0.5s;}
header .dropdown-menu {border-radius: 0;border: 1px solid #6bc4a4;min-width: 260px;padding: 10px;}
header .brand-logo{transition: 0.5s;}
header .dropdown-item {padding: 10px 14px;font-weight: 500; font-size: 17px;}
header .brand-logo{transition: 0.5s;}
header .dropdown-item.active, header .dropdown-item:hover {background: #d2bd6f;color: #000;}
header .dropdown-toggle::after {border: solid var(--color-primary);border-width: 0 2px 2px 0;top: 7px;right: 4px;position: absolute;content: "";padding: 3.5px;z-index: 1;transform: rotate(45deg);-webkit-transform: rotate(45deg);transition: .5s ease-in-out;}
.offcanvas {width: 280px;}
.header-right {display: inline-flex;}
.navbar .sitebtn {min-width: 50px; padding-top: 5px; padding-bottom: 5px;}
.navbar-nav .nav-link.active.dropdown-toggle::after, .navbar-nav .nav-link.dropdown-toggle.show,.nav-link.dropdown-toggle:focus::after
.nav-link.dropdown-toggle:hover::after{border: solid var(--color-accent);border-width: 0 2px 2px 0;}
.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:active {border: 0; outline: none; box-shadow: none;}

.user-box {margin-left: 2rem; display: flex;align-items: center;gap: 10px;cursor: pointer;}
.user-circle {width: 34px;height: 34px;font-size: 17px;background:var(--color-secondary);color: var(--color-white);border-radius:10px;display: flex;align-items: center;
justify-content: center;font-weight: 700;}
.user-info span {display: block;color:var(--color-primary);font-size: 17px;font-weight: 700; line-height: 1;}
.user-info small {font-size: 12px;color:var(--color-primary);}
.user-dropdown {min-width: 260px;padding: 16px;right: 0;}
.user-dropdown a{display: flex; font-size: 17px;padding: 12px;text-align: center;font-weight: 600;color:var(--text-dark);text-decoration: none;margin-bottom:0px;}
.user-dropdown a.active, .user-dropdown a:hover{background:var(--color-accent);}
.user-box.dropdown-toggle::after{display: none;}
.user-info{line-height: 18px;}

.top-announcement {background: #472F00;padding: 10px 15px;}
.top-announcement p {margin: 0;font-size: 14px;font-weight: 600;color: var(--color-white);letter-spacing: 0.3px;}
.top-announcement span {font-style: italic;font-weight: 300; }

/* .hero-banner { flex-direction: column;position: relative;min-height: 100vh;background: url("../webImages/images/hero-banner.png") center/cover no-repeat;display: flex;align-items: center;} */
.hero-banner { flex-direction: column; position: relative; min-height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center;}
.hero-overlay {position: absolute;inset: 0; z-index: 1;background: rgba(0, 0, 0, 0.45);}
.hero-banner .container{position: relative; z-index: 2;}
.hero-content { margin:0 auto ; position: relative;text-align: center;color: var(--color-white);max-width: 1100px;min-height: calc(100vh - 200px); justify-content: center; display: flex; flex-direction: column;}
.hero-logo { margin-top: 2.563rem;font-size: 22px;font-weight: 700;letter-spacing: 2px;margin-bottom: 10px; transition: 0.5s;}

.hero-banner h1 {font-size: 3rem;font-weight: 900;margin: 0 0 10px;line-height: 3.2rem;padding: 0;}
.hero-banner .hero-subtitle{font-weight: 600; font-size: 20px;line-height: normal;}
.hero-cards {display: grid;grid-template-columns: repeat(2, 1fr);gap: 24px;max-width: 900px;margin:3rem auto 0;}
.hero-card {border-radius: var(--radius-lg);padding: 26px;text-align: left;box-shadow: var(--shadow-md);display: flex;flex-direction: column;align-items: flex-start;}
/* Green card */
.hero-card--green {background: var(--color-success);}
/* Blue card */.hero-card--blue {background: var(--color-primary);}
.hero-card h3 {font-size: 24px; line-height: 32px;font-weight: 700;margin-bottom: 20px;color: var(--color-white);}
.hero-card p {margin-bottom: 2.563rem;  font-weight: 600; font-size: 18px;line-height: 1.5;color: var(--color-white);}
.hero-card .sitebtn{margin-top: auto;}

.banner-inner{height:450px; padding: 0; position: relative; display: flex; flex-direction: column;}
.banner-inner img{width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.banner-inner .hero-content{height: 100%;}
.banner-inner .hero-overlay {position: absolute;inset: 0; z-index: 2;background: rgba(0, 0, 0, 0.45);}
.banner-inner .hero-content {width: 100%; margin:0 auto ; position:absolute ;text-align: center;color: var(--color-white);max-width: 1320px;min-height: 100%; justify-content: center; display: flex; flex-direction: column;z-index: 3; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}

.banner-inner.cms-banner{height: 205px;}
.cms-banner .hero-content{text-align: left;}
.cms-banner .container{position: relative;}
.cms-banner .main-title{text-align: left; margin-bottom: 0; padding-bottom: 0;}
.cms-banner .hero-content img{width: auto; height: auto;}

.site-footer {background: var(--color-primary);padding: 2.5rem 0 1.875rem; margin:0rem 0 0;color: var(--footer-text);}
.footer-inner {max-width: var(--container-width);margin: auto;border: 1px solid var(--footer-border);border-radius: var(--radius-lg);
padding: 1.875rem 3rem;display: flex;justify-content: space-between;align-items: center;}
.footer-left {max-width: 50%;}
.footer-logo {display: flex; margin-bottom: 16px;}
.footer-email {font-size: 14px;color: var(--footer-muted);}
.footer-right {max-width: 45%;}
.footer-right h5 {font-size:20px;margin-bottom: 6px; font-weight: bold;}
.footer-tagline {font-style: italic;font-size: 18px; font-weight: 400;}
.footer-bottom {max-width: var(--container-width);margin: 20px auto 0;display: flex;justify-content: space-between;align-items: center;font-size: 13px;color: var(--footer-muted);}
.footer-links a {color: var(--footer-muted);text-decoration: none;margin-left: 16px;position:relative; }
.footer-links a:hover {text-decoration: none;}
.footer-links a:before{ position:absolute; content:"";transform: scaleX(0);  transform-origin: center;  transition: transform 0.8s ease;}
.footer-links a:hover:before{ width: 100%;bottom:-2px; height: 1px; border-radius: 13px;background:var(--footer-muted);transform: scaleX(100%);}



.login-wrapper {padding: 5rem 0 7.5rem;}
.login-card {background: var(--color-white);border-radius: var(--radius-lg);padding:1.875rem  2.5rem ;}
.login-wrapper .subtitle {font-size: 20px; color: #262053;text-align: center;margin-bottom: 2.5rem; margin-top: 1rem; font-weight: 500;}
.login-wrapper .subtitle a{font-weight: 600;}

/*form*/
.form-section .title{color: var(--color-primary); font-weight: 600; font-size:18px;}
.form-section hr{border-top:1px solid #D9D9D9; opacity: 9;}
.form-label {font-size: 20px;color:#262053;}
.form-control, .bootstrap-select>.dropdown-toggle, .bootstrap-select>.dropdown-toggle:focus
 {border-radius: 25px;padding: 12px 22px;border: 1px solid #8C8C8C; font-weight: 500; background: #fff; outline: none; box-shadow: none;}
textarea.form-control{min-height: 208px; border-radius: 12px; resize: vertical;}
.form-control:focus {background-color: var(--color-white); border-color:var(--color-secondary);outline: 0;box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);}
.formfill .bootstrap-select .filter-option-inner-inner,
.formfill .form-control{color: var(--text-dark); font-weight: 700; font-size: 16px}


.form-row{margin-bottom: 30px;}
.form-hint {font-size: 16px;color: var(--color-blue); margin-top: 8px; line-height: normal; display: block;}
.login-card .sitebtn {border-radius: 10px;padding-top: 7px;padding-bottom: 7px;}
.login-card .sitebtn.big-btn{padding-top: 13px;padding-bottom: 13px; min-width: 262px;}
/* Password */
.password-field {position: relative;}
.btn-show {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);background: var(--color-secondary);color: #000;border: none;padding:5px 12px;font-size: 14px;border-radius: 10px; font-weight:500;}
.btn-show.is-visible {  background: #092295;}
/* Custom Checkbox */
.custom-check {display: flex;align-items: center;cursor: pointer;gap: 12px;color: var(--color-blue);font-weight: 600;}
.custom-check input {display: none;}
.custom-check span {width: 28px;height: 28px;border: 1px solid #8C8C8C;border-radius: 7px;position: relative;}
.custom-check input:checked + span {background: var(--color-primary);}
.custom-check input:checked + span::after {content: "";width: 8px;height: 15px;border: solid #fff;border-width: 0 2px 2px 0;position: absolute;left: 9px;top: 3px;transform: rotate(38deg);}

.radio-group {
display: flex; flex-wrap: wrap;
gap: 24px;
align-items: center;
}

.radio-pill {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 20px;
font-weight: 700;
color: var(--color-accent);
}

/* hide native radio */
.radio-pill input {
display: none;
}

/* custom circle */
.radio-pill span {
width: 24px;
height: 24px;
border: 2px solid var(--color-blue);
border-radius:var(--radius-full);
position: relative;
}

/* checked dot */
.radio-pill input:checked + span::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
background: var(--color-blue);
border-radius:var(--radius-full);
transform: translate(-50%, -50%);
}




.alert-message{position: fixed; right: 5%; top: 5%;font-size: 16px;font-weight: 500; min-width: 600px; max-width: 600px;}
.success-alert {padding: 12px 24px;border-radius: 14px;background: #C3D4E8;color: #262053;display: flex;align-items: center;justify-content: space-between;
max-width: 100%;}
.alert-close {background: transparent;border: none;font-size: 26px;line-height: 1;color: #092295;cursor: pointer;padding: 0; transition: 0.5s;}
.alert-close:hover{transform: translateY(-2px);}
.alert-info-custom {  display: flex;align-items: flex-start;gap: 12px;padding:12px 20px;background: #FFFBED;border: 1px solid var(--color-accent);
border-radius: var(--radius-md);color: #636363;}
.alert-info-custom p {margin: 0;line-height: 1.4;}

.info-alert { margin-bottom: 1.875rem;display: flex;gap: 16px;background: #FFFBED;border: 1.5px solid var(--color-accent);border-radius: var(--radius-md);padding:12px;position: relative;font-family: var(--font-family);}
.info-content h6 {font-weight: 600;color: var(--text-dark);margin-bottom: 8px;}
.info-content ol {margin: 0;padding-left: 18px;}
.info-content li {color:#636363;line-height: 1.6;margin-bottom: 4px;}
.info-close {position: absolute;right: 14px;top: 14px;border: none;background: none;font-size: 22px;color: var(--color-secondary);cursor: pointer;line-height: 1;}

.membership-summary {
font-family: var(--font-family);
padding: 16px 0;
}

.summary-row {
display: flex;
gap: 60px;
align-items: flex-start;
}


.membership-summary .label {
display: block;
font-size: 20px;
color: #262053;
font-weight: 500;
margin-bottom:10px;
}

.membership-summary .label .sub {
font-weight: 400;
}

.membership-summary .value {
display: flex;
align-items: center;
gap:4px;
}

.membership-summary .value strong {
font-size: 1.5rem;
color:#472F00;
font-weight: 700;
}
.membership-summary .unit {
font-size: 14px;
color: #a49b8f;
}
.membership-summary .meta {
margin-left: 8px;
font-size: 12px;
color:rgba(71, 47, 0, 0.4);
}
.membership-summary .divider {
border: none;
border-top: 1px solid rgba(217, 217, 217, 1);
margin:2rem 0 1rem;
}
.summarynote{font-size: 16px; max-width: 52%; margin: 0 auto;color: rgba(38, 32, 83, 1);}

/* ---------- bootstrap-select ---------- */
.bootstrap-select .dropdown-toggle::before{width: 32px; height: 32px; border-radius: 5px; background: var(--color-secondary);position: absolute;content: ""; right: 18px; z-index: 1;}
.bootstrap-select .dropdown-toggle::after {border: solid #fff;border-width: 0 2px 2px 0;top: 19px; right: 29px;position: absolute;content: "";padding: 3.5px;z-index: 2;transform: rotate(45deg);-webkit-transform: rotate(45deg);transition: .5s ease-in-out;}
.bootstrap-select .dropdown-item{padding-top: 10px; padding-bottom: 10px;}
.bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item:hover {background:var(--color-secondary);color: #000;}
.bootstrap-select .dropdown-menu {padding: 0;}
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle{outline: none !important;}
.bootstrap-select .btn-check:checked+.btn, .bootstrap-select .btn.active, .bootstrap-select .btn.show, .bootstrap-select .btn:first-child:active, .bootstrap-select  :not(.btn-check)+.btn:active
{background: transparent; outline: none;}
.bootstrap-select  .filter-option-inner-inner {color: #472F00;}
.pill-select .filter-option-inner-inner {display: flex; flex-wrap: wrap; gap: 6px;}
.pill-select .pill {background: #eaf0ff;color: #1E40AF;padding:5px 14px;border-radius: 20px;line-height: 16px; font-size: 14px;font-weight: 600;white-space: nowrap;}

.bootstrap-select.show-tick .dropdown-menu span.check-mark {width: 20px;height: 20px; top: 12px; right: auto;left: 9px; display:inline-flex; position:absolute;text-align: center; justify-content: center;}
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{ top: 12px; right: auto;left: 9px; display: inline-flex;}
.bootstrap-select.show-tick .dropdown-menu span.check-mark:after{display:none}
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark:after{display:inline-block;border-width: 0 1px 1px 0; margin: 2px 0 0 1px;
    width: 6px;
    height: 13px;}
.bootstrap-select .dropdown-menu  span.check-mark:before{position:absolute; content:""; top:0; left:0; width:20px; height:20px; border:1px solid #000; border-radius:3px }
.pill-select.bootstrap-select .dropdown-item{padding-left:42px;}
.pill-select.bootstrap-select>.dropdown-toggle{width: auto;min-width:330px;padding-right: 80px !important;}

/* datepicker */
/*.datepicker table {border-collapse: separate;border-spacing: 16px;}
*/
/* Remove title spacing completely */
.datepicker-title {
  display: none !important;
}

/* Horizontal spacing only on table */
.datepicker table {
  border-collapse: separate;
  border-spacing: 16px 0;
}

/* Add vertical spacing ONLY between date rows */
.datepicker table tbody tr::after {
  content: "";
  display: block;
  height: 16px;
}
.calender-picker { position: relative;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300aa89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3' ry='3'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
background-repeat: no-repeat;background-position: 95% center;background-size: 20px; cursor: pointer;
}
.datepicker {border-radius: 12px;box-shadow: var(--shadow-md);border: none;padding: 10px;font-family: var(--font-family);}
.datepicker .datepicker-switch {font-weight: 600;color: #000;}
.datepicker .prev,.datepicker .next {color: var(--color-primary);font-size: 18px;}
.datepicker table thead tr:nth-child(2) th {color: var(--color-dark);font-weight: 500; font-size: 18px;}
.datepicker table tr td {width: 38px;height: 38px;border: 1px solid transparent;border-radius: 0;line-height: 38px;text-align: center;font-size: 14px;}
.datepicker table tr td:hover {background: var(--color-gray);}
.datepicker table tr td.active,.datepicker table tr td.active:hover {background: #00aa89 !important;color: #fff !important;}
.datepicker table tr td.today {
    border: 1px solid #00aa89;
    background: #00aa89;
    color: #fff;
}
.datepicker table tr td.disabled {color: #ccc;}
.datepicker table tr td.disabled.day:hover {background: transparent; color: #ccc;}
.datepicker table tr td.today:hover:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
color: #fff;background: #00aa89;border-radius: 0;border: 0;}
.datepicker thead th{  padding: 5px 0; color:#092295; font-weight:600;font-size: 16px;}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
background: transparent;}
.datepicker table thead tr:nth-child(2) th {font-size: 16px;color: #00aa89 ;font-weight: 600;padding-bottom: 10px;}

.datepicker table thead tr th.prev, .datepicker table thead tr th.next {position: relative;}
.datepicker table thead tr th.prev:before {position: absolute;left: 6px;top: 10px;content: "";border: 6px solid #fff;
border-right: 10px solid #00aaa3;}
.datepicker table thead tr th.next:before { position: absolute; content: "";right: 6px;top: 10px;border: 6px solid #fff;
border-left: 10px solid #00aaa3;}
.datepicker .next.disabled, .datepicker .prev.disabled {visibility: visible; opacity:0.2}

::placeholder {color:#636363; font-weight: 500;opacity: 1; }
::-webkit-input-placeholder { font-weight: 500;color:#636363;}
::-moz-placeholder {color: #636363; font-weight: 500;}
:-ms-input-placeholder {color: #636363; font-weight: 500;}

/*model*/
.modal-body{padding: 2.5rem 2.5rem 1.25rem;}
.modal-footer{padding: 0 2.5rem 2.5rem;}
.review-modal { font-size: 18px;border-radius: var(--radius-lg);}
.review-modal .modal-header {padding:1.875rem  2.5rem; border-bottom: 1px solid #D9D9D9;}
.review-modal .modal-title {color: var(--color-primary); font-weight: 700; font-size: 2rem;}
.review-modal .section {padding:1.875rem 0 0;border-bottom: 1px solid #D9D9D9;}
.review-modal .section:first-child{padding-top: 0;}
.review-modal .section:last-child {border-bottom: none;}
.review-modal .section-title {font-weight: 600;color:#472F00BF;margin-bottom:2rem; font-size: 18px;}
.review-modal .section span {color:#716C6D;}
.review-modal .section strong {color: var(--text-dark);font-weight: 600;}
.modal-footer {justify-content: center;gap: 12px;}


.cta-banner {background: linear-gradient(90deg, #0b2f89, #0a1f78);border-radius: var(--radius-md);padding: 1.875rem 1.5rem;}
.cta-content {  display: flex; align-items: center;justify-content: space-between;gap: 1.5rem;}
.cta-text h3 {font-size: 1.5rem; color: var(--color-white);font-size: 1.5rem;font-weight: 600;margin-bottom:4px;}
.cta-text p {color: var(--color-white);}
.cta-banner .sitebtn{min-width: 165px; padding-top: 12px; padding-bottom: 12px;}

.notice-bar {position: relative;display: flex;align-items: flex-start;gap: 18px;background:rgba(203, 179, 96, 0.2);border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);padding: 1.875rem 1.5rem; border-left: 4px solid var(--color-accent);}
.notice-content h5 {margin: 0 0 4px;font-size: 1.5rem;font-weight: 600;color:#472F00;}
.notice-content p {margin: 0;color: #6b4a00;}
.notice-close {margin-left: auto;border: none;background: none;font-size: 25px;color: #4b3300;cursor: pointer;line-height: 1;}


.card-box { font-size: 18px;background: var(--color-white);border-radius: var(--radius-md);padding: 2.188rem;margin-bottom: 1.5rem;border: 1px solid rgba(229, 231, 235, 1);box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);}
/*.card-box .card-info{margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #D9D9D9;}*/
.card-box hr{margin: 2rem 0; width: 100%; height: 2px; background: #D9D9D9;}
.card-box .section-heading {font-size: 1.5rem; line-height: 2rem; font-weight: 600;color: var(--color-primary);margin-bottom:20px;}
.custom-table {width: 100%;border-collapse: collapse; color: #472F00;}
.custom-table thead {background: var(--color-blue);color: #fff;}
.custom-table th{font-weight: 500;}
.custom-table th,.custom-table td {  padding: 18px 16px; border-bottom: 1px solid #E5E7EB;vertical-align: top;}
.custom-table tbody tr:last-child td {border-bottom: none;}
.inner-card.samll-table {max-width: 65%;}
.samll-table .custom-table tbody td:last-child { color: var(--color-blue);  font-weight: 600;}
.age-col, .topic-col, .col-w-25{width: 30%;}
.rate-col,.web-add-col, .col-w-75{width: 70%;}

.custom-table a {margin-bottom: 10px; color:var(--color-blue);text-decoration: none;}
.custom-table a:hover {text-decoration: underline;}
.custom-table a:last-child{margin-bottom: 0;}
.inner-card {  background: #fff;  border: 1px solid #eee;border-radius: var(--radius-sm);padding: 16px;margin: 18px 0;}
.card-box .note {color: var(--color-muted);line-height: 1.6;margin-top: 10px;}

.custom-table .year{width:200px;}
.custom-table .location{width: 200px;}
.custom-table .description{width:calc(100% - 400px);}
/*.card-box .comment{color: #472F00; margin-bottom: 16px; font-size: 20px; font-weight: 600;}*/

/*.badge {display: inline-flex;align-items: center;justify-content: center;padding: 6px 14px;border-radius: 999px;font-size: 14px;font-weight: 500;line-height: 1;width: fit-content; text-transform: capitalize;}
.badge-hot {background:#FEE2E2;color: #991B1B;}
.badge-bulletin {background: #DBEAFE;color:#1E40AF;}
.badge:hover {opacity: 0.9;}
a.badge{text-decoration: none; transition: 0.5s; gap: 2px;line-height: 12px;}
a.badge:hover{text-decoration: none;}
.badge svg{margin:1px 0 0 6px;transition: 0.5s;}
.badge:hover svg{transform: translateX(4px);}
.badge strong{line-height: 12px;}*/
.badge-hot {background:#FEE2E2;color: #991B1B;}
.badge {display: inline-flex;align-items: center;justify-content: center;padding: 6px 14px;border-radius: 999px;font-size: 14px;font-weight: 500;width: fit-content;text-transform: capitalize;}
a.badge {transition: 0.5s;gap: 6px;}
a.badge:hover{text-decoration: none;}
.badge-bulletin {background: #DBEAFE;color: #1E40AF;}
.badge-others {background: #83ddac;color: #01050c;}
.badge strong {font-weight: 600;}
.badge svg {display: block;transition: 0.5s;}
.badge:hover svg {transform: translateX(2px);}
.badge,a.badge,.badge strong {line-height: normal;}
.badge svg {display: block;margin-left:0px;}


.pagination-wrapper {width: 100%;display: flex;justify-content: center;padding: 24px 12px;}
.pagination {display: flex;align-items: center;gap: 30px;list-style: none;padding: 0;margin:20px 0 0;}
.page-item a {text-decoration: none;color:var(--text-dark);transition: all 0.3s ease;}
.page-item.active a {background: var(--color-primary);color: #fff; font-weight: 600;padding:12px 19px;border-radius: 6px;}
.page-item.text a {font-weight: 600;}
.page-item a:hover {color: #0b2f89;}
.page-item.active a:hover{color: #fff;}
.filter-result{color: var(--color-muted); font-weight: 600; margin-bottom: 16px;}

.js-sort-table th {
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* .js-sort-table th::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 13px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='13' viewBox='0 0 9 13' fill='none'%3E%3Cpath d='M9 7.875C9 8.02734 8.94434 8.15918 8.83301 8.27051L4.89551 12.208C4.78418 12.3193 4.65234 12.375 4.5 12.375C4.34766 12.375 4.21582 12.3193 4.10449 12.208L0.166992 8.27051C0.0556641 8.15918 0 8.02734 0 7.875C0 7.72266 0.0556641 7.59082 0.166992 7.47949C0.27832 7.36816 0.410156 7.3125 0.5625 7.3125H8.4375C8.58984 7.3125 8.72168 7.36816 8.83301 7.47949C8.94434 7.59082 9 7.72266 9 7.875ZM9 4.5C9 4.65234 8.94434 4.78418 8.83301 4.89551C8.72168 5.00684 8.58984 5.0625 8.4375 5.0625H0.5625C0.410156 5.0625 0.27832 5.00684 0.166992 4.89551C0.0556641 4.78418 0 4.65234 0 4.5C0 4.34766 0.0556641 4.21582 0.166992 4.10449L4.10449 0.166992C4.21582 0.0556641 4.34766 0 4.5 0C4.65234 0 4.78418 0.0556641 4.89551 0.166992L8.83301 4.10449C8.94434 4.21582 9 4.34766 9 4.5Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.js-sort-table th.asc::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M4.29354 6.70605C4.68416 7.09668 5.31854 7.09668 5.70916 6.70605L9.70916 2.70605C9.99666 2.41855 10.081 1.99043 9.92479 1.61543C9.76854 1.24043 9.40604 0.996681 8.99979 0.996681L0.999786 0.999801C0.596662 0.999801 0.231037 1.24356 0.0747866 1.61856C-0.0814634 1.99356 0.00603649 2.42168 0.290412 2.70918L4.29041 6.70918Z' fill='white'/%3E%3C/svg%3E");
  transform: translateY(-50%) rotate(180deg);
} */
/* DESC arrow */
/* .js-sort-table th.desc::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M4.29354 6.70605C4.68416 7.09668 5.31854 7.09668 5.70916 6.70605L9.70916 2.70605C9.99666 2.41855 10.081 1.99043 9.92479 1.61543C9.76854 1.24043 9.40604 0.996681 8.99979 0.996681L0.999786 0.999801C0.596662 0.999801 0.231037 1.24356 0.0747866 1.61856C-0.0814634 1.99356 0.00603649 2.42168 0.290412 2.70918L4.29041 6.70918Z' fill='white'/%3E%3C/svg%3E");
  opacity: 1;
} */
.reunion-post {line-height: 1.7;}

.post-meta {
/*  font-size: 14px;*/
  color: var(--color-muted);
  margin-bottom: 8px;
}

.post-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #4a3200;
}

.section-label {color: var(--color-muted);  margin-bottom:16px;}
.event-list {padding-left: 18px;}

.event-list li {
  margin-bottom: 6px;
}

.post-images img {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  object-fit: cover;
}
.idea-title{color: #472F00; }
.idea-card {
  display: flex;
  gap: 16px;
  border: 1px solid #eee;
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 14px;
  background: #fff; justify-content: space-between; align-items: center;
}
.idea-card img {  width: 30%;  height:284px;  object-fit: cover;  border-radius: var(--radius-sm);}
.idea-card .cnt{width: calc(100% - 33%);}.idea-card h4 { color: #472F00;  font-size: 20px; line-height: 30px;  font-weight: 600;  margin-bottom:12px;}

.idea-card p {color: var(--color-muted);}

.comments-list{margin-top:2rem;gap: 2rem; display: flex; flex-direction: column;} 
.comments-list .date{margin-bottom: 2px; font-size: 14px; color: var(--color-muted); line-height: normal;}
.comments-list p{line-height:28px;}


.tab-menu {justify-content: flex-start ; display: flex; gap: 16px; list-style: none; padding: 0; margin:0; color: #262053;}
.tab-menu li {margin: 0; padding: 0;}
.tab-menu a {padding:9px 16px; border-radius: 12px; font-size: 20px; color: #262053; background: #C3D4E8; display: flex;align-items: center;justify-content: center; text-decoration: none; position: relative; text-transform: capitalize;}
.tab-menu .tab-active a{background:var(--color-secondary); color: #fff;}

.cms-cnt{padding:32px 24px;}
.cms-cnt .section-heading{color: #472F00;}

.officers-list {background: var(--color-white);padding: 24px 28px; font-size: 16px; border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);}
.officers-list ul {list-style: none;padding: 0;margin: 0;}
.officers-list li {display: flex;align-items: flex-start;gap: 10px;padding:4px 0;}
.officers-list strong {color: var(--text-dark);font-weight: 600;margin-right: 6px;white-space: nowrap;}
.officers-list .name {color: var(--color-muted);font-weight: 500;}
.star-svg {cursor: pointer;display: inline-flex;align-items: center;transition: transform 0.2s ease;}
.star-svg:hover {transform: scale(1.15);}
.star-path {fill: transparent;stroke: var(--color-accent);stroke-width: 1.2;transition: fill 0.25s ease, stroke 0.25s ease;}
.star-svg.active .star-path {fill: var(--color-accent);stroke: var(--color-accent);}

.tribute-quote {background: #262053; padding:3.5rem 0;}
.quote-inner { display: flex;max-width: 842px; gap: 2px;margin: 0 auto;position: relative;text-align: center;}
.quote-icon {margin-right: 5px; margin-top: -15px; display: inline-flex;}
.tribute-quote .cnt { position: relative;color: var(--color-white);font-size: 1.5rem; line-height: 2.2rem;font-weight: 500;margin: 0 auto;}

.the-veteran img{width: 100%; height: auto;}

/* ---------- User Login Page ---------- */
.info-wrap {display: flex; align-items: flex-start; justify-content: space-between;}
.info-wrap .left-column{width: 61%;}
.sidebar {position: sticky;top: 20px; width: calc(100% - 64%);}
.sidebar {position: sticky;top: 20px; width: calc(100% - 64%);}

.sidebar .card-box{background: var(--color-gray);}
.sidebar .card-box{padding: 2.5rem;}
.card-box.find-member{background: var(--color-blue); color: var(--color-white);}
.sidebar .find-member {background: var(--color-primary);color: var(--color-white);}
.sidebar .find-member .form-control{border-radius: 30px;padding: 11px 21px; border: 1px solid #00AA89;}
.sidebar .section-title{color: #40468E; font-weight: 700; margin-bottom: 15px;}
.sidebar .find-member .section-title{color: #fff;}
.sidebar .find-member .form-row {margin-bottom: 16px;}

.sidebar .filter{display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 20px; font-weight: 500;}
.activity-tab { justify-content: center; display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; color: #262053;}
.activity-tab li {margin: 0;}
.activity-tab a {padding-left: 30px; font-size: 20px; color: var(--color-highlight); display: inline-flex;align-items: center;justify-content: center; text-decoration: none; position: relative; text-transform: capitalize;}
.activity-tab a:before{width: 24px;height: 24px; left: 0; top: 1px; border: 1px solid var(--color-blue); border-radius: var(--radius-full);position: absolute; content: "";}
.activity-tab .tab-active a:after{width: 18px; height: 18px; left: 3px; top: 4px;border-radius:var(--radius-full); background: var(--color-blue);position: absolute; content: "";}

.login-activity .list-sub {display: block;margin-bottom: 14px; font-weight: 300;}
.sidebar .login-item {display: flex;justify-content: space-between;align-items: center;padding: 12px 16px;margin-bottom: 10px;border-radius: var(--radius-sm);font-weight: 600;color: var(--text-dark);}
.sidebar .login-item:nth-child(2n+2) {background: var(--bg-row);}
.sidebar .login-item .name {white-space: nowrap;}
.sidebar .login-item .date {font-weight: 500;}
.sidebar .birthday-card{background: var(--color-gray);}
.sidebar .birthday-card .date{margin-bottom: 1.375rem; font-size: 20px; font-weight: 500; color: var(--color-blue);}
.sidebar .birthday-card p{margin: 0; padding: 0; font-size: 16px; font-weight: 500; color:#716C6D;text-transform: uppercase;}

.birthday-list {list-style: none;padding: 0;margin:16px 0 0;}
.birthday-list li {display: flex;align-items: center;gap:12px;background:rgba(250, 252, 252, 0.75);border-radius: 12px;padding: 8px 10px;margin-bottom: 8px;}
.birthday-list li:last-child {margin-bottom: 0;}
.birthday-list .avatar {width:32px;height: 32px;border-radius:10px;background:var(--color-secondary);color:var(--color-white);font-size:16px;font-weight:700;letter-spacing: 0.5px;display: flex;align-items: center;justify-content: center;}
.birthday-list .name {color: var(--text-dark);}


.news-card {background: var(--color-white);border: 1px solid #E5E7EB;border-radius: var(--radius-md);padding:32px;}
.news-card-title {margin-bottom: 10px; font-size: 1.5rem;font-weight: 700;color: var(--color-blue);}
.news-card-text {color: var(--text-dark); font-weight: 600;}
.news-card.shadow {box-shadow: var(--shadow-sm);}

.stanza-grid {display: flex;gap: 1rem;}
.stanza-card {width: 20%; background: var(--color-white);border-radius: var(--radius-md);padding:16px;border: 1px solid rgba(229, 231, 235, 1);box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);}
.stanza-card h3 {margin: 0 0 0.75rem;font-size: 20px;font-weight: 600;color: #5a3b00;}

.custom-accordion {max-width: 75%;}
.custom-accordion .accordion-item {
  border: none;
  background: #FAFCFC;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

/* header button */
.custom-accordion .accordion-button {
  background:#FAFCFC;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-blue);
  border-radius: var(--radius-lg);
  padding:1.5rem;
  box-shadow: none;
}

/* remove default arrow */
.custom-accordion .accordion-button::after {
  display: none;
}

/* active state */
.custom-accordion .accordion-button:not(.collapsed) {
  color: var(--color-blue);
}

/* custom arrow */
.custom-accordion .acc-icon {
  margin-left: auto;
  width: 36px;
  height: 36px;
  background: var(--color-secondary);
  border-radius: var(--radius-md);
  position: relative;
}

.custom-accordion .accordion-button.collapsed .acc-icon {
  background: var(--color-secondary);
}

.custom-accordion .accordion-button:not(.collapsed) .acc-icon {
  background: var(--color-primary);
}

/* arrow icon */
.custom-accordion .acc-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center;
  transform: translate(-50%, -50%);
}

/* rotate arrow when open */
.custom-accordion .accordion-button:not(.collapsed) .acc-icon::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* body */
.custom-accordion .accordion-body {
  padding: 0 24px 24px;
}

/* info list */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  display: grid;
  grid-template-columns: 200px auto;
  padding: 12px 0;
  font-size: 16px;
}

.info-list li span {
  color: var(--color-muted);
}

.info-list li strong {
  color: var(--text-dark);
  font-weight: 600;
}

/* mobile */
@media (max-width: 767px) {
  .custom-accordion .accordion-button {
    font-size: 18px;
  }

  .info-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/*.error404 .logo-white {display:block}
.error404 .logo-black{display:none}*/

.supreme{
  color: #029578 !important;
  font-weight:600 !important;
}
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
      display: none !important;
  }