@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Top Bar
	3.2 Header Content
	3.3 Logo
	3.4 Main Nav
	3.5 Hamburger
4. Menu
5. Section
6. Home
7. Features
8. Courses
9. Counter
10. Events
11. Team
12. News
13. Newsletter
14. Footer



******************************/

/***********
1. Fonts
***********/

@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:300,400,500,700,900");

/*********************************
2. Body and some general stuff
*********************************/

* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
body {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background: #ffffff;
    color: #a5a5a5;
}
div {
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul {
    list-style: none;
    margin-bottom: 0px;
}
p {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 1.85;
    font-weight: 400;
    color: #76777a;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
p a {
    display: inline;
    position: relative;
    color: inherit;
    border-bottom: solid 1px #ffa07f;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
p:last-of-type {
    margin-bottom: 0;
}
a,
a:hover,
a:visited,
a:active,
a:link {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
p a:active {
    position: relative;
    color: #ff6347;
}
p a:hover {
    color: #ffffff;
    background: #ffa07f;
}
p a:hover::after {
    opacity: 0.2;
}
::selection {
}
p::selection {
}
h1 {
    font-size: 48px;
}
h2 {
    font-size: 36px;
}
h3 {
    font-size: 24px;
}
h4 {
    font-size: 18px;
}
h5 {
    font-size: 14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    color: #384158;
    margin-bottom: 0;
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
}
.form-control {
    color: #db5246;
}
section {
    display: block;
    position: relative;
    box-sizing: border-box;
}
.clear {
    clear: both;
}
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
.float_left {
    float: left;
}
.float_right {
    float: right;
}
.trans_200 {
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.trans_300 {
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.trans_400 {
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
.trans_500 {
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.fill_height {
    height: 100%;
}
.super_container {
    width: 100%;
    overflow: hidden;
}
.prlx_parent {
    overflow: hidden;
}
.prlx {
    height: 130% !important;
}
.parallax-window {
    min-height: 400px;
    background: transparent;
}
.nopadding {
    padding: 0px !important;
}
.btn-primary {
    background: #14bdee;
    border-color: #14bdee;
}
.btn-primary:hover {
    background: #0d9fcb;
    border-color: #0d9fcb;
    transition: all 300ms linear;
}

/*********************************
3. Header
*********************************/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    -webkit-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    transform: translateY(0);
}
.header.scrolled {
    top: -40px;
}

.header.hide {
    transform: translateY(-100%);
}

.header.show {
    transform: translateY(0);
}

.footer-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    -webkit-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    transform: translateY(100%);
    opacity: 1;
    padding: 0;
    height: 50px;
    max-height: none;
}

.footer-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.footer-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.footer-static {
    position: static;
    box-shadow: none;
}

/*********************************
3.1 Top Bar
*********************************/

.top_bar {
    width: 100%;
    background: #14bdee;
}
.header.scrolled .top_bar {
}
.top_bar_scrolled {
    visibility: hidden;
}
.top_bar_container {
    width: 100%;
    height: 100%;
}
.top_bar_content {
    width: 100%;
    height: 40px;
}
.top_bar_contact_list li {
    display: inline-block;
}
.question {
    font-family: "Roboto Slab", serif;
    font-size: 14px;
    color: #ffffff;
    margin-left: 0px;
}
.top_bar_contact_list li i,
.top_bar_contact_list li > div {
    display: inline-block;
    font-size: 14px;
    color: #ffffff;
}
.top_bar_contact_list li > div {
    margin-left: 1px;
}
.top_bar_contact_list li:not(:last-child) {
    margin-right: 21px;
}
.top_bar_login {
    height: 100%;
}
.login_button {
    width: 230px;
    height: 100%;
    background: #f3f3f3;
    text-align: center;
}
.login_button a {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    color: #384158;
}
.language-login-container {
    background-color: #f3f3f3;
    border-radius: 6px;
    height: 40px;
}

.language-btn {
    background: none;
    border: none;
    padding: 6px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 100%;
}

.language-btn:focus {
    outline: none;
    box-shadow: none;
}

.flag-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.language-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.login-link {
    font-size: 14px;
    font-weight: 500;
    color: #002b4e;
    text-decoration: none;
    transition: color 0.3s ease;
}

.login-link:hover {
    color: #0069d9;
}


/*********************************
3.2 Header Content
*********************************/

.header_container {
    width: 100%;
    height: 75px;
    background: #ffffff;
}
.header_content {
    height: 75px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.header.scrolled .header_content {
    height: 75px;
}
.header_container_scrolled {
    height: 75px;
    top: -40px;
}

/*********************************
3.3 Logo
*********************************/

.logo,
.logo_text {
    display: inline-block;
}
.logo {
    width: 60px;
    height: 60px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.logo img {
    max-width: 100%;
}
.logo_text {
    font-family: "Roboto Slab", serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 0.75;
    color: #384158;
    vertical-align: middle;
    margin-left: 7px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.logo_text span {
    color: #14bdee;
}
.header.scrolled .logo {
    width: 40px;
    height: 40px;
}
.header.scrolled .logo_text {
    font-size: 24px;
}

/*********************************
3.4 Main Nav
*********************************/

.main_nav_contaner {
}
.main_nav,
.search_button,
.shopping_cart {
    display: inline-block;
}
.main_nav li {
    display: inline-block;
    position: relative;
}
.main_nav li:not(:last-child) {
    margin-right: 44px;
}
.main_nav li a {
    font-size: 18px;
    font-weight: 500;
    color: #384158;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.main_nav li a:hover,
.main_nav li.active a {
    color: #14bdee;
}
.main_nav li.active::after {
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #14bdee;
    content: "";
}
.search_button {
    margin-left: 46px;
    cursor: pointer;
}
.shopping_cart {
    margin-left: 23px;
    cursor: pointer;
}
.search_button i,
.shopping_cart i {
    font-size: 18px;
    color: #181818;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.search_button:hover i,
.shopping_cart:hover i {
    color: #14bdee;
}
.header_search_form {
    display: block;
    position: relative;
    width: 40%;
}
.header_search_container {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: #14bdee;
    z-index: -1;
    opacity: 0;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
.header_search_container.active {
    bottom: -73px;
    opacity: 1;
}
.header_search_content {
    width: 100%;
    height: 73px;
}
.search_input {
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    padding-left: 20px;
}
.header_search_button {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    border: none;
    outline: none;
    cursor: pointer;
}

/*********************************
3.5 Hamburger
*********************************/

.hamburger_container {
}
.hamburger {
    display: none;
    cursor: pointer;
}
.hamburger i {
    font-size: 20px;
    color: #353535;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.hamburger:hover i {
    color: #14bdee;
}

/*********************************
4. Menu
*********************************/

.menu {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: #ffffff;
    z-index: 101;
    padding-right: 60px;
    padding-top: 87px;
    padding-left: 50px;
}
.menu .logo a {
    color: #000000;
}
.menu.active {
    right: 0;
}
.menu_close_container {
    position: absolute;
    top: 30px;
    right: 60px;
    width: 18px;
    height: 18px;
    transform-origin: center center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
}
.menu_close {
    width: 100%;
    height: 100%;
    transform-style: preserve-3D;
}
.menu_close div {
    width: 100%;
    height: 2px;
    background: #232323;
    top: 8px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.menu_close div:last-of-type {
    -webkit-transform: rotate(90deg) translateX(-2px);
    -moz-transform: rotate(90deg) translateX(-2px);
    -ms-transform: rotate(90deg) translateX(-2px);
    -o-transform: rotate(90deg) translateX(-2px);
    transform: rotate(90deg) translateX(-2px);
    transform-origin: center;
}
.menu_close:hover div {
    background: #937c6f;
}
.menu .logo {
    margin-bottom: 60px;
}
.menu_nav ul li {
    margin-bottom: 9px;
}
.menu_nav ul li a {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
    font-weight: 700;
    letter-spacing: 0.1em;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.menu_nav ul li a:hover {
    color: #14bdee;
}
.menu .search {
    width: 100%;
    margin-bottom: 67px;
}
.search {
    display: inline-block;
    width: 400px;
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -o-transform: translateY(2px);
    transform: translateY(2px);
}
.menu .header_search_form {
    width: 100%;
}
.search form {
    position: relative;
}
.menu .search_input {
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    border: none;
    outline: none;
    padding-left: 15px;
    color: rgba(0, 0, 0, 0.5);
}
.menu .search_input::-webkit-input-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.4) !important;
}
.menu .search_input:-moz-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.4) !important;
}
.menu .search_input::-moz-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.4) !important;
}
.menu .search_input:-ms-input-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.4) !important;
}
.menu .search_input::input-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.4) !important;
}

/*********************************
5. Section
*********************************/

.section_title_container {
    max-width: 600px;
    margin: 0 auto;
}
.section_title {
    line-height: 1.2;
}
.section_subtitle {
    line-height: 1.85;
    margin-top: 14px;
}
.section_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*********************************
6. Home
*********************************/

.home {
    width: 100%;
    height: 100vh;
}
.home_slider_container {
    width: 100%;
    height: 100%;
}
.home_slider {
    width: 100%;
    height: 100%;
}
.home_slider_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.home_slider_content {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: auto;
}
.home_slider_title {
    font-family: "Roboto Slab", serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    color: #384158;
    text-shadow: 1px 1px 2px #000000;
}
.home_slider_subtitle {
    font-size: 24px;
    color: #76777a;
    margin-top: 9px;
    text-shadow: 1px 1px 2px #000000;
}
.home_slider_form_container {
    width: 832px;
    margin: 0 auto;
    margin-top: 35px;
}
.home_search_form div {
    width: calc(100% - 140px);
    height: 46px;
    background: #ffffff;
    border-radius: 3px;
}
.home_search_input {
    width: 33.33333333%;
    border: none;
    outline: none;
    height: 25px;
    padding-left: 20px;
}
.home_search_input:not(:last-child) {
    border-right: solid 1px #e5e5e5;
}
.home_search_input::-webkit-input-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.home_search_input:-moz-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.home_search_input::-moz-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.home_search_input:-ms-input-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.home_search_input::input-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.dropdown_item_select {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    background-image: url(../images/down.png);
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 20px;
    padding-left: 20px;
}
.home_search_button {
    width: auto;
    height: 46px;
    background: #14bdee;
    border: none;
    outline: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
}
.home_search_button:hover {
    background: #ffffff;
    color: #000000;
    transition: all 300ms linear;
}
.home_register_button {
    width: auto;
    height: 46px;
    background: #ffffff;
    border: none;
    outline: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
}
.home_register_button:hover {
    background: #0d9fcb;
    color: #ffffff;
    transition: all 300ms linear;
}
.home_slider_nav {
    position: absolute;
    top: 55.8%;
    width: 50px;
    background: #b6b7bd;
    border-radius: 50%;
    text-align: center;
    z-index: 10;
    cursor: pointer;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.home_slider_prev {
    left: 75px;
}
.home_slider_next {
    right: 75px;
}
.home_slider_nav i {
    line-height: 50px;
    color: #ffffff;
    font-size: 22px;
}
.home_slider_nav:hover {
    background: #14bdee;
}

/*********************************
7. Features
*********************************/

.features {
    position: relative;
    width: 100%;
    background: #ffffff;
    padding-top: 93px;
    padding-bottom: 103px;
}
.features_row {
    margin-top: 55px;
}
.feature {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    background: #ffffff;
}
.feature:hover {
    box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.15);
}
.feature_icon {
    height: 55px;
}
.feature_icon img {
    max-width: 100%;
}
.feature_title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}
.feature_line {
    height: 4px;
    background-color: #007bff;
    border: none;
    margin-top: 5px;
    width: 100%;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Container untuk slider */
.feature_slider-container {
    position: relative;
    padding: 0 80px; /* Memberi ruang untuk navigasi */
    margin: 0 -20px; /* Mengkompensasi padding */
}

/* Card styling */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0 15px; /* Jarak antar card */
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Penyesuaian untuk single item */
.feature_slider-container.single-item .owl-stage {
    display: flex;
    justify-content: center;
}

.feature_slider-container.single-item .feature_slider_nav {
    display: none;
}

/* Hover effects */
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Icon styling */
.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1rem;
}

.feature-icon img {
    transition: transform 0.3s ease;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.feature-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1rem;
}

.feature-image img {
    transition: transform 0.3s ease;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.feature-card:hover .feature-icon img {
    transform: scale(1.1);
}

/* Text styling */
.feature-title {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.feature-text {
    color: #7f8c8d;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Navigation buttons */
.feature_slider_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(182, 183, 189, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.feature_slider_prev {
    left: 20px;
}

.feature_slider_next {
    right: 20px;
}

.feature_slider_nav i {
    line-height: 40px;
    color: #ffffff;
    font-size: 18px;
}

.feature_slider_nav:hover {
    background: #14bdee;
    transform: translateY(-50%) scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature_slider-container {
        padding: 0 50px;
    }

    .feature_slider_nav {
        width: 35px;
        height: 35px;
    }

    .feature_slider_nav i {
        font-size: 16px;
    }

    .feature_slider_prev {
        left: 10px;
    }

    .feature_slider_next {
        right: 10px;
    }
}

.file-upload-container {
    display: flex;
    flex-direction: column;
    margin: 16px 0;
    font-family: Arial, sans-serif;
}

.file-upload-label {
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 7px 10px;
    padding-bottom: 0px;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-upload-button {
    color: white;
    padding: 4px 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background-color 0.3s ease;
}

.file-upload-filename {
    font-size: 0.7rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-upload-input {
    display: none;
}

/*********************************
8. Courses
*********************************/

.courses {
    width: 100%;
    padding-top: 93px;
    padding-bottom: 100px;
}
.courses_row {
    margin-top: 45px;
}
.course {
    width: 100%;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0px 1px 10px rgba(29, 34, 47, 0.1);
}
.course_image {
    width: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
}
.course_image img {
    max-width: 100%;
}
.course_body {
    padding-top: 22px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 23px;
}
.course_title a {
    font-family: "Roboto Slab", serif;
    font-size: 20px;
    color: #384158;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.course_title a:hover {
    color: #14bdee;
}
.course_teacher {
    font-size: 15px;
    font-weight: 400;
    color: #384158;
    margin-top: 6px;
}
.course_text {
    margin-top: 13px;
}
.course_footer {
    padding-left: 30px;
    padding-right: 30px;
}
.course_footer_content {
    width: 100%;
    border-top: solid 1px #e5e5e5;
    padding-top: 9px;
    padding-bottom: 11px;
}
.course_info {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #55555a;
}
.course_info:first-child {
    margin-right: 18px;
}
.course_info i {
    color: #ffc80a;
}
.course_price {
    font-family: "Roboto Slab", serif;
    font-size: 20px;
    font-weight: 700;
    color: #14bdee;
}
.course_price span {
    font-family: "Roboto Slab", serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    color: #b5b8be;
    margin-right: 10px;
}
.courses_button {
    width: 210px;
    height: 46px;
    border-radius: 3px;
    background: #14bdee;
    text-align: center;
    margin: 0 auto;
    margin-top: 41px;
    box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.15);
}
.courses_button:hover {
    box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.45);
}
.courses_button a {
    display: block;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 46px;
    color: #ffffff;
}

/*********************************
9. Counter
*********************************/

.counter {
    width: 100%;
    background: #ffffff;
    z-index: 2;
}
.counter_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.counter_content {
    padding-top: 119px;
    padding-bottom: 125px;
}
.counter_title {
    font-family: "Roboto Slab", serif;
    color: #ffffff;
    font-weight: 700;
}
.counter_text {
    margin-top: 19px;
}
.counter_text p {
    color: #ffffff;
}
.milestones {
    margin-top: 39px;
}
.milestone {
    text-align: center;
}
.milestone:not(:last-child)::after {
    display: block;
    position: absolute;
    top: 0;
    right: -45px;
    width: 1px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    content: "";
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
.milestone_counter {
    font-size: 42px;
    font-weight: 700;
    line-height: 0.75;
    color: #14bdee;
}
.milestone_text {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    margin-top: 14px;
}
.counter_form {
    position: absolute;
    top: 0;
    right: 30px;
    width: 380px;
    height: 100%;
    background: #ffffff;
    padding-left: 40px;
    padding-right: 40px;
    box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.15);
}
.counter_form_content {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.counter_form_title {
    font-family: "Roboto Slab", serif;
    font-size: 24px;
    font-weight: 700;
    color: #384158;
    text-transform: uppercase;
    line-height: 0.75;
    margin-bottom: 41px;
}
.counter_input {
    width: 100%;
    height: 46px;
    border: solid 1px #e5e5e5;
    border-radius: 3px;
    padding-left: 20px;
    outline: none;
    color: #384158;
    font-size: 14px;
}
.counter_input:not(:last-child) {
    margin-bottom: 10px;
}
.counter_text_input {
    height: 90px;
    padding-top: 10px;
}
.counter_options {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    background-image: url(../images/down.png);
    background-position: center right;
    background-repeat: no-repeat;
}
.counter_input::-webkit-input-placeholder,
.counter_text_input::-webkit-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.counter_input:-moz-placeholder,
.counter_text_input:-moz-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.counter_input::-moz-placeholder,
.counter_text_input::-moz-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.counter_input:-ms-input-placeholder,
.counter_text_input:-ms-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.counter_input::input-placeholder,
.counter_text_input::input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #b5b8be !important;
}
.counter_form_button {
    width: 100%;
    height: 46px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    outline: none;
    background: #14bdee;
    cursor: pointer;
    margin-top: 30px;
    box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.15);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.counter_form_button:hover {
    box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.45);
}

/*********************************
10. Events
*********************************/

.events {
    width: 100%;
    padding-top: 93px;
    padding-bottom: 70px;
    background: #ffffff;
}
.events_row {
    margin-top: 47px;
}
.event_left {
    padding-right: 20px;
}
.event_mid {
    padding-left: 10px;
    padding-right: 10px;
}
.event_right {
    padding-left: 20px;
}
.event_image {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}
.event_image img {
    max-width: 100%;
}
.event_body {
    padding-top: 30px;
    padding-bottom: 30px;
}
.event_date {
    box-shadow: 0px 1px 10px rgba(29, 34, 47, 0.1);
}
.event_date > div {
    width: 60px;
    height: 60px;
}
.event_day {
    font-family: "Roboto Slab", serif;
    font-size: 24px;
    color: #14bdee;
    font-weight: 700;
    line-height: 0.75;
}
.event_month {
    font-family: "Roboto Slab", serif;
    font-size: 14px;
    color: #14bdee;
    font-weight: 400;
    line-height: 0.75;
    margin-top: 9px;
}
.event:hover .event_date > div {
    background: #14bdee;
}
.event:hover .event_day,
.event:hover .event_month {
    color: #ffffff;
}
.event_content {
    padding-left: 20px;
}
.event_title a {
    font-family: "Roboto Slab", serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #384158;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.event_title a:hover {
    color: #14bdee;
}
.event_info_container {
    margin-top: 11px;
}
.event_info {
    display: inline-block;
    color: #b5b8be;
    font-size: 14px;
}
.event_info:not(:last-child) {
    margin-right: 17px;
}
.event_info span {
    margin-left: 4px;
}
.event_text {
    margin-top: 12px;
}

/*********************************
11. Team
*********************************/

.team {
    width: 100%;
    padding-top: 93px;
    padding-bottom: 60px;
}
.team_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.team_row {
    margin-top: 43px;
}
.team_col {
    margin-bottom: 40px;
}
.team_item {
    width: 100%;
}
.team_image {
    width: 180px;
    height: 160px;
    border-radius: 6px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -86px;
    z-index: 5;
}
.team_image img {
    max-width: 100%;
}
.team_body {
    width: 100%;
    padding-top: 108px;
    padding-bottom: 24px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 1px 10px rgba(29, 34, 47, 0.1);
    text-align: center;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.team_item:hover .team_body {
    box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.15);
}
.team_title a {
    font-family: "Roboto Slab", serif;
    font-size: 20px;
    font-weight: 700;
    color: #384158;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.team_title a:hover {
    color: #14bdee;
}
.team_subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #76777a;
    margin-top: 6px;
}
.social_list {
    margin-top: 16px;
}
.social_list ul li {
    display: inline-block;
}
.social_list ul li:not(:last-child) {
    margin-right: 10px;
}
.social_list ul li a i {
    font-size: 18px;
    color: #76777a;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.social_list ul li:hover a i {
    color: #14bdee;
}
.team_col .team_item {
    padding-left: 6px;
    padding-right: 6px;
}
.team_col:first-child .team_item {
    padding-left: 0;
    padding-right: 6px;
}
.team_col:nth-child(4n) .team_item {
    padding-left: 6px;
    padding-right: 0;
}

/*********************************
12. News
*********************************/

.news {
    width: 100%;
    padding-top: 93px;
    padding-bottom: 100px;
    background: #ffffff;
}
.news_row {
    margin-top: 55px;
}
.news_post_large_container {
    padding-right: 30px;
}
.news_post_large {
    width: 100%;
}
.news_post_image {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}
.news_post_image img {
    max-width: 100%;
}
.news_post_large_title {
    margin-top: 23px;
}
.news_post_large_title a {
    font-family: "Roboto Slab", serif;
    font-size: 20px;
    font-weight: 700;
    color: #384158;
    line-height: 1.4;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.news_post_large_title a:hover {
    color: #14bdee;
}
.news_post_meta {
    margin-top: 11px;
}
.news_post_meta ul li {
    display: inline-block;
    position: relative;
}
.news_post_meta ul li:not(:last-of-type)::after {
    display: inline-block;
    position: relative;
    content: "|";
    margin-left: 14px;
    margin-right: 11px;
}
.news_post_meta ul li a {
    font-size: 14px;
    font-weight: 400;
    color: #b5b8be;
    text-transform: uppercase;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.news_post_meta ul li a:hover {
    color: #14bdee;
}
.news_post_text {
    margin-top: 13px;
}
.news_post_link {
    margin-top: 19px;
}
.news_post_link a {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: #384158;
    text-decoration: underline;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.news_post_link a:hover {
    color: #14bdee;
}
.news_posts_small {
    margin-top: -6px;
}
.news_post_small:not(:last-child) {
    padding-bottom: 31px;
    border-bottom: solid 1px #e5e5e5;
}
.news_post_small:not(:first-child) {
    padding-top: 29px;
}
.news_post_small_title a {
    font-family: "Roboto Slab", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.55;
    color: #384158;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.news_post_small_title a:hover {
    color: #14bdee;
}

/*********************************
13. Newsletter
*********************************/

.newsletter {
    width: 100%;
}
.newsletter_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.newsletter_container {
    width: 100%;
    height: 120px;
}
.newsletter_title {
    font-family: "Roboto Slab", serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
}
.newsletter_subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 6px;
}
.newsletter_form_container {
    width: 450px;
    padding-left: 20px;
}
.newsletter_form {
    display: block;
    position: relative;
    width: 100%;
}
.newsletter_input {
    width: calc(100% - 136px);
    height: 40px;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    outline: none;
    padding-left: 20px;
    color: #ffffff;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.newsletter_input::-webkit-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}
.newsletter_input:-moz-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}
.newsletter_input::-moz-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}
.newsletter_input:-ms-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}
.newsletter_input::input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}
.newsletter_button {
    width: 136px;
    height: 40px;
    background: #ffffff;
    border-radius: 3px;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
    color: #14bdee;
    font-weight: 500;
    letter-spacing: 0.1em;
}

/*********************************
14. Footer
*********************************/

.footer {
    display: block;
    position: relative;
    width: 100%;
    background: #1e2434;
    padding-top: 94px;
}
.footer_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.footer_content {
    padding-bottom: 53px;
}
.footer_logo_text {
    font-family: "Roboto Slab", serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 0.75;
    color: #ffffff;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.footer_logo_text span {
    color: #14bdee;
}
.footer_title {
    font-family: "Roboto Slab", serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    line-height: 0.75;
}
.footer_logo_container {
    margin-top: -14px;
}
.footer_about_text {
    margin-top: 31px;
}
.footer_about_text p {
    color: #ffffff;
}
.footer_social {
    margin-top: 23px;
}
.footer_social ul li {
    display: inline-block;
    width: 45px;
    height: 45px;
    background: #4b505d;
    border-radius: 50%;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.footer_social ul li:not(:last-child) {
    margin-right: 6px;
}
.footer_social ul li a {
    display: block;
    position: relative;
    text-align: center;
}
.footer_social ul li a i {
    color: #ffffff;
    line-height: 45px;
}
.footer_social ul li:hover {
    background: #14bdee;
}
.footer_contact {
    padding-left: 36px;
}
.footer_contact_info {
    margin-top: 33px;
}
.footer_contact_info ul li {
    font-size: 14px;
    font-weight: 400;
    color: #b5b8be;
}
.footer_contact_info ul li:not(:last-child) {
    margin-bottom: 15px;
}
.footer_links {
    padding-left: 80px;
}
.footer_links_container ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}
.footer_links_container {
    margin-top: 33px;
}
.footer_links_container ul li a {
    font-size: 14px;
    color: #b5b8be;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.footer_links_container ul li:not(:last-child) {
    margin-bottom: 15px;
}
.footer_links_container ul li a:hover {
    color: #14bdee;
}
.footer_mobile {
    display: inline-block;
    float: right;
}
.footer_mobile_content {
    padding-top: 35px;
}
.footer_image:not(:last-child) {
    margin-bottom: 10px;
}
.copyright {
    padding-top: 17px;
    padding-bottom: 30px;
    border-top: solid 1px #353a49;
    background-size: cover;
    background-repeat: no-repeat;
}
.cr_list li {
    display: inline-block;
}
.copyright div {
    font-size: 14px;
    color: #b5b8be;
}
.cr_text a {
    color: #ffffff;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.cr_text a:hover {
    color: #14bdee;
}
.cr_list li:not(:last-child) {
    margin-right: 50px;
}
.cr_list li a {
    font-size: 14px;
    color: #b5b8be;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.cr_list li a:hover {
    color: #14bdee;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    z-index: 9999;
}

.slider-content {
    position: relative;
    z-index: 2;
}

.school-subtitle {
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-bottom: 1rem;
}

.highlight-text {
    display: inline-block;
    padding: 8px 25px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #2c3e50;
    border-radius: 30px;
    font-weight: 600;
    backdrop-filter: blur(5px);
}

.slider-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 30px 0;
    color: #ffffff;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    font-style: italic;
    position: relative;
    display: inline-block;
}

/* Button Styling */
.cta-button {
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    min-width: 180px;
}

.cta-primary {
    background: #14bdee;
    color: #fff;
    border: 2px solid #14bdee;
}

.cta-primary:hover {
    background: transparent;
    color: #14bdee;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cta-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.cta-secondary:hover {
    background: #14bdee;
    color: #fff;
    border: 2px solid #14bdee;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.footer_logo {
    max-width: 150px;
    max-height: auto;
    background: #fff;
    border-radius: 100%;
    margin-right: 10px;
    padding: 10px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .slider-container {
        padding: 80px 0;
    }

    .slider-title {
        font-size: 1.8rem;
        margin: 20px 0;
    }

    .school-subtitle {
        font-size: 1rem;
    }

    .slider-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .cta-button {
        width: 100%;
    }

    .footer_logo {
        max-width: 100px;
    }
}

/* Reset box-sizing untuk konsistensi */
*,
*:before,
*:after {
    box-sizing: border-box;
}

.footer_nav_links .footer_link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background on hover */
}

.footer_nav_links .footer_link.active {
    background-color: #007bff; /* Example active state background */
    color: #fff;
}
.footer_nav_links {
    display: -webkit-box; /* Fallback untuk browser lama */
    display: -ms-flexbox; /* Fallback untuk IE10 */
    display: flex; /* Arranges links horizontally */
    -webkit-box-align: center;
    -ms-flex-align: center;
    gap: 20px;
    margin-bottom: 5px; /* Space below links */
}

/* Fallback untuk gap property */
.footer_nav_links > .footer_link:not(:last-child) {
    margin-right: 20px;
}

.footer_nav_links .footer_link {
    text-decoration: none; /* Remove underline */
    color: #fff; /* White text color (assuming dark background) */
    font-weight: bold;
    padding: 8px 15px; /* Add some padding for clickable area */
    border-radius: 5px; /* Slightly rounded corners */
    -webkit-transition: background-color 0.3s ease; /* Safari */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    cursor: pointer;
}

.tab-pane {
    /* Pastikan konsistensi box model */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Container utama untuk floating WhatsApp */
.floating-whatsapp-container {
    position: fixed; /* Membuat elemen tetap di layar */
    bottom: 60px; /* Jarak dari bawah */
    right: 30px; /* Jarak dari kanan */
    z-index: 9999; /* Memastikan elemen berada di atas elemen lain */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; /* Mengatur item agar tersusun vertikal (menu di atas tombol) */
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; /* Menyelaraskan item ke kanan */
}

/* Tombol utama WhatsApp */
.whatsapp-button {
    background-color: #25d366; /* Warna hijau WhatsApp */
    color: white;
    width: 60px; /* Ukuran tombol */
    height: 60px;
    border-radius: 50%; /* Membuat tombol bulat */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 30px; /* Ukuran ikon WhatsApp */
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efek bayangan */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efek bayangan */
    cursor: pointer; /* Mengubah kursor menjadi pointer saat di-hover */
    -webkit-transition: -webkit-transform 0.3s ease-in-out; /* Safari */
    transition: transform 0.3s ease-in-out; /* Transisi untuk efek hover */
}

.whatsapp-button:hover {
    -webkit-transform: scale(1.05); /* Safari */
    transform: scale(1.05); /* Sedikit membesar saat di-hover */
    background-color: #1b9247;
}

/* Opsi menu yang muncul saat tombol diklik */
.whatsapp-options {
    background-color: #fff; /* Latar belakang putih untuk menu */
    border-radius: 10px; /* Sudut melengkung */
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Bayangan yang lebih jelas */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Bayangan yang lebih jelas */
    z-index: 9999;
    padding: 10px 0;
    margin-bottom: 15px; /* Jarak antara menu dan tombol WhatsApp */
    width: 250px; /* Lebar menu */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden; /* Memastikan konten tidak keluar dari border-radius */

    /* Animasi muncul dari bawah */
    -webkit-animation: slideUp 0.3s ease-out forwards;
    animation: slideUp 0.3s ease-out forwards;
}

/* Container utama untuk floating register */
.floating-register-container {
    position: fixed; /* Membuat elemen tetap di layar */
    bottom: 130px; /* Jarak dari bawah */
    right: 30px; /* Jarak dari kanan */
    z-index: 9998; /* Memastikan elemen berada di atas elemen lain */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; /* Mengatur item agar tersusun vertikal (menu di atas tombol) */
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; /* Menyelaraskan item ke kanan */
}

/* Tombol utama register */
.register-button {
    background-color: #007bff; /* Warna hijau register */
    color: white;
    width: 60px; /* Ukuran tombol */
    height: 60px;
    border-radius: 50%; /* Membuat tombol bulat */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 30px; /* Ukuran ikon register */
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efek bayangan */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efek bayangan */
    cursor: pointer; /* Mengubah kursor menjadi pointer saat di-hover */
    -webkit-transition: -webkit-transform 0.3s ease-in-out; /* Safari */
    transition: transform 0.3s ease-in-out; /* Transisi untuk efek hover */
}

.register-button:hover {
    -webkit-transform: scale(1.05); /* Safari */
    transform: scale(1.05); /* Sedikit membesar saat di-hover */
    background-color: #0069d8;
}

/* Tooltip container */
.register-button .tooltip-text {
    visibility: hidden;
    width: max-content;
    max-width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    font-size: 0.875rem;
    padding: 6px 10px;
    border-radius: 4px;

    position: absolute;
    bottom: 125%; /* Di atas tombol */
    left: 50%;
    transform: translateX(-50%);

    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    white-space: nowrap;
}

/* Tooltip arrow */
.register-button .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Di bawah tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */
.register-button:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Animasi untuk menu */
@-webkit-keyframes slideUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* Setiap item di dalam menu opsi */
.whatsapp-options .option-item {
    padding: 12px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; /* Label dan kontak tersusun vertikal */
    cursor: pointer; /* Kursor pointer */
    -webkit-transition: background-color 0.2s ease; /* Safari */
    transition: background-color 0.2s ease; /* Transisi hover */
    border-bottom: 1px solid #eee; /* Garis pemisah antar item */
}

.whatsapp-options .option-item:last-child {
    border-bottom: none; /* Hapus garis di item terakhir */
}

.whatsapp-options .option-item:hover {
    background-color: #f0f0f0; /* Latar belakang abu-abu muda saat di-hover */
}

.whatsapp-options .option-label {
    font-weight: bold;
    color: #333;
    margin-bottom: 3px;
}

.whatsapp-options .option-contact {
    font-size: 0.9em;
    color: #555;
}

/* Responsif untuk layar lebih kecil */
@media (max-width: 768px) {
    .floating-whatsapp-container {
        bottom: 60px;
        right: 30px;
    }

    .whatsapp-button {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }

    .whatsapp-options {
        width: 220px;
    }

    .floating-register-container {
        bottom: 120px;
        right: 30px;
    }

    .register-button {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}