:root {
  --main-color: #003ADC;
  --second-color: #6190F4;
  --font-color: #333333;
  --font-hover: #003ADC;
  --neutral-700: #706F71;
  --neutral-800: #333333;
  --primary-500: #002F6C;
  --neutralwhite-700: #fff;
}

html,
body {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  color: var(--neutral-700);
}

body.search-active {
  height: 100%;
  overflow-y: hidden;
}

body::before{
  content: '';
  background: linear-gradient(180deg, #0188E9 0%, rgba(1, 162, 238, 0) 72.8%);
  opacity: 0.8;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 334px;
  width: 100%;
}
p:last-child{
  margin: 0;
}

.header-content {
  padding: 20px 0
}
h1,h2,h3.h4,h5{
  color:var(--neutral-800)
}
.navbar-nav {
  flex-direction: row;
}

.nav-item {
  padding: 10px 15px;
}

.nav-item a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.nav-item a:hover,
.nav-item.active a {
  font-weight: 600;
}

.nav-item.active a:after,
.nav-item a:hover:after, .nav-item a:after {
  width: 100%;
  height: 4px;
  background: transparent;
  content: '';
  display: block;
}

.nav-item.active a:after,
.nav-item a:hover:after{
  background: #fff;
}
.global-header.fixed .nav-item.active a:after{
  background: #002F6C;
}
.nav-contact.nav-item {
  padding: 0;
  margin-left: 10px;
}

.global-header  .nav-contact a, .global-header.fixed  .nav-contact a{
  background: linear-gradient(360deg, #003ADC 0%, #00AEEF 100%);
  border-radius: 30px;
  color: #fff !important;
  padding: 10px 15px;
  display: block;
}
.nav-contact a:after{
  display:none;
}

.nav-contact a:hover {
  color: #fff;
  text-decoration: none;
  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 14px 33px rgba(0, 0, 0, 0.05), 0px 22px 17px rgba(0, 0, 0, 0.04), 0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.02), 0px 2px 2px rgba(0, 0, 0, 0.01);
  background: #003ADC;
}

.nav-contact a:hover:after {
  display: none;
}
.mobile-btn-container{
  display: none;
}
.btn-search {
  background-color: transparent;
  border: 0;
  margin-left: 15px;
}

.banner-container img {
  width: 100%;
}

.global-header {
  transition: all 0.5s ease-in-out;
  position: relative;
  z-index: 999; 
  transition: all 0.5s ease-in-out;
  position: fixed;
  right: 0;
  left: 0;
}

.global-header.fixed {
  position: fixed;
  top: 0;
  z-index: 999;
  right: 0;
  left: 0;
  background: #fff;
  box-shadow: 0px 4px 10px rgb(0 0 0 / 10%);
  transition: all 0.5s ease-in-out;
}

.global-header.delayfixed {
  position: fixed;
  top: -250px;
  transition: all 0.5s ease-in-out;
}

.global-header.fixed .header-content {
  padding: 10px 0;
  transition: all 0.5s ease-in-out;
}
.global-header.fixed .nav-item a{
  color: #002F6C;
}
.global-header.fixed .brancding-container img {
  width: 200px;
  height: auto;
}

.part-title {
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  margin: 0;
}

.part-content {}

.content-part-container {
  padding-top: 80px;
}

.custom-checklist {
  padding: 0;
  margin: 0;

}

.custom-checklist li {
  position: relative;
  display: flex;
  list-style: none;
  padding: 5px 0 10px;
}

.custom-checklist li:before {
  background: url("../img/icon-check.svg") no-repeat;
  margin-right: 8px;
  content: '';
  display: block;
  flex: 0 0 25px;
  height: 25px;
  margin-top: 1px;
}

.btn-default {
  padding: 7px 30px;
  background: #003ADC;
  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 14px 33px rgba(0, 0, 0, 0.05), 0px 22px 17px rgba(0, 0, 0, 0.04), 0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.02), 0px 2px 2px rgba(0, 0, 0, 0.01);
  border-radius: 30px;
  color: #fff;
  transition: all 1s ease-in-out;
  box-shadow: inset 0 0 0 0 #003ADC;;
}
.btn{
  text-decoration: none;
  display: inline-block;

}
.btn-default:hover {

  color: #fff;
  background: transparent;
  box-shadow: inset 300px 0 0 0 var(--second-color);
  transition: all 1s ease-in-out;
}
.btn-white {
  padding: 7px 30px;
  color: var(--main-color);
  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 14px 33px rgba(0, 0, 0, 0.05), 0px 22px 17px rgba(0, 0, 0, 0.04), 0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.02), 0px 2px 2px rgba(0, 0, 0, 0.01);
  border-radius: 30px;
  background: #fff;
  transition: all 0.5s ease-in-out;
}

.btn-white:hover {
  background: var(--main-color);
  color: #fff;
  transition: all 0.5s ease-in-out;
}

.ease{
  transition: all 0.5s ease-in-out;
}
/*footer*/
.footer-container {
  padding: 50px 0;
  background: #002F6C;
  color: #fff;
}

.language-switcher {
  display: flex;
  align-items: center;
}

.lang-option-container {
  position: relative;
  margin-left: 10px;

}
.footer-menu-container {
  justify-content: space-between;
}
.lang-option-container button {
  border: 1px solid #96B9FB;
  border-radius: 20px;
  background: transparent;
  padding: 7px 30px 7px 20px;
  color: #fff;
  display: flex;
  align-items: center;
}

.lang-option-container button:after {
  content: '';
  flex: 0 0 6px;
  height: 6px;
  display: block;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  margin-left: 15px;
  transform: rotate(45deg);
}

.lang-option {
  display: none;
  position: absolute;
  top: 40px;
  left: 20px;
  padding: 0;
  margin: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0px 4px 10px rgb(0 0 0 / 10%);
}

.lang-active {
  display: flex;
  white-space: nowrap;
}

.lang-option.active {
  display: block;
  border: 0;
  list-style: none;
  width: 161px;
}

.lang-option li {}

.lang-option li a {
  text-decoration: 0;
  font-size: 14px;
  color: var(--main-color);
  padding: 8px 10px;
  display: block;
}

.lang-option li a:hover {
  background: var(--main-color);
  color: #fff;
}

.footer-menu,
.footer-contact-info,
.sosmedia_container {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-contact-info{
  padding-left: 40px;
}
.sosmedia_container {
  display: flex;
  gap: 7px;
}

.footer-menu li,
.footer-contact-info li {
  padding: 0 0 10px;
}

.footer-contact-info p {
  color: #fff;

}

.footer-menu li a,
.footer-contact-info a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
}

.footer-content {
  margin-bottom: 40px;
}

.footer-contact-info a img {
  margin-right: 10px;
}

.bottom-footer {
  padding-top: 40px;
}

.bottom-footer p {
  margin-bottom: 10px;
}
.bottom-footer-content .left-footer{
  flex: 0 0 28%;
}
.bottom-footer-content .right-footer{
  flex: 0 0 72%;
}
.copyright-container {
  border-top: 1px solid #FFFFFF;
  padding-top: 30px;
  font-size: 12px;
}

.search-wrapper {
  display: none;
}

.search-wrapper.active {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9;
  height: 100%;
}

.floation-btn-container {
  position: fixed;
  bottom: 50px;
  right: 20px;
  left: auto;
  z-index: 99;
}

.floation-btn-container img {
  /* filter: drop-shadow(3px 40px 30px rgba(0, 0, 0, 0.1)) drop-shadow(3px 14px 33px rgba(0, 0, 0, 0.2)) drop-shadow(3px 22px 17px rgba(0, 0, 0, 0.1)) drop-shadow(3px 12px 10px rgba(0, 0, 0, 0.1)) drop-shadow(3px 6px 5px rgba(0, 0, 0, 0.1)) drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.1)); */
  filter: drop-shadow(5px 4px 7px rgba(0,0,0,0.4));
  width: 70px;
  height: 70px;
}

/* --------------------------------

xpopup

-------------------------------- */
.cd-popup , .menu-overlay{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  z-index: 9;
}

.cd-popup.is-visible , .menu-overlay.is-visible{
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: 4em auto;
  background: #FFF;
  border-radius: 30px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  padding: 5px 10px;
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.cd-popup-container p {
  padding: 3em 1em;
}

.cd-popup-container {
  margin: 10em auto;
}

.search-keyword {
  padding: 10px 10px 10px 45px;
  background: url(../img/icon-search.svg) no-repeat 10px center;
  border: 0;
  background-size: 24px;
  width: 100%;
}

.search-keyword::-webkit-input-placeholder {
  /* Edge */
  color: #ccc;
  font-style: italic;
}

.search-keyword:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #ccc;
  font-style: italic;
}

.search-keyword::placeholder {
  color: #ccc;
  font-style: italic;
}

.search-keyword:active,
.search-keyword:focus-visible,
.search-keyword:focus {
  outline: none;
}

/** FONT SIZE **/
.fs-1 {
  font-size: 40px !important;
}

.fs-2 {
  font-size: 32px !important;
}

.fs-3 {
  font-size: 28px !important;
}

.fs-4 {
  font-size: 24px !important;
}

.fs-5 {
  font-size: 20px !important;
}

.fs-body {
  font-size: 16px !important;
}

.fs-body-small {
  font-size: 14px !important;
}

.fs-caption {
  font-size: 12px !important;
}

.bold-600{
  font-weight: 600;
}
.bold-700{
  font-weight: 700;
} 
/*** TEXT COLOR **/
.text-neutral-700 {
  color: var(--neutral-700);
}

.text-neutral-800 {
  color: var(--neutral-800);
}

.text-primary-500 {
  color: var(--primary-500);
}

.text-neutralwhite-700 {
  color: var(--neutralwhite-700);
}
/*** Breadcrumb **/
.breadcrumb {
  --bs-breadcrumb-item-active-color: var(--main-color);
}

.breadcrumb a {
  color: var(--neutral-700);
  text-decoration: none;
}

.breadcrumb .active {
  font-weight: 700;
}

.breadcrumb-item+.breadcrumb-item::before {
  padding-top: 3px;
  color: var(--neutral-700);
  content: url('https://api.iconify.design/material-symbols/arrow-forward-ios-rounded.svg?color=%23706f71');
}

.scroll-to-top div {
  background: #96B9FB;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.scroll-to-top div:hover {
  cursor: pointer;
}

.scroll-to-top div:before {
  content: '';
  border-right: 3px solid #002F6C;
  border-bottom: 3px solid #002F6C;
  height: 15px;
  width: 15px;
  display: block;
  transform: rotate(-135deg);
}
.progress-container{
  flex: 0 0 100%;
}
.progress-container .progress{
  flex: 0 0 90%;
}
.progress-container  .progress-count{
  flex: 0 0 10%;
}
ul.ks-cboxtags {
  list-style: none;
  padding: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}
ul.ks-cboxtags li{
  flex: 0 0 40%;
  position: relative;
}
.progress-count{
  font-size: 11px;
  padding-left: 5px;
}

ul.ks-cboxtags li label{
  display: inline-block;
  background: #6190F4;
  color: #fff;
  border-radius: 25px;
  white-space: nowrap;
  margin: 3px 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all .2s;
  cursor: pointer;
}
ul.ks-cboxtags li label {
  padding: 6px 12px;
  cursor: pointer;
  width: 100%;
  font-size: 14px;
}
ul.ks-cboxtags li label:focus, ul.ks-cboxtags li label:focus-visible,ul.ks-cboxtags li input[type="checkbox"]:focus, ul.ks-cboxtags li input[type="checkbox"]:focus-visible {
  outline: none;
}
ul.ks-cboxtags li label:focus, ul.ks-cboxtags li label:focus-visible,ul.ks-cboxtags li input[type="radio"]:focus, ul.ks-cboxtags li input[type="radio"]:focus-visible {
  outline: none;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label, ul.ks-cboxtags li input[type="radio"]:checked + label, ul.ks-cboxtags li label:hover {
  background-color: #003ADC;
  color: #fff;
  transition: all .2s;
} 
ul.ks-cboxtags li input[type="checkbox"], ul.ks-cboxtags li input[type="radio"] {
  position: absolute;
  opacity: 0;
} 
.register-modal-header{
  background:#002F6C;
  color: #fff;
  justify-content: center;
  position: relative;
  flex-wrap: wrap;
  padding: 30px 40px;
}
.register-modal-header h5, #modalSuccess .modal-header h5{
  color: #fff;
}
.register-modal-header .btn-close{
  position: absolute;
  right: 0;
  top: 0;
}
.register-modal-header .modal-title{
  margin-bottom: 30px;
}
.register-modal-content .modal-body{
  padding: 30px 40px;
}
.register-form-container .nav-link, .register-form-container .submit-register{
  font-size: 14px;
  color: #fff;
  background: #002F6C;
  border: 0;
  border-radius: 20px;
  display: inline-block;
  padding: 5px 30px ;
  min-width: 150px;
  cursor: pointer;
}
.form-register-container .nav-link:hover{
  box-shadow: 5px 5px 16px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow: 5px 5px 16px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 5px 5px 16px 0px rgba(0,0,0,0.3);
}
.register-form-container  .form-input{
  padding: 10px 0 10px 0;

}
.register-form-container input{
  background: #FFFFFF;
  border: 1px solid #C1C1C1;
  border-radius: 20px;
  width: 100%;
  padding: 5px 15px;
  font-size: 14px;
}
.register-form-container .form-item-group{
  text-align: center;
}


.form-contact .form-control {
  padding: 15px 20px;
}

.form-contact .btn-primary {
  font-weight: 700;
  font-size: 16px;
  color: #FFF;
  padding: 9px 90px;
  background: #003ADC;
  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 14px 33px rgba(0, 0, 0, 0.05), 0px 22px 17px rgba(0, 0, 0, 0.04), 0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.02), 0px 2px 2px rgba(0, 0, 0, 0.01);
  border-radius: 30px;
}

.form-contact .btn-primary:hover {
  background: var(--primary-500);
}
.mitralist-container{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.mitralist-container li{
  flex: 0 0 25%;
  padding: 0 15px;
  margin-bottom: 30px;
  height: 82px;
  display: flex;
  justify-content: center;
  align-items: center;

}
.mitralogo-item{
  border: 1px solid #96B9FB;
  border-radius: 20px;
  padding: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.mitralogo-item img{
  height: 100%;
  width: 100%; 
  object-fit: contain;
}
.part-content.mitra-content{
  padding-top: 40px;
}
.container-mitra{
  padding-bottom: 10px;
}
.footer-logo img{
  height: 80px;
  width: auto;
}