/*----- Mark's Custom CSS -----*/
body{--primary:#84c225;--top_promo_hgt:4rem}
.text-primary{color:var(--primary)!important}
.border-primary{border-color:var(--primary)!important}
.title::after{border-bottom:none}

/* top promotion */
.top-promotion,.top-promotion .row{height:var(--top_promo_hgt)}
.top-promotion a{font-size:1.4rem;padding:1rem}
@media (min-width:768px) {
  .top-promotion a{font-size:1.6rem;line-height:1.2}
}
/*----- header home -----*/
.b9-header .container-fluid{padding: 7px 10px}
.b9-header button.navbar-toggler{-webkit-box-shadow:none;box-shadow:none}
.navbar-toggler-custom-icon{width: 46px;height: 46px;}
@media (min-width:1200px) {
  .b9-header .container-fluid{padding: 10px 15px}
  .b9-header .navbar{min-height: 67px}
  .b9-header .navbar-brand,.b9-header .navbar-brand img{width: 190px;min-width:unset}
  .b9-header .navbar-expand-xl .navbar-nav .dropdown-menu{top: 46px;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;min-width: 152px;border-top: none;border-radius: 0 0 6px 6px;font-size:15px;text-transform:uppercase}
  .b9-header .navbar .navbar-nav .nav-link{font-size:var(--body_font_size)}
}
/*----- header page (user) -----*/
.b9-header{--user_icon_size:48px}
.b9-header .avatar{width:var(--user_icon_size);height:var(--user_icon_size)}
.b9-header .d-flex.order-2 .nav-item.dropdown,
.b9-header #navbarDropdownUser{display:block;width:100%;height:100%}
.b9-header #navbarDropdownUser+.dropdown-menu{max-width:85vw;}
.b9-header #navbarDropdownUser+.dropdown-menu .card-body>div{padding:15px 10px 0 !important}
.b9-header #navbarDropdownUser+.dropdown-menu .card-body #userDetailName{margin:0 auto;font-size:16px;color:var(--primary)}
.b9-header #navbarDropdownUser+.dropdown-menu .card-body #userEmail{margin-bottom:0;font-size:14px;font-weight:400}
.b9-header #userMenuContainer .nav-link{padding:8px 15px;font-size:15px}
@media (min-width:992px) {.b9-header #userMenuContainer .nav-link{padding:6px 15px}}
@media (min-width:1200px) {.b9-header #userMenuContainer .nav-link:hover{color:unset}}

/*----- hero -----*/
.b9-hero{position:relative;min-height:620px;padding:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.b9-hero-video{z-index:-1;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.b9-hero .container-fluid{position:relative;top:calc(var(--b9-header-height, 60px) + var(--top_promo_hgt, 40px));padding-top:4rem;padding-bottom:4rem}
.b9-hero h1 span{display:block;margin-bottom:1.5rem;text-transform:uppercase;}
.b9-hero .b9-hero-header{font-size:2.1rem}
.b9-hero .b9-hero-title{font-size:3rem}
.b9-hero .b9-hero-description{font-size:1.6rem}
.b9-hero .b9-hero-actions .btn:first-child{margin-right:1rem}
/*----- hero countdown -----*/
.b9-hero-countdown{--countdown_item_size:46px;text-align:center}
.b9-hero-countdown .countdown-title{font-size:36px;font-weight:700;margin-bottom:5px;color:var(--white)}
.b9-hero-countdown .countdown-timer{gap:calc(var(--countdown_item_size) * .15)}
.b9-hero-countdown .countdown-item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:var(--countdown_item_size);height:var(--countdown_item_size);gap:2px;border-radius:12px;padding:5px;background-color:var(--primary);}
.b9-hero-countdown .countdown-item span{color:var(--text);line-height:1}
.b9-hero-countdown .countdown-item .countdown-value{font-size:calc(var(--countdown_item_size) * .48);font-weight:800}
.b9-hero-countdown .countdown-item .countdown-label{font-size:calc(var(--countdown_item_size) * .18);font-weight:400}
/*----- hero responsive -----*/
@media (max-width:575.98px){
  .b9-hero .b9-hero-actions .btn{padding-right:2rem;padding-left:2rem}
  .b9-hero .b9-hero-actions .btn:nth-child(3){display:block;margin:2rem 18% 0}
  .b9-hero .b9-hero-actions .btn{font-size:1.3rem}
}
@media (min-width:576px) {
  .b9-hero .b9-hero-header{font-size:2.4rem}
  .b9-hero .b9-hero-title{font-size:3.4rem}
  .b9-hero .b9-hero-actions .btn:nth-child(2){margin-right:1rem}
}
@media (min-width:992px) {
  .b9-hero-countdown{--countdown_item_size:60px}
  .b9-hero-countdown .countdown-title{font-size:36px}
}
@media (min-width:1200px) {
  .b9-hero{min-height:580px}
  .b9-hero .container-fluid{top:calc(var(--b9-header-height, 67px) + var(--top_promo_hgt, 40px));padding-top:6rem}
  .b9-hero .b9-hero-header{font-size:2.8rem}
  .b9-hero .b9-hero-title{font-size:3.8rem}
  .b9-hero .b9-hero-description{font-size:1.8rem}
}