/* 🔹 GRID SYSTEM (col-sm, col-md, col-lg, col-xl) */
/* 🔹 GRID SYSTEM (Supports col-1 to col-12 for sm, md, lg, xl) */
*{margin: 0; padding: 0;}
body{ font-family:"Open Sans", Arial, helivetica, sans-serif;  font-style: normal;}
.bg-section { background-color: #eaeefd; border-bottom: 1px solid #d9def2;}
.row { display: flex; flex-wrap: nowrap;  margin-right: -15px; margin-left: -15px;}
[class*="col-"] { padding-right: 10px; padding-left: 10px;  flex-grow: 1; box-sizing: border-box;}
/* Default: Mobile-first full width */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { flex-basis: 100%; max-width: 100%;}
.bg-light {  background: #f7f7f7 !important;}
/* Small devices (sm: ≥576px) */
@media (min-width: 576px) { .col-sm-1 { flex-basis: 8.33%; max-width: 8.33%; }  .col-sm-2 { flex-basis: 16.66%; max-width: 16.66%; } .col-sm-3 { flex-basis: 25%; max-width: 25%; } .col-sm-4 { flex-basis: 33.33%; max-width: 33.33%; } .col-sm-5 { flex-basis: 41.66%; max-width: 41.66%; } .col-sm-6 { flex-basis: 50%; max-width: 50%; } .col-sm-7 { flex-basis: 58.33%; max-width: 58.33%; } .col-sm-8 { flex-basis: 66.66%; max-width: 66.66%; }  .col-sm-9 { flex-basis: 75%; max-width: 75%; }  .col-sm-10 { flex-basis: 83.33%; max-width: 83.33%; } .col-sm-11 { flex-basis: 91.66%; max-width: 91.66%; } .col-sm-12 { flex-basis: 100%; max-width: 100%; }}
/* Medium devices (md: ≥768px) */
@media (min-width: 768px) {  .col-md-1 { flex-basis: 8.33%; max-width: 8.33%; }  .col-md-2 { flex-basis: 16.66%; max-width: 16.66%; } .col-md-3 { flex-basis: 25%; max-width: 25%; } .col-md-4 { flex-basis: 33.33%; max-width: 33.33%; }  .col-md-5 { flex-basis: 41.66%; max-width: 41.66%; } .col-md-6 { flex-basis: 50%; max-width: 50%; } .col-md-7 { flex-basis: 58.33%; max-width: 58.33%; } .col-md-8 { flex-basis: 66.66%; max-width: 66.66%; } .col-md-9 { flex-basis: 75%; max-width: 75%; } .col-md-10 { flex-basis: 83.33%; max-width: 83.33%; } .col-md-11 { flex-basis: 91.66%; max-width: 91.66%; } .col-md-12 { flex-basis: 100%; max-width: 100%; } .col-md-w-3{ flex-basis: 20%; max-width: 20%; }}
/* Large devices (lg: ≥992px) */
@media (min-width: 992px) { .col-lg-1 { flex-basis: 8.33%; max-width: 8.33%; } .col-lg-2 { flex-basis: 16.66%; max-width: 16.66%; } .col-lg-3 { flex-basis: 25%; max-width: 25%; } .col-lg-4 { flex-basis: 33.33%; max-width: 33.33%; } .col-lg-5 { flex-basis: 41.66%; max-width: 41.66%; } .col-lg-6 { flex-basis: 50%; max-width: 50%; } .col-lg-7 { flex-basis: 58.33%; max-width: 58.33%; } .col-lg-8 { flex-basis: 66.66%; max-width: 66.66%; } .col-lg-9 { flex-basis: 75%; max-width: 75%; } .col-lg-10 { flex-basis: 83.33%; max-width: 83.33%; } .col-lg-11 { flex-basis: 91.66%; max-width: 91.66%; } .col-lg-12 { flex-basis: 100%; max-width: 100%; }}
/* Extra Large devices (xl: ≥1200px) */
@media (min-width: 1200px) { .col-xl-1 { flex-basis: 8.33%; max-width: 8.33%; } .col-xl-2 { flex-basis: 16.66%; max-width: 16.66%; } .col-xl-3 { flex-basis: 25%; max-width: 25%; } .col-xl-4 { flex-basis: 33.33%; max-width: 33.33%; } .col-xl-5 { flex-basis: 41.66%; max-width: 41.66%; }   .col-xl-6 { flex-basis: 50%; max-width: 50%; } .col-xl-7 { flex-basis: 58.33%; max-width: 58.33%; } .col-xl-8 { flex-basis: 66.66%; max-width: 66.66%; } .col-xl-9 { flex-basis: 75%; max-width: 75%; } .col-xl-10 { flex-basis: 83.33%; max-width: 83.33%; } .col-xl-11 { flex-basis: 91.66%; max-width: 91.66%; } .col-xl-12 { flex-basis: 100%; max-width: 100%; }}
.d-none{ display: none;}
.hidepc2{display: none !important;}
.hidepc { display: none !important; }
.col-md-20{ flex-basis: 20%; max-width: 20%;}
.col-md-80{ flex-basis: 80%; max-width: 80%;}
/* 🔹 CONTAINER SYSTEM */
.container, .container-lg { width: 100%; margin: auto;}
@media (min-width: 576px) { .container, .container-lg {  max-width: 540px; }}
@media (min-width: 768px) { .container,.container-lg{  max-width: 720px;  }}
@media (min-width: 992px) { .container, .container-lg { max-width: 960px; }}
@media (min-width: 1200px) {.container, .container-lg { max-width: 1140px; }}
@media (min-width: 1400px) { .container, .container-lg { max-width: 1320px; }}
@media (min-width: 1600px) { .container-lg {  max-width: 1520px;   }}
/* 🔹 CARD */
.card {  border: 1px solid #ddd;  border-radius: 5px; padding: 15px;  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);  background: white;}
/* 🔹 DROPDOWN */
.dropdown { position: relative; display: inline-block;}
.dropdown-menu li{  list-style: none;}
/* 🔹 PAGINATION */
.pagination { display: flex; list-style: none; padding: 0;}
.pagination li {  margin: 0 5px;}
.pagination a {  padding: 8px 12px;  text-decoration: none;  border: 1px solid #ddd;  color: black;}
.pagination a:hover {  background: #007bff;  color: white;}
/* 🔹 PADDING & MARGIN */
.p-0 { padding: 0px; }.p-1 { padding: 1rem; }.p-2 { padding: 2rem; }.p-3 { padding: 3rem; }.p-4 { padding: 4rem; }.p-5 { padding: 5rem; }.pt-1 { padding-top: 1rem; }.pt-2 {  padding-top: 2rem; }.pt-3 {  padding-top: 3rem; }.pt-4 {  padding-top: 4rem; }.pt-5 {  padding-top: 5rem; }.pl-0{padding-left: 0px;}.pb-1 { padding-bottom: 1rem; }.pb-2 {  padding-bottom: 2rem; }.pb-3 {  padding-bottom: 3rem; }.pb-4 {  padding-bottom: 4rem; }.pb-5 {  padding-bottom: 5rem; }.ple-20{ padding: 0px 20px;}.ple-30{ padding: 0px 30px;}.pe-0{padding-right: 0px;}.m-1 { margin: 1rem; }.m-2 { margin: 2rem; }.m-3 { margin: 3rem; }.m-4 { margin: 4rem; }.m-5 { margin: 5rem; }.mt-1 { margin-top: 1rem; }.mt-2 { margin-top: 2rem; }.mt-3 { margin-top: 3rem; }.mt-4 { margin-top: 4rem; }.mt-5 { margin-top: 5rem; }.mb-1 { margin-bottom: 1rem; }.mb-2 { margin-bottom: 2rem; }.mb-3 { margin-bottom: 3rem; }.mb-4 { margin-bottom: 4rem; }.mb-5 { margin-bottom: 5rem; }.m-auto{margin: auto;}
/* 🔹 TABLE */
.table {  width: 100%; border-collapse: collapse;}
.table th, .table td {  padding: 10px; border: 1px solid #ddd;}
/* 🔹 MODAL */
.modal { display: none; position: fixed;  top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px;  border-radius: 5px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); width: 300px;}
.modal.active { display: block;}
/* 🔹 FADE EFFECT */
.fade {  opacity: 0; transition: opacity 0.5s ease-in-out;}
.fade.show { opacity: 1;}
/* 🔹 NAVIGATION SYSTEM */
/* 🔹 NAVBAR STYLES */
.navbar { display: flex;  align-items: center;  padding: 10px 20px; color: #fff;}
.navbar-brand { font-size: 20px; font-weight: bold; color: #fff;  text-decoration: none;}
.navbar-nav { list-style: none; display: flex; padding: 0; margin: 0;}
.nav-item {  position: relative; margin: 0 10px;}
.nav-link {  color: #fff; text-decoration: none; padding: 10px; transition: 0.3s;}
.nav-link:hover {color: #37b0ff;}
.nav-link.active{ border-bottom: 3px solid #37b0ff;}
/* 🔹 DROPDOWN MENU */
.dropdown-menu { display: none; position: absolute;  background-color: #fff; color: #000;  top: 30px; left: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); border-radius: 5px; min-width: 160px; z-index: 1000;}
.dropdown-item { padding: 10px;  display: block;   text-decoration: none; color: #000;}
.dropdown-item:hover {  background-color: #f8f9fa;}
/* 🔹 MOBILE RESPONSIVE NAVBAR */
.navbar-toggler {  display: none;  background: none;  border: none;   font-size: 15px; color: #fff;  cursor: pointer;}
.btn-drkblu { background: #3681c8 !important; border: 1px solid #0057a7; color: #fff; text-shadow: 0px -1px 0px #000000; }
.btn-drkblu:hover {background: #305476 !important;}
@media (max-width: 768px) {  .navbar-nav { flex-direction: column;  width: 100%;  display: none;  background-color: #343a40; position: absolute; top: 50px; left: 0; } .nav-item { text-align: center; width: 100%; }.navbar-toggler { display: block; } .navbar-nav.show { display: flex; }}
/* 🔹 NAVIGATION ALIGNMENT */
.nav.justify-center {justify-content: center;}
.nav.justify-end {justify-content: flex-end;}
.nav.justify-start { justify-content: flex-start;}
/* 🔹 HEADER NAVIGATION */
.header-nav {  background-color: #343a40; padding: 10px;}
.header-nav .nav-link { color: #fff;}
.header-nav .nav-link:hover { color: #f8f9fa;}
/* 🔹 FOOTER NAVIGATION */
.footer-nav { background-color: #222; padding: 10px; text-align: center;}
.footer-nav .nav-link { color: #aaa;}
.footer-nav .nav-link:hover {  color: #fff;}
/* 🔹 GENERAL BUTTON STYLES */
.btn { display: inline-block;  padding: 10px 15px; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: 5px;   cursor: pointer; transition: all 0.3s ease-in-out;}
/* 🔹 BUTTON VARIANTS */
.btn-primary { background-color: #007bff; border-color: #007bff; color: #fff;}
.btn-primary:hover { background-color: #0056b3;}
/* Secondary */
.btn-secondary { background-color: #6c757d;   border-color: #6c757d; color: #fff;}
.btn-secondary:hover {  background-color: #545b62;}
/* Success */
.btn-success { background-color: #28a745;  border-color: #28a745; color: #fff;}
.btn-success:hover { background-color: #218838;}
/* Warning */
.btn-warning {  background-color: #ffc107;  border-color: #ffc107; color: #212529;}
.btn-warning:hover { background-color: #e0a800;}
/* Danger */
.btn-danger { background-color: #dc3545; border-color: #dc3545; color: #fff;}
.btn-danger:hover { background-color: #c82333;}
.btn-orange2 {  background: #ffae36; border: 1px solid #e68a00; color: #fff; text-shadow: 0px -1px 0px #bb7000; transition: all 0.3s ease;}
.btn-orange2:hover{  background: #fc9d0f;}
/* Disabled Button */
.btn:disabled { opacity: 0.5; cursor: not-allowed;}
/* 🔹 BUTTON SIZES */
.btn-sm { padding: 5px 10px; font-size: 14px;}
.btn-lg { padding: 12px 20px; font-size: 18px;}
/* 🔹 FULL WIDTH BUTTON */
.btn-block { width: 100%; display: block;}
/* 🔹 TEXT COLORS */
.text-primary { color: #007bff;}
.text-secondary {color: #6c757d;}
.text-success { color: #28a745;}
.text-warning { color: #ffc107;}
.text-danger { color: #dc3545;}
/* 🔹 TEXT UTILITIES */
.text-center {text-align: center;}
.text-left {text-align: left;}.text-right { text-align: right;}
/* 🔹 TEXT SIZES */
.text-sm { font-size: 14px;}
.text-lg { font-size: 20px;}
/* HELPER */
.p-relative{ position: relative; z-index: 9;}
.p-absolute{ position: absolute;}
.show{ display: block ;}.hide{ display: none ;}
.input-group { display: inline-flex; width: 100%; column-gap: 10px;}
.form-control { width: 100%; padding: 15px 15px;  font-size: 15px; border: 1px solid #ccc;border-radius: 6px; outline: none; transition: 0.3s ease-in-out;}
.flex-wrap{ flex-wrap: wrap;}
.btn-blue-outlink {padding: 10px 20px; border: 1px solid #2a386e; font-size: 15px; font-weight: 400; color: #2a386e;  margin-right: 10px;}
.btn-blue-outlink:hover{background: #2a386e;color: #fff;}
a.btn.btn-primary2 {padding: 10px 20px; border: 1px solid #2a386e;  font-size: 15px; font-weight: 600; color: #fff; background: #2a386e; margin-right: 29px;transition: all 0.3s ease;}
a.btn.btn-primary2:hover {border: 1px solid #182041;background: #182041;}
.btn.btn-primary2:hover{ background: #222e60;} 
.text-align-center{text-align: center;}
.font-color{ color: #222e60;}
.bg-color{ background: #222e60;}
.bg-linear-gradient{ background: linear-gradient(180deg, transparent 55%, #fce7c8 0);}
.link-font-color{ color: #050296;}
.link-font-color:hover{ color: #37b0ff;}
.show-768{ display: none !important;}
.show-575{display: none !important;}
/* 🔹 MOBILE RESPONSIVE NAV */
@media (max-width: 768px) {.nav {  flex-direction: column; text-align: center;  }  .nav-item { width: 100%; }.show-768{display: block !important; } .hide-768{ display: none !important;  }}
@media (max-width:  575.98px) { .show-575{display: block !important;  }  .hide-575{ display:none !important; } .hidepc2{ display:block !important; } .hidepc { display: initial !important;}  a.btn.btn-primary2{ margin-right: 9px;  margin-top: 5px;  }}