/* ===================================
    Crafto - Bisiness
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@100;300;400;500;600;700;800&display=swap');
/* variable */
:root {     
    --base-color: #00aeef;
	--alt-color: #00445e;
    --dark-gray: #262b35;
    --medium-gray:#676767;
    --primary-font: 'Be Vietnam', sans-serif;
    --alt-font: 'Sora', sans-serif;
}
/* reset */
body { 
    font-size: 17px;
    line-height: 32px;
}
.theme-color { color: var(--base-color); }
.base-color { color: var(--base-color); }
hr { margin-top: 3.5rem; margin-bottom: 3.5rem;}
/* header */
header .navbar-brand img {
    max-height: 75px;
}
.navbar .navbar-nav .nav-link {
    font-size: 17px;
    font-weight: 400;
}
.sticky .header-transparent .header-button .btn {
    color: var(--dark-gray);
    border-color: var(--dark-gray);
}
.sticky .header-transparent .header-button .btn:hover {
    border-color: var(--dark-gray);
    color: var(--white);
    background:  var(--dark-gray);
}
header.sticky.sticky-active [data-header-hover="light"] .widget-text i {
    color: var(--white);
}
/* accordion style 02 */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    background-color: var(--dark-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover a,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active a{
    opacity: .5;
}
/* bg color */
.bg-gradient-sherpa-blue-black {
    background-image: linear-gradient(to right top, #23248C, #22236D, #232348, #222226, #232323);
}
.bg-gradient-sherpa-black-blue {
    background-image: linear-gradient(to right top, #232323, #222226, #232348, #22236D, #23248C);
} 
/* bg transparent color */
.bg-base-color-transparent {
    background-color: rgba(87, 88, 214,.8);
}
/*  tabs style 05  */
.tab-style-05 .nav-tabs > li.nav-item {
    letter-spacing: -.5px;
}
/* accordion */
.accordion .accordion-item .accordion-header .accordion-title i {
    top: 52%;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: 25px}

/*  progress bar style 01  */
.progress-bar-style-01 .progress .progress-bar-title {
    bottom: 15px;
}
/* page title */
.page-title-extra-large h1 {
    font-size: 4.7rem;
    line-height: 4.7rem;
}
/* separator line */
.separator-line-9px {
    height: 9px;
}
/* tag */
.tag-cloud a { 
    padding-top: 5px;
    padding-bottom: 9px;
}
/* blog comment */ 
.blog-comment li .btn-reply {
    padding-top: 5px;
    padding-bottom: 7px;
}
/* number pagination style 01 */
.pagination-style-01 .page-item .page-link {
    line-height: 42px;
}
.pagination-style-01 .page-item.active .page-link {
    background: var(--dark-gray);
    color: var(--white);
}
/* top right bottom left */
.bottom-minus-45px {
    bottom: -45px;
}
.right-minus-45px {
    right: -45px;
}
/* footer */
footer .footer-logo img {
    max-height: 75px;
}
footer ul li {
    margin-bottom: 0;
}
.footer-dark a:hover {
    color: var(--white);
}
/* model popup */
.mfp-bg {
    background: #000000;
    opacity: 0.7;
}
/* media query responsive */
@media (max-width: 1499px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 15px;
        padding-right: 15px;
    } 
}
@media (max-width: 1399px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 13px;
        padding-right: 13px;
    }
    .sticky-wrap.shadow-in {
        left: 35px;
    }
}
@media (max-width: 1300px) {
    .sticky-wrap.shadow-in {
        left: 10px;
    }
}
@media (max-width: 991px) {
    .header-transparent .header-button .btn {
        color: var(--dark-gray);
        border-color: var(--dark-gray);
    }
    .header-transparent .header-button .btn:hover {
        border-color: var(--dark-gray);
        color: var(--white);
        background:  var(--dark-gray);
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        width: calc(100% + 30px) !important;
        margin-left: -15px;
        padding: 10px 45px;
        margin-bottom: 0;
        margin-right: -15px;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:last-child a {
        padding-bottom: 17px;
    }
}
@media (max-width: 767px) {
    p {
        margin-bottom: 20px;
    }
    .page-title-extra-large h1 {
        font-size: 40px;
        line-height: 46px;
    }
}

@media (max-width: 576px) {
	header .navbar-brand img {
		max-height: 60px;
	}
}

footer .list-inline-item a, .tag-links .list-inline-item a  {
    display: inline-block;
    padding: 5px 8px 8px;
    line-height: 1;
    color: white;
    vertical-align: baseline;
    border-radius: 8px;
	background-color: var(--base-color);
	margin-bottom: 8px;
}

footer .list-inline-item a:hover  {
    color: white;
	background-color: var(--alt-color);
}

.tag-link {
    display: inline-block;
    padding: 8px 16px;
    line-height: 1;
    color: white;
    vertical-align: baseline;
    border-radius: 8px;
	background-color: var(--base-color);
	font-size: 80%;
}

.tag-link:hover  {
    color: white;
	background-color: var(--alt-color);
}
/* left right top bottom */
.left-minus-45 {
    left: -45%;
}
.bottom-minus-200px {
    bottom: -200px;
}

.google-maps-link a {
    background-color: var(--base-color);
	font-size: 14px;
}

.gm-style .gm-style-iw-tc::after {
    background: var(--base-color);
}



.infowindow h4 { font-size: 1.4rem; color: var(--base-color); margin-bottom: 10px; font-weight: bold}
.infowindow h4 a { color: var(--base-color);}
.infowindow p { margin-top: 0;}
.bg-alt-color { background-color:var(--alt-color);}
.alt-color { color:var(--alt-color);}


.swiper-home { margin-top:300px;}
@media (max-width: 991px) {
	.swiper-home { margin-top:0px;}
}
@media (min-width: 992px) and (max-width: 992px) {
  .swiper {
    margin-top: 0 !important;
  }
}
.table-button-link { padding-top:5px !important; padding-bottom:5px !important;  min-width:140px; }


label.error { font-size: 12px; color: #C10000; display: block; text-align: right;}

.form-group.is-invalid { margin-bottom: .25rem !important; }

.form-group.is-invalid .form-icon { top:32%; }

.form-group.is-invalid input, .form-group.is-invalid select, .form-group.is-invalid textarea, .form-group.is-invalid .ts-wrapper {
    border-color: #C10000;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(193, 0, 0, 0.3);
}
.form-group.is-valid .ts-wrapper {
    border-color: #198754;
}

#crgMap {
	height: 700px;
	width: 100%;
	border-bottom: 10px solid var(--base-color);
}

#crgChapterMap {
	height: 700px;
	width: 100%;
	border-bottom: 10px solid var(--base-color);
}

#crgEventMap {
	height: 500px;
	width: 100%;
}


.dt-layout-table { margin-top:20px !important; margin-bottom:20px !important;}

div.dt-container div.dt-search, table.dataTable tbody td.dt-body-right, table.dataTable tbody th.dt-body-right, table.dataTable td.dt-right, table.dataTable td.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable tfoot td.dt-head-right, table.dataTable tfoot th.dt-head-right, table.dataTable th.dt-right, table.dataTable th.dt-type-date, table.dataTable th.dt-type-numeric, table.dataTable thead td.dt-head-right, table.dataTable thead th.dt-head-right {
    text-align: center;
}

table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order, table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order {
    top: -6px;
}

table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before, table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before {
    line-height: 12px;
}

.dt-paging-button button.page-link { padding-top:2px; padding-bottom:2px;}

.filter-box button.btn { max-height:38px;}

.form-label { margin-bottom:.25rem; font-weight:bold; letter-spacing: -.5px; 
}

.form-label::after {
  content: "\f178";
  font-family: "Font Awesome 6 Pro";  /* or "Font Awesome 6 Free" */
  font-weight: 400;                     /* use 400 for regular, 900 for solid */
  display: inline-block;
  margin-left: 0.5em;                   /* space between text and icon */
  vertical-align: middle;               /* align with text baseline */
	color:var(--base-color);
}



table.table-hover a:not(.btn) {
  display: block;
}


input::placeholder,
textarea::placeholder {
	font-style: italic;
  font-size: 1rem;
  color: #CCC !important;
  opacity: 1; /* optional: ensures full color visibility */
}

.label-required::before {
    content: "*";
    color: #C10000; /* Bootstrap's standard red */
    margin-right: 0.15em;
}

input:read-only {
  background-color: var(--bs-light);
  color: #777;
  cursor: not-allowed;
}

#referral_data { color: var(--dark-gray);}
#referral_data label { font-size: 13px; font-weight: bold;}
#referral_data a { color: var(--base-color);}
#referral_log { color: var(--dark-gray);}
#referral_log label { font-size: 13px; font-weight: bold; text-transform: uppercase; }
#referral_log p { margin-bottom:0; }
#referral_log small { margin-bottom:0; display: block; text-align: end; font-size: 13px; color: var(--light-gray);
}

#cropImage {
	max-width: 100%;
	max-height: 600px;
}
#cropImageOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	color: var(--base-color);
}
/* optional: make page content unscrollable while loading */
body.loading {
	overflow: hidden;
}
#page-title { background-color: var(--alt-color); padding-top: 0; padding-bottom: 0; }
#page-title h1 { font-size: 3.8rem; line-height: 3.8rem; margin-bottom: 0; color:var(--white); font-weight: 500; letter-spacing: -2px; }
#page-title h2 { font-size: 1.1rem; line-height: 1.1rem; margin-bottom: 0; color:var(--light-gray); text-transform: uppercase; font-weight: 700;}


#chapter-contact h4 { font-size: 2.2rem; line-height: 2.2rem; letter-spacing: -2px; margin-bottom: 1.5rem; text-align: center;}

.title-line { top:-2px; height: 1px; width: 30px; background-color: var(--base-color); position: relative; vertical-align: middle; display: inline-block; margin-right: .4rem;}
.profile-photo { border-radius: 50%; border: 5px solid #FFF; height: 225px; }
.profile-logo { max-height: 200px; max-width: 350px; }

.btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;              /* adjust size as needed */
  height: 2.5rem;             /* same as width for a perfect circle */
  border-radius: 50%;         /* makes it a circle */
  background-color: var(--base-color);
  color: #fff;                /* icon/text color—override if needed */
  border: none;               /* remove default button border */
  padding: 0;                 /* ensure the size stays fixed */
  cursor: pointer;
  text-decoration: none;      /* if used on an <a> */
}
.btn-circle:hover {
color:#eee;
}

#cms-include-mt { margin-top:-220px !important; }
@media (max-width: 1600px) { #cms-include-mt { margin-top:-180px !important; } }
@media (max-width: 991px) { #cms-include-mt { margin-top:-150px !important; } }
@media (max-width: 767px) { #cms-include-mt { margin-top:-100px !important; } }

.form-check-input { cursor: pointer !important; }