/**
* Template Name: BizLand
* Updated: May 30 2023 with Bootstrap v5.3.0
* Template URL: https://bootstrapmade.com/bizland-bootstrap-business-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

body {
    justify-content: center;
    /* font-family: "Open Sans", sans-serif; */
    color: #444444;
}

a {
    color: #106eea;
    text-decoration: none;
}

a:hover {
    color: #3b8af2;
    text-decoration: none;
}

/* h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto", sans-serif;
} */

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #106eea;
    border-top-color: #e2eefd;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #106eea;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.back-to-top i {
    font-size: 28px;
    color: #fff;
    line-height: 0;
}

.back-to-top:hover {
    background: #3284f1;
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
    background: #ffffff;
    height: 60px;
    font-size: 14px;
    transition: all 0.5s;
    color: #fff;
    padding: 0;
}

#topbar .logo {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 30%;
    height: 30%;
    max-height: 180px;
    line-height: 1;
    letter-spacing: 0.8px;
}

#topbar .logo a {
    color: #222222;
}

#topbar .logo a span {
    color: #106eea;
}

#topbar .logo img {
    max-height: 40px;
}

#topbar .contact-info i {
    font-style: normal;
    color: #fff;
}

#topbar .contact-info i a,
#topbar .contact-info i span {
    padding-left: 5px;
    color: #fff;
}

#topbar .contact-info i a {
    line-height: 0;
    transition: 0.3s;
    transition: 0.3s;
}

#topbar .contact-info i a:hover {
    color: #fff;
    text-decoration: underline;
}

#topbar .social-links a {
    color: rgb(255, 253, 253);
    line-height: 0;
    transition: 0.3s;
    margin-left: 20px;
}

#topbar .social-links a:hover {
    color: white;
}

/* -----------header kecil------------ */

#marquee-container {
    background-color: #09326f;
    z-index: 3;
    color: #fff;
    padding: 2px 0;
    font-size: 13px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#marquee-container .stop {
    margin-top: 8px;
    width: 7%;
    height: 35px;
    position: absolute;
    left: 0;
    background-color: #09326f;
    z-index: 1;
}

#marquee-container .stop .ok {
    margin-left: 15px;
    /* margin-top: -4.5px; */
    margin-top: 2.8px;
    height: 25px;
    position: absolute;
    left: 20px;
    background-color: #ffffff;
    border-radius: 50px;
    /* margin-left: 10px; */
    z-index: 3;
}

#marquee-container .stop .stopp {
    /* font-weight: bold; */
    font-size: 14px;
    color: #000000;
    margin-top: 2px;
    margin-left: 15px;
    margin-right: 15px;
    color: #09326f;
}

#marquee {
    font-family: "Poppins";
    margin-top: 7px;
    height: 35px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    animation: marquee-scroll 500s linear infinite;
}

#marquee ul {
    /* list-style: none; Menghapus tanda bulleted default pada <ul> */
    display: flex;
    /* Menggunakan flexbox untuk tata letak horizontal */
    padding: 0;
    /* Menghapus padding default pada <ul> */
    margin: 0;
    margin-top: 6px;
    position: center;
    /* Menghapus margin default pada <ul> */
}

#marquee li {
    /* display: flex; Menggunakan flexbox untuk mengatur elemen <li> dalam satu baris */
    align-items: center;
    /* Mengatur vertikal tengah untuk teks dan titik */
    margin: 0;
    /* Menghapus margin default pada <li> */
    margin-right: 30px;
}

#marquee li::before {
    /* content: "·"; Menggunakan tanda titik samping sebagai konten */
    /* font-size: 24px; Mengatur ukuran font titik samping */
    margin-right: 20px;
    /* Menambahkan jarak antara titik dan teks */
}

@media (max-width: 768px) {
    #marquee-container .stop {
        width: 20%;
        /* Add your responsive styles for smartphones here */
        font-size: 10px;
        /* Example: Decrease font size for smaller screens */
        padding: 3px 0;
        /* Example: Adjust padding for smaller screens */
    }

    #marquee {
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        animation: marquee-scroll 20s linear infinite;
    }
}

/* @keyframes marquee-scroll {
0% {
  transform: translateX(100%);
}
100% {
  transform: translateX(-100%);
}
} */

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    background: #fff;
    transition: all 0.5s;
    z-index: 997;
    height: 60px;
    /* box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); */
}

#header.fixed-top {
    height: 50px;
}

.scrolled-offset {
    margin-top: 70px;
    /* margin-bottom: -100%; */
}

.login-button .login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    /* Warna latar belakang biru (contoh: #007bff) */
    color: #fff !important;
    /* Warna teks tulisan putih */
    /* padding: 10px 20px; */
    border-radius: 30px;
    text-decoration: none;
    cursor: pointer;
    min-width: 100px;
    /* Atur lebar minimal tombol */
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    /* Mengubah teks menjadi huruf besar */
    text-align: center;
    transition: background-color 0.3s ease;
    /* Efek transisi saat tombol di-hover */
    border: none;
    /* Hapus garis pinggir tombol */

    padding-top: 10px;
}

.login-button a {
    color: #000000 !important;
}

.login-button .login-btn:hover {
    background-color: #ffffff;
    /* Warna biru saat tombol di-hover (contoh: #0056b3) */
}

.login-button .login-btn:active {
    background-color: #ffffff;
    /* Warna biru saat tombol di-klik (contoh: #003a80) */
}

/* Gaya saat tombol login dalam keadaan aktif (tertekan) */
.login-button .login-btn:focus {
    outline: none;
    /* Hilangkan focus outline pada tombol yang aktif */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff;
    /* Tambahkan efek bayangan pada tombol aktif */
}

/* Gaya saat tombol login di-disabled */
.login-button .login-btn:disabled {
    background-color: #c0c0c0;
    /* Warna latar belakang abu-abu ketika tombol disabled */
    cursor: not-allowed;
    /* Ubah kursor menjadi not-allowed saat tombol disabled */
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
    padding: 0;
}

.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}

.navbar li {
    position: relative;
}

.navbar > ul > li {
    white-space: nowrap;
    padding: 10px 0 20px 8px;
    /* z-index: 9999; */
}

.navbar a,
.navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13.2px;
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
}

.navbar a i,
.navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
}

.navbar > ul > li > a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: #106eea;
    visibility: hidden;
    width: 0px;

    transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before,
.navbar li:hover > a:before,
.navbar .active:before {
    visibility: visible;
    width: 100%;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
    color: #106eea;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 28px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 19px 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
}

.navbar .dropdown ul li {
    min-width: 200px;
}

.navbar .dropdown ul a {
    padding: 10px 20px;
    font-weight: 400;
}

.navbar .dropdown ul a i {
    font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
    color: #106eea;
}

.navbar .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.navbar .dropdown .dropdown ul {
    top: 0;

    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}

@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }

    .navbar .dropdown .dropdown:hover > ul {
        left: -100%;
    }
}

/**
* Mobile Navigation
*/
.mobile-nav-toggle {
    color: #222222;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
    color: #fff;
}

@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none;
    }
}

.navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(9, 9, 9, 0.9);
    transition: 0.3s;
    z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
}

.navbar-mobile ul {
    display: block;
    position: absolute;
    top: 55px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    padding: 10px 0;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: #222222;
}

.navbar-mobile > ul > li {
    padding: 0;
}

.navbar-mobile a:hover:before,
.navbar-mobile li:hover > a:before,
.navbar-mobile .active:before {
    visibility: hidden;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
    color: #106eea;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
    margin: 15px;
}

.navbar-mobile .dropdown ul {
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
    min-width: 200px;
}

.navbar-mobile .dropdown ul a {
    padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
    font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
    color: #106eea;
}

.navbar-mobile .dropdown > .dropdown-active {
    display: block;
}

/*--------------------------------------------------------------
# Hero box

--------------------------------------------------------------*/
#hero {
    /* width: 100%;
height: 100%; */
    background: url("../img/bg/dekstop1.png");
    background-size: cover;
    position: relative;
}

#hero:before {
    content: "";
    /* background: rgba(255, 255, 255, 0.6); */
    position: relative;
    bottom: 0;
    /* top: 0; */
    left: 0;
    right: 0;
}

/* #hero .container {
position: relative;
} */
#hero .container h2 {
    color: #fff;
    margin-top: 20px;
    width: 550px;
    text-shadow: 0px 5.178691864013672px 5.178691864013672px rgba(0, 0, 0, 0.25);
    font-family: Inter;
    font-size: 33.404px;
    font-style: normal;
    /* font-weight: 500; */
    line-height: 100%; /* 33.404px */
    letter-spacing: -1.67px;
}

/* #hero2 {

} */

/* #hero2 .container {
text-align: center;
} */

#hero3 .container .judultiga h3 {
    color: #000;
    font-family: Montserrat;
    font-size: 70px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    letter-spacing: -4px;
    margin-top: 12px;
    margin-left: 505px;
}

#hero3 .container p {
    color: #3c3c3c;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    /* margin-top: 25px; */
    margin-left: 505px;
}

.custom-card {
    width: 100%; /* Adjust the width as needed */
    max-width: 300px; /* Set a maximum width if necessary */
    margin: auto;
}

/* brouser */
.my-element {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#hero2 .container .juduldua h3 {
    color: #000;
    font-family: Montserrat;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    letter-spacing: -4px;
    margin-top: 12px;
}

#hero2 .container p {
    color: #3c3c3c;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    margin-top: -500px;
    font-weight: 500;
    line-height: normal;
}

#hero3 .container .juduldua h3 {
    color: #000;
    font-family: Montserrat;
    font-size: 70px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    letter-spacing: -4px;
    margin-top: 20px;
}

#hero3 .container p {
    color: #3c3c3c;
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#heroa .container .judulawal {
    /* width: 40%; */
    margin-top: 10px;
}

#hero .container .judulawal {
    /* width: 40%; */
    margin-top: 10px;
}

#hero .btn-get-awaaal {
    color: #fff;
    font-family: "Manrope";
    font-size: 40.695px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 26.104px 26.104px 26.104px 0px;
    background: #09326f;
    letter-spacing: 1.5px;
    margin-top: -30px;
    backdrop-filter: blur(16.369382858276367px);
    background-size: cover;
    width: 666;
    height: 89.8;
    background-color: transparent;
    /* text-transform: uppercase; */
    /* font-weight: 700;
font-size: 20px;
letter-spacing: 1px;
display: inline-block; */
    padding: 14px 15px;
    border-radius: 26.104px 26.104px 26.104px 0px;
    background: #09326f;
    backdrop-filter: blur(16.369382858276367px);
    margin-left: -10px;
    /* transition: 0.5s; */
    color: #ffffff;
    /* text-shadow: 2px 2px 4px rgba(131, 131, 131, 0.5); */
    /* margin-left: 5%; */
    /* margin-right: auto;   */
    /* background-color: #2B65EC; */
}

#hero .container .judulawal h3 {
    font-family: "Rosa Sans", sans-serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;

    /* font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 31.4px; */
}

#hero .container .judulkedua {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-top: 20px;
    color: #fff;
}

#hero .container .judulkedua h3 {
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Manrope";
    font-size: 68.277px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    /* 88.277px */
    letter-spacing: -0.414px;
}

#hero .container .judulkedua p {
    width: 865px;
    color: #fff;

    text-shadow: 0px 5.178691864013672px 5.178691864013672px rgba(0, 0, 0, 0.25);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    /* font-weight: 500; */
    line-height: 110%; /* 36.3px */
}

#hero .container .inijudulbso {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-top: 20px;
    color: #fff;
}

#hero .container .inijudulbso h3 {
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Manrope";
    font-size: 50px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -0.414px;
}

#hero .container .inijudulbso p {
    width: 865px;
    color: #fff;

    text-shadow: 0px 5.178691864013672px 5.178691864013672px rgba(0, 0, 0, 0.25);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    /* font-weight: 500; */
    line-height: 110%; /* 36.3px */
}

#hero .container .judulketiga {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-top: 20px;
}

#hero .container .judulketiga h3 {
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Manrope";
    font-size: 55px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%;

    /* 88.277px */
    letter-spacing: -0.414px;
}

#hero h1 {
    margin: 0;
    font-family: "Manrope";
    font-size: 30px;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 31.4px;
    /* top: 100%; */
    /* font-size: 33px; */
    /* font-weight: 400px; */
    /* line-height: 40px; */
    /* font-size: 36px; */
    color: rgb(0, 0, 51);
    text-shadow: 1px 1px 2px #0ebce3;
    /* margin-top:-250px; */
    /* color: #ffffff; */
}

#hero h1 span {
    color: #106eea;
}

#hero h2 {
    color: rgb(255, 255, 255);
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
    /* margin: 5px 0 30px 0;
font-size: 20px;
font-weight: 500; */

    font-family: "inter";
    font-size: 25px;
    /* font-style: normal;
 font-variant: normal;
 font-weight: 400;
 line-height: 25px; */
}

#hero h3 {
    color: rgb(0, 0, 0);
    /* background-color: #000000; */
    font-family: "Manrope";
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 25px;
    overflow: hidden;
    margin: 0;
}

#hero .btn-get-started {
    margin-top: 20px;
    color: #fff;
    font-family: "Manrope";
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    padding: 14px 40px;
    border-radius: 23.203px 23.203px 23.203px 0px;
    background: #09326f;
}

#hero .btn-get-startedd {
    margin-top: 20px;
    color: #fff;
    font-family: "Manrope";
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    padding: 14px 40px;
    border-radius: 23.203px 23.203px 23.203px 0px;
    background: #09326f;
}

#hero .btn-get-started:hover {
    background: #000000;
    color: #ffffff;
}

#hero .btn-watch-video {
    font-size: 16px;
    transition: 0.5s;
    margin-left: 25px;
    color: #222222;
    font-weight: 600;
    display: flex;
    align-items: center;
}

#hero .btn-watch-video i {
    color: #106eea;
    font-size: 32px;
    transition: 0.3s;
    line-height: 0;
    margin-right: 8px;
}

#hero .btn-watch-video:hover {
    color: #106eea;
}

#hero .btn-watch-video:hover i {
    color: #3b8af2;
}

@media (min-width: 1024px) {
    #hero {
        background-attachment: fixed;
    }
}

@media (max-width: 768px) {
    #hero {
        height: 100vh;
    }

    #hero h1 {
        font-size: 28px;
        line-height: 36px;
    }

    #hero h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
    }

    #hero .btn-get-started,
    #hero .btn-watch-video {
        font-size: 13px;
    }
}

@media (max-height: 500px) {
    #hero {
        height: 120vh;
    }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
    padding: 60px 0;
    overflow: hidden;
}

.section-bg {
    /* background-color: #f6f9fe; */

    background: url(assets/img/bg/bso1.png);
}

.section-title {
    text-align: center;
    padding-bottom: 0px;
}

.section-title h2 {
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 8px 20px;
    margin: 0;
    background: #e7f1fd;
    color: #106eea;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 50px;
}

.section-title h3 {
    margin: 15px 0 0 0;
    font-size: 28px;
    font-weight: 700;
}

.section-title h3 span {
    color: #106eea;
}

.section-title p {
    margin: 15px auto 0 auto;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .section-title p {
        width: 50%;
    }
}

.section-titlee {
    text-align: center;
    padding-bottom: 30px;
}

.section-titlee h2 {
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 8px 20px;
    margin: 0;
    background: #e7f1fd;
    color: #106eea;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 50px;
}

.section-titlee h3 {
    margin: 15px 0 0 0;
    font-size: 32px;
    font-weight: 700;
}

.section-titlee h3 span {
    color: #106eea;
}

.section-titlee p {
    margin: 15px auto 0 auto;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .section-titlee p {
        width: 50%;
    }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
    padding: 20px 0;
    background-color: #f1f6fe;
    min-height: 40px;
}

.breadcrumbs h2 {
    font-size: 24px;
    font-weight: 300;
    margin: 0;
}

.bsa {
    color: #fff;
    text-align: center;
    font-family: Montserrat;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 100px */
}

@media (max-width: 992px) {
    .breadcrumbs h2 {
        margin: 0 0 10px 0;
    }
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.breadcrumbs ol li + li {
    padding-left: 10px;
}

.breadcrumbs ol li + li::before {
    display: inline-block;
    padding-right: 10px;
    color: #6c757d;
    content: "/";
}

@media (max-width: 768px) {
    .breadcrumbs .d-flex {
        display: block !important;
    }

    .breadcrumbs ol {
        display: block;
    }

    .breadcrumbs ol li {
        display: inline-block;
    }
}

/*--------------------------------------------------------------
# Featured Services
--------------------------------------------------------------*/
.featured-services {
    margin-top: -50px;
    /* padding: 30px; */
    /*
position: relative;
overflow: hidden;
background: #fff;
box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
transition: all 0.3s ease-in-out;
border-radius: 8px;
z-index: 1; */
}

.featured-services .icon-box {
    /* padding: 30px; */
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    border-radius: 14px;
    /* box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12); */
    /* height: 270px; */
    width: 218px;
    height: 310px;
    /* border-radius: 8px; */
    z-index: 1;
}

/* .featured-services .featured {

margin-right:30px;
width: 100px;
} */

/* .featured-services .icon-box:hover::before {
background: #106eea;
top: 0;
border-radius: 0px;
} */


.featured-services .icon i {
    font-size: 48px;
    line-height: 1;
    color: #106eea;
    transition: all 0.3s ease-in-out;
}

.featured-services .title {
    padding: 5px;
    font-weight: 700;
    margin-bottom: 25px;
    font-size: 18px;
    font-family: "Manrope";
    font-weight: 700;
    margin-top: -5px;
}

.featured-services .title a {
    color: #111;
}

.featured-services .description {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 0;
    font-family: "Manrope";
    font-weight: 500;
}

.featured-services .icon-box img {
    max-width: 100%;
    margin-top: -130px;
}

.featured-services .icon-box .label {
    text-align: center;
    background-color: #106eea;
    color: #fff;
    padding: 5px 15px;
    border-radius: 50px;
    margin-bottom: 10px;
    display: inline-block;
}

.featured-services .icon-box .label-text {
    font-size: 14px;
    font-weight: bold;
    margin-top: -20px;
}

.featured-services .icon-box .labels {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #106eea; */
    color: #fff;
    padding: 5px 15px;
    /* border-radius: 50px; */
    border-radius: 29px 1px 66px 29px;
    background: #e62a36;
    margin-bottom: 10px;
    display: inline-block;
}

.featured-services .icon-box .labels-text {
    /* font-size: 14px;
font-weight: bold; */
    color: #fff;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 3000;
    line-height: normal;
    width: 186px;
}

/* .featured-services .icon-box:hover .title a,
.featured-services .icon-box:hover .description {
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 550;
} */

.featured-services .icon-box:hover .icon i {
    color: #fff;
}

/* Responsive CSS for smaller screens */

@media (max-width: 768px) {
    .featured-services {
        margin-top: -15%;
        /* Adjust margin-top for smaller screens */
    }

    .featured-services .icon-box {
        padding: 30px;
        /* Maintain padding for larger touch targets */
    }

    .featured-services .icon-box::before {
        content: "";
        /* Remove the background overlay for simplicity */
    }

    .featured-services .icon i {
        font-size: 48px;
        /* Keep the icon size */
    }

    .featured-services .title {
        font-size: 18px;
        /* Maintain title font size */
    }

    .featured-services .description {
        font-size: 15px;
        /* Keep description font size */
        line-height: 28px;
        /* Maintain line height for readability */
    }
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h3 {
    font-weight: 600;
    font-size: 26px;
}

.about .content ul {
    list-style: none;
    padding: 0;
}

.about .content ul li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
}

.about .content ul li:first-child {
    margin-top: 35px;
}

.about .content ul i {
    background: #fff;
    box-shadow: 0px 6px 15px rgba(16, 110, 234, 0.12);
    font-size: 24px;
    padding: 20px;
    margin-right: 15px;
    color: #106eea;
    border-radius: 50px;
}

.about .content ul h5 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 31.4px;
    /* font-size: 18px; */
    text-shadow: 1px 1px 2px #000000;
    color: #555555;
}

.about .content ul p {
    /* font-size: 15px; */
    font-family: "Cambria", Georgia, serif;
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 25px;
    text-shadow: 1px 1px 2px #000000;
}

.about .content p:last-child {
    margin-bottom: 0;
}

.heada {
    background-color: #106eea;
    font-size: 24px;
    color: #fff;
    margin-top: -35px;
    height: 160px;
}

.heada .section-title {
    margin-top: -10px;
}

/* -------------------------------------------------------------
#foto
-----------------------------------------------------------------*/

/* .foto .custom-body {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
background-color: #f0f0f0;
} */
/* Default styles for larger screens */
.foto .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.foto .row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0;
}

.foto .boxz {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: calc(50% - 10px);
    overflow: hidden;
}

.foto .boxz .content {
    display: flex;
    align-items: center;
}

.foto .boxz img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    padding: 10px;
}

.foto .text {
    padding: 10px;
}

.foto h2 {
    margin: 0;
    font-size: 18px;
}

.foto p {
    margin: 8px 0;
    font-size: 14px;
}

/* Media query for screens between 768px and 1200px (tablet-sized screens) */
@media (min-width: 768px) and (max-width: 1200px) {
    .foto .boxz {
        width: calc(50% - 10px);
        margin-right: 10px;
        /* Add margin to create space between columns */
    }
}

/* Media query for screens smaller than 768px (typical mobile devices) */
/* Media query for screens smaller than 768px (typical mobile devices) */
/* Media query for screens smaller than 768px (typical mobile devices) */
@media (max-width: 768px) {
    .foto .row {
        display: flex;
        margin: 10px 0;
    }

    .foto .boxz {
        width: 100%;
        margin: 10px 0;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .foto .boxz .content {
        display: flex;
        flex-direction: column;
        /* Stack image and text vertically on mobile */
        /* align-items: center; */
    }

    .foto .boxz img {
        width: 150px;
        height: 150px;
        object-fit: cover;
        padding: 10px;
    }

    .foto .text {
        text-align: left;
        /* Align text to the left */
        padding: 0px;
        margin-left: -15px;
    }

    .foto h2 {
        /* margin: 8px 0; */
        font-size: 15px;
        /* Reduce heading font size */
    }

    .foto p {
        margin: 0;
        font-size: 10px;
        /* Reduce paragraph font size */
    }

    /* Set 50% width for .boxz in all rows */
    .foto .row .boxz {
        width: 50%;
    }
}

/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
.skills .progress {
    height: 60px;
    display: block;
    background: none;
    border-radius: 0;
}

.skills .progress .skill {
    padding: 0;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    display: block;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: #222222;
}

.skills .progress .skill .val {
    float: right;
    font-style: normal;
}

.skills .progress-bar-wrap {
    background: #e2eefd;
    height: 10px;
}

.skills .progress-bar {
    width: 1px;
    height: 10px;
    transition: 0.9s;
    background-color: #106eea;
}

/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
    position: absolute;
    /* text-align: center; */
    display: flex;
    align-items: center;
    z-index: 999;
    /* Atur z-index lebih tinggi dari elemen #popup */
    border-radius: 23.292px;

    background: rgba(255, 255, 255, 0.925);

    backdrop-filter: blur(12.5px);
    /* margin: 10px; Jarak dari tepi halaman */
    margin-top: 30px;
    /* Jarak dari tepi halaman */
    /* Sesuaikan tinggi dan lebar sesuai kebutuhan */
    height: 80px;
    /* width: 200px; */
    /* Atur posisi sesuai kebutuhan */
    /* top: 65%; */
    left: 0;
    /* Tambahkan efek bayangan jika diinginkan */
    box-shadow: 0px 0px 5px 2px rgba(10, 10, 10, 0.1);
}

.count-separator {
    width: 1px;
    /* Lebar garis vertikal */
    background-color: rgba(0, 0, 0, 0.3);
    /* Warna garis vertikal */
    margin: 0 0px;
    /* Jarak antara garis vertikal dan teks */
    margin-top: 7px;
    /* Jarak antara garis vertikal dan teks */
    height: 55px;
    /* Sesuaikan dengan tinggi teks jika diperlukan */
}

/* .counts .container { */

/* padding: 20px; Padding pada container agar kontennya tidak terlalu dekat dengan tepi kotak */
/* } */

.count-boxes {
    display: flex;

    /* gap: 20px; Jarak antara elemen .count-box */
}

.count-box {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    /* Ganti dengan warna latar yang diinginkan */
    /* border: 2px solid; Ganti dengan warna border yang diinginkan */
    border-radius: 50px;
    /* padding: 20px; */
    /* margin-right: 50px; */
    width: 250px;
}

.left-content,
.right-content {
    flex: 2;
    color: #000;
    /* text-align: center; */
    /* padding: 0 0px8; */
    /* Tambahkan padding di sini untuk memberi jarak antara kiri dan kanan */
}

.left-content {
    color: #141414;
    /* font-family: 'Manrope'; */
    font-size: 50.672px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    /* 43.672px */
    letter-spacing: -2.184px;
    margin-top: -20px;
}

.right-content p {
    /* color: #1E1E1E;
font-family: "Inter"; */
    /* font-size: 40.419px; */
    width: 130px;
    color: #000;
    /* margin-left: 50px; */
    /* font-style: 'normal'; */
    /* font-weight: 100; */
    /* line-height: 100%;  */
    /* letter-spacing: -1px; */
    /* text-align: center; */
    /* padding: 0 0px; */
    /* Tambahkan padding di sini untuk memberi jarak antara kiri dan kanan */
    margin-top: 5px;
}

.count-box span {
    /* font-size: 36px; */
    /* font-weight: 1000; */
    /* color: #062b5b; */
    /* display: block;   */

    color: #141414;
    font-family: "Rosa Sans", sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 1000;
    line-height: 100%;
    /* 43.672px */
    letter-spacing: -1.584px;
    /* Atur ketebalan teks jika perlu */
    margin-left: -20px;
    margin-top: -50px;
    /* margin-bottom:50px ; */
    /* margin-right:1px ; */
}

.count-box p {
    /* padding: 0;
margin: 0; */
    text-align: left;
    /* font-family: "Cambria", serif; */
    /* font-size: 14px; */
    color: #1e1e1e;
    font-family: "Inter";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 24.419px */
    /* letter-spacing: -1.221px; */
    /* 24.419px */
    /* letter-spacing: -1.221px; */
    margin-left: -10px;
    margin-bottom: -5px;
    /* margin-left: -20px; */
    /* margin-right:1px ; */
}

/*--------------------------------------------------------------
# Counts judul
--------------------------------------------------------------*/
.countsj {
    padding: 70px 0 60px;
}

.countsj .countt-box {
    padding: 30px 30px 25px 30px;
    width: 100%;
    position: relative;
    text-align: center;
    background: #d8d7d7;
}

.tsj .countt-box i {
    position: absolute;
    top: -55ypx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    background: #ffffff;
    color: #fff;
    width: 56px;
    height: 56px;
    line-height: 0;
    border-radius: 50px;
    border: 5px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.countsj .countt-box span {
    font-size: 36px;
    display: block;
    font-weight: 600;
    color: #062b5b;
}

.countsj .countt-box p {
    padding: 0;
    margin: 0;
    font-family: "Manrope";
    font-size: 14px;
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
    padding: 15px 0;
    text-align: center;
}

.clients img {
    max-width: 45%;
    transition: all 0.4s ease-in-out;
    display: inline-block;
    padding: 15px 0;
}

.clients img:hover {
    transform: scale(1.15);
}

@media (max-width: 768px) {
    .clients img {
        max-width: 40%;
    }
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/

.services .icon-box {
    flex: 1;
    /* Add this line to make the icon boxes take up the full width */
    text-align: center;
    border: 1px solid #e2eefd;
    padding: 80px 20px;
    transition: all ease-in-out 0.3s;
    background: #fff;
}

.services .icon-box .icon {
    margin: 0 auto;
    width: 64px;
    height: 64px;
    background: #f1f6fe;
    border-radius: 4px;
    border: 1px solid #deebfd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: ease-in-out 0.3s;
}

.services .icon-box .icon i {
    color: #3b8af2;
    font-size: 28px;
    transition: ease-in-out 0.3s;
}

.services .icon-box h4 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 24px;
}

.services .icon-box h4 a {
    color: #222222;
    transition: ease-in-out 0.3s;
}

.services .icon-box p {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.services .icon-box:hover {
    border-color: #fff;
    box-shadow: 0px 0 25px 0 rgba(16, 110, 234, 0.1);
}

.services .icon-box:hover h4 a,
.services .icon-box:hover .icon i {
    color: #106eea;
}

.services .icon-box:hover .icon {
    border-color: #106eea;
}

/* Add this media query to adjust the styles for smaller screens */
@media (max-width: 768px) {
    .services .icon-box {
        width: 100%;
        /* Set lebar menjadi 100% untuk satu baris dua elemen */
    }

    .services .icon-box .icon {
        width: 48px;
        /* Decrease icon size */
        height: 48px;
    }

    .services .icon-box h4 {
        font-size: 20px;
        /* Reduce font size for headings */
    }
}

/* Add this media query to adjust the styles for even smaller screens like mobile phones */
@media (max-width: 576px) {
    .services .icon-box {
        padding: 30px 10px;
        /* Further reduce padding for smaller screens */
    }

    .services .icon-box .icon {
        width: 36px;
        /* Further decrease icon size */
        height: 36px;
    }

    .services .icon-box h4 {
        font-size: 18px;
        /* Further reduce font size for headings */
    }
}

/* Add this media query to make the services section full-width on small screens */
@media (max-width: 576px) {
    .services .container {
        padding: 0;
        /* Remove container padding */
    }

    .services .row {
        flex-direction: column;
        /* Stack columns vertically */
    }

    .services .col-lg-4 {
        width: 100%;
        /* Make columns full-width on small screens */
    }
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials {
    /* padding: 80px 0; */
    /* background: rgba(255, 255, 255, 0.7); */

    background-position: center;
    background-size: cover;
    /* font-family: 'manrope'; */
    position: relative;
}

.testimonials::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* background: rgba(255, 255, 255, 0.7); */
}

#testimonials .centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    /* Sesuaikan dengan tinggi slide Anda */
}

#testimonials .centered-ktk {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* Sesuaikan dengan tinggi slide Anda */
}

#testimonials .team-member {
    text-align: center;
}

#testimonials.name {
    font-size: 24px;
    /* Sesuaikan ukuran font nama */
    color: #fff;
    text-align: center;
    font-family: "Manrope";
    /* font-size: 27px; */
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    /* font-size: 32.721px; */
    /*   font-style: bold;
font-weight: 1000;
line-height: bold; */
}

#testimonials.position {
    font-size: 18px;
    /* Sesuaikan ukuran font jurusan */
    color: #fff;
    font-family: "Manrope";
    /* font-size: 21.858px; */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 10px;
}

#testimonials .line {
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: 2px dashed #ffffff;
    /* Menggunakan garis putus-putus */
    /* margin: 5px 0; Jarak atas dan bawah dari garis */
}

#gariss {
    text-align: center;
}

#testimonials .achievement {
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
    margin: 10px;
    /* padding: 0.5; */
}

#testimonials ul {
    list-style-type: none;
    padding: 0;
    text-align: left;
    /* Align the text to the left */
    margin: 0;
    max-width: 293px;
    /* Atur lebar maksimum sesuai keinginan Anda */
}

#testimonials li {
    word-wrap: break-word;
    margin-bottom: 5px;
    color: #fff;

    font-family: "Manrope";
    /* font-size: 18.266px; */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#testimonials .achievement {
    font-weight: bold;
    color: #fff;
    font-family: "Manrope";
    font-size: 18.266px;
    /* font-style: normal; */
    font-weight: 800;
    line-height: normal;
    margin-bottom: 5px;
    /* text-align: left; Remove this line to keep the text centered */
    margin: 10px;
}

#testimonials ul li {
    position: relative;
    /* Position relative to allow absolute positioning of the checkmark image */
    padding-left: 35px;
    /* Add left padding for the checkmark image */
    margin-bottom: 5px;
}

#testimonials ul li::before {
    content: "";
    /* Empty content for pseudo-element */
    width: 16px;
    /* Adjust the width and height as needed for your checkmark image */
    height: 16px;
    background: url("../img/bg/centang3.png") no-repeat;
    /* Use the checkmark image as a background */
    background-size: contain;
    /* Ensure the image fits in the space */
    display: inline-block;
    position: absolute;
    /* Position the checkmark absolutely */
    left: 0;
    /* Adjust the position as needed */
    top: 50%;
    /* Center vertically */
    transform: translateY(-50%);
    /* Center vertically */
    margin-right: 20px;
    /* Add some margin between the checkmark and text */
    margin-left: 10px;
}

#testimonials .member-info {
    border-radius: 33px;
    width: 318px;
    height: 355px;
    flex-shrink: 0;
    background: transparent;
    /* background-image: url("../img/bg/mentor1.png"); */
    background-size: cover;
    /* border-bottom: 1px solid #007bff; Warna dan jenis garis di bawah */
    padding: 0px;
    margin: 3px;
    /* Jarak antara isi dan batas luar */
    position: relative;
    /* border-radius: 10px; */
}

#testimonials .member-img {
    /* margin-bottom: -30px; */

    margin-left: 30px;
    z-index: -99;
    width: 100%;
    height: 240px;
    flex-shrink: 0;
}

/*                     */

.testimonials .section-header {
    margin-bottom: 40px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
    overflow: hidden;
}

.testimonials .testimonial-item {
    text-align: center;
    color: #fff;
}

.testimonials .testimonial-item .testimonial-img {
    width: 100px;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, 0.15);
    margin: 0 auto;
}

.testimonials .testimonial-item h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #fff;
}

.testimonials .testimonial-item h4 {
    font-size: 14px;
    color: #ddd;
    margin: 0 0 15px 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
    color: rgba(255, 255, 255, 0.4);
    font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
}

.testimonials .testimonial-item p {
    font-style: italic;
    margin: 0 auto 15px auto;
    color: #eee;
}

.testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #106eea;
}

@media (min-width: 992px) {
    .testimonials .testimonial-item p {
        width: 80%;
    }
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
    padding: 0;
    margin: 0 auto 15px auto;
    list-style: none;
    text-align: center;
    border-radius: 50px;
    padding: 2px 15px;
}

.portfolio #portfolio-flters li {
    cursor: pointer;
    display: inline-block;
    padding: 10px 15px 8px 15px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: #444444;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
    color: #106eea;
}

.portfolio #portfolio-flters li:last-child {
    margin-right: 0;
}

.portfolio .portfolio-item {
    margin-bottom: 30px;
}

.portfolio .portfolio-item .portfolio-info {
    opacity: 0;
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 0;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    color: #222222;
}

.portfolio .portfolio-item .portfolio-info p {
    color: #555555;
    font-size: 14px;
    margin-bottom: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
    position: absolute;
    right: 40px;
    font-size: 24px;
    top: calc(50% - 18px);
    color: #3c3c3c;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
    color: #106eea;
}

.portfolio .portfolio-item .portfolio-info .details-link {
    right: 10px;
}

.portfolio .portfolio-item .portfolio-links {
    opacity: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
    position: absolute;
    transition: all ease-in-out 0.3s;
}

.portfolio .portfolio-item .portfolio-links a {
    color: #fff;
    margin: 0 2px;
    font-size: 28px;
    display: inline-block;
    transition: 0.3s;
}

.portfolio .portfolio-item .portfolio-links a:hover {
    color: #6ba7f5;
}

.portfolio .portfolio-item:hover .portfolio-info {
    opacity: 1;
    bottom: 20px;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
    padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
    width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.portfolio-details
    .portfolio-details-slider
    .swiper-pagination
    .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #106eea;
}

.portfolio-details
    .portfolio-details-slider
    .swiper-pagination
    .swiper-pagination-bullet-active {
    background-color: #106eea;
}

.portfolio-details .portfolio-info {
    padding: 30px;
    box-shadow: 0px 0 30px rgba(34, 34, 34, 0.08);
}

.portfolio-details .portfolio-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
    margin-top: 10px;
}

.portfolio-details .portfolio-description {
    padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
    padding: 0;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/

.team-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.team-wrapper {
    display: inline-block;
}

.team-member {
    width: 300px;
    /* Atur lebar sesuai kebutuhan */
    margin-right: 20px;
    /* Atur jarak antara kartu anggota */
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    /* Mengatur konten dalam kartu agar dapat mengatur wrap dengan baik */
    /* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); */
    /* ... tambahkan gaya lainnya sesuai kebutuhan */
}

.team {
    padding: 60px 0;
}

.team .member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: transparent;
    /* Latar belakang untuk teks */
    /* border: 1px solid #e0e0e0; */
}

.team .member .member-img {
    /* width: 260px; */
    height: auto;
    border-radius: 50%;
    /* Jika diperlukan, ubah sesuai kebutuhan Anda */
    background-color: transparent;
    /* Latar belakang gambar tetap transparan */
}

.team .member .social {
    position: absolute;
    left: 0;
    bottom: 30px;
    right: 0;
    opacity: 0;
    transition: ease-in-out 0.3s;
    text-align: center;
}

.team .member .social a {
    transition: color 0.3s;
    color: #222222;
    margin: 0 3px;
    padding-top: 7px;
    border-radius: 4px;
    width: 36px;
    height: 36px;
    background: rgba(16, 110, 234, 0.8);
    display: inline-block;
    transition: ease-in-out 0.3s;
    color: #fff;
}

.team .member .social a:hover {
    background: #3b8af2;
}

.team .member .social i {
    font-size: 18px;
}

.team .member .member-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 20px;
    background-color: white;
    /* Latar belakang untuk teks */
    /* border: 1px solid #e0e0e0; */
    padding: 25px 15px;
}

.team .member .member-info h4 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 18px;
    color: #ffffff;
}

.team-member .member .member-info .name {
    font-weight: 700;
    margin-bottom: 5px;
    /* font-size: 20px; */

    color: #fff;
    text-align: center;
    font-family: "Manrope";
    font-size: 19px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    line-height: normal;
}

.team-member .member .member-info .position {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 15px;
    color: #fff;
    font-family: "Manrope";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.team-member .member .member-img img {
    /* width: 260px; */
    height: 320px;
    flex-shrink: 0;
}

.team .member .member-info span {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #aaaaaa;
}

.team .member .member-info p {
    font-style: italic;
    font-size: 14px;
    line-height: 26px;
    color: #777777;
}

.team .member:hover .social {
    opacity: 1;
    bottom: 15px;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing {
    margin-top: -50px;
    /* border-radius: 5%; */

    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1008%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(26%2c 78%2c 147%2c 1)'%3e%3c/rect%3e%3cpath d='M1494.7351209714502 163.9073647720977L1354.2265788787538 141.6529979719294 1472.480754171282 304.4159068647941z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M922.4115702712303-29.36709543450198L847.7619173781741-13.49982188569333 908.8876541479151 90.54102067948662z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1425.5259521926016 503.31710931870487L1460.0632338754067 390.7346072769715 1359.3711551857216 412.1373693106583z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M325.1900613028785 554.168561741336L431.8697449773547 552.3064609362764 323.3279604978188 447.48887806685985z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1311.2113056977278 90.48050861479426L1235.123628482446 65.75812364693752 1236.0838896383018 192.25083195378835z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1177.4241899415113 545.4605526068375L1262.5985188544823 398.25844425094346 1113.9549756666418 395.66386155343946z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1286.8296019680222 183.1830604743766L1249.0028162847375 346.31939514828434 1389.722141419967 305.9687779786637z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1110.4536850082334 240.7754022675023L1030.529208148378 163.59323213161233 953.347038012488 243.51770899146766 1033.2715148723435 320.69987912735763z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M255.87743695833962 157.01852538503L279.5724253664738 278.9186731584667 377.7775847317763 133.3235369768958z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M607.8715552513595 190.77644458270854L666.3412380245837 300.74192439471585 776.306717836591 242.27224162149162 717.8370350633668 132.30676180948433z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1008'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e"); */
}

.pricingg {
    margin-top: -50px;
    border-radius: 5%;

    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1008%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(26%2c 78%2c 147%2c 1)'%3e%3c/rect%3e%3cpath d='M1494.7351209714502 163.9073647720977L1354.2265788787538 141.6529979719294 1472.480754171282 304.4159068647941z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M922.4115702712303-29.36709543450198L847.7619173781741-13.49982188569333 908.8876541479151 90.54102067948662z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1425.5259521926016 503.31710931870487L1460.0632338754067 390.7346072769715 1359.3711551857216 412.1373693106583z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M325.1900613028785 554.168561741336L431.8697449773547 552.3064609362764 323.3279604978188 447.48887806685985z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1311.2113056977278 90.48050861479426L1235.123628482446 65.75812364693752 1236.0838896383018 192.25083195378835z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1177.4241899415113 545.4605526068375L1262.5985188544823 398.25844425094346 1113.9549756666418 395.66386155343946z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1286.8296019680222 183.1830604743766L1249.0028162847375 346.31939514828434 1389.722141419967 305.9687779786637z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1110.4536850082334 240.7754022675023L1030.529208148378 163.59323213161233 953.347038012488 243.51770899146766 1033.2715148723435 320.69987912735763z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M255.87743695833962 157.01852538503L279.5724253664738 278.9186731584667 377.7775847317763 133.3235369768958z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M607.8715552513595 190.77644458270854L666.3412380245837 300.74192439471585 776.306717836591 242.27224162149162 717.8370350633668 132.30676180948433z' fill='rgba(13%2c 54%2c 96%2c 0.31)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1008'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e"); */
}

.pricingan {
    width: 200px;
    margin-right: 38px;
}

.pricing .judul {
    text-align: center;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-bottom: -50px;
}

.pricing .judul h3 {
    font-family: "Manrope";
    text-transform: uppercase;
    font-size: 48px;
    color: #000000;
    position: relative;
    letter-spacing: 2px;
    padding-bottom: 5px;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
}

/* .pricing .judul h3::before {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 6px;
background: linear-gradient(135deg, #ffb74d, #ff4081, #9b59b6, #18ffff, #64ffda);
background-size: 300% 300%;
border-radius: 5px;
animation: gradientAnimation 4s ease infinite;

} */

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.pricing .box {
    width: 220px;
    padding: 20px;
    /* background: #f8f8f8; */
    text-align: center;
    box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.pricing .box h3 {
    font-weight: 400;
    margin: -20px -20px 20px -20px;
    padding: 20px 15px;
    font-size: 16px;
    font-weight: 600;
    color: #777777;
    /* background: #f8f8f8; */
}

.pricing .box .img-fluid {
    color: #ffffff;
    /* background: #f8f8f8; */
}

.pricing .box img {
    width: 280px;
    /* Set a fixed width */
    height: 280px;
    /* Set a fixed height */
    display: block;
    /* margin:    0 auto; Center-align the image horizontally within the container */
    object-fit: contain;
    /* Ensure the image retains its aspect ratio and fits within the defined width and height */
}

.pricing .box h4 {
    font-weight: 400;
    margin: -20px -20px 20px -20px;
    padding: 20px 15px;
    font-size: 16px;
    font-weight: 600;
    color: #777777;
    /* background: #f8f8f8; */
}

.pricing .box h4 sup {
    font-size: 20px;
    top: -15px;
    left: -3px;
}

.pricing .box h4 span {
    color: #bababa;
    font-size: 16px;
    font-weight: 300;
}

.pricing .box ul {
    flex: 1;
    padding: 0;
    list-style: none;
    color: #444444;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    margin-top: -10px;
    color: #3c3c3c;
    font-family: "Manrope";
    /* font-size: 32.97px; */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.pricing .box ul li {
    padding-bottom: 16px;
    text-align: left;
    color: #302f2f;
    font-family: "Manrope";
    /* font-size: 32.97px; */
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    /* text-align:right;  */
}

.pricing .box ul li strong {
    font-size: 18px;
    color: #000000;
    font-family: "manrope";
    /* font-size: 45.962px; */
    font-style: normal;
    font-weight: 1000;
    line-height: bold;
    font-weight: bold;
    text-align: left;
}

.pricing .box ul i {
    color: #106eea;
    font-size: 18px;
    padding-right: 4px;
}

.pricing .box ul .na {
    color: #ffffff;
    text-decoration: line-through;
}

.pricing .btn-wrap {
    /* margin: 20px -20px -20px -20px; */
    /* margin-top: 10px; */
    padding: 20px 5px;
    background: #ffffff;
    text-align: center;
    display: flex;
    justify-content: left;
    align-items: center;
}

.pricing .btn-buy {
    /* position: absolute; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    margin-top: -20px;
    border-radius: 10px;
    background: var(--midnight-blue-950, #09326f);
    display: inline-block;
    width: fit-content;
    text-align: center;
    padding: 10px 32px 10px 32px;
    /* border-radius: 10px; */
    /* color: #ff ffff; */
    transition: none;
    font-size: 14px;
    color: #fff;
    font-family: "Manrope";
    /* font-size: 30.749px; */
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    transition: 0.3s;
    white-space: nowrap;
    width: 80%;
}

.pricing .btn-buyy {
    /* position: absolute; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    border-radius: 25px;
    border: 2px solid #1b5cc5;
    border-radius: 10px;
    background: var(--midnight-blue-950, #ffffff);
    display: inline-block;
    width: fit-content;
    text-align: center;
    padding: 10px 32px 10px 32px;
    /* border-radius: 10px; */
    /* color: #ff ffff; */
    transition: none;
    font-size: 14px;
    margin-top: -60px;
    color: #09326f;
    font-family: "Manrope";
    /* font-size: 30.749px; */
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    transition: 0.3s;
    white-space: nowrap;
    width: 80%;
}

.pricing .btn-buy:hover {
    background: #3b8af2;
}

.pricing .btn-buyy:hover {
    background: #064ba5;
    color: white;
}

.pricing .featured h3 {
    color: #fff;
    background: #106eea;
}

.pricing .advanced {
    width: 200px;
    position: absolute;
    top: 18px;
    right: -68px;
    transform: rotate(45deg);
    z-index: 1;
    font-size: 14px;
    padding: 1px 0 3px 0;
    background: #106eea;
    color: #fff;
}

/* Your existing CSS code goes here */

@media (max-width: 768px) {
    .pricing .judul h3 {
        font-size: 28px;
        padding-bottom: 5px;
    }

    .pricing .col-lg-3 {
        width: 100%;
        /* Mengambil 100% lebar di seluler */
        margin: 0 0 20px 0;
        /* Jarak antara kotak harga di seluler */
    }

    .pricing .box h4 {
        font-size: 18px;
        margin-bottom: 10px;
        /* Jarak bawah di bawah judul kotak di seluler */
    }

    .pricing .box img {
        margin-bottom: 10px;
        /* Jarak bawah di bawah gambar di seluler */
    }

    .pricing .box ul li {
        padding-bottom: 10px;
    }

    .pricing .btn-buy {
        font-size: 14px;
    }
}

/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
/* style.css */
.faq {
    /* padding: 60px 0; */
    background-color: rgb(255, 255, 255);
    /* border-radius: 50px; */
    /* font-family: "Inter", sans-serif; */
}

.faq .section-title h3 {
    color: #000;
    font-family: "Poppins";
    font-size: 41px;
    font-style: normal;
    font-weight: 00;
    line-height: normal;
}

.faq .faq-list {
    list-style: none;
    padding: 0;
    max-height: 1000px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faq .faq-list li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    color: #000;
    /* font-family: "Poppins"; */
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.faq .faq-list .question {
    font-family: "Poppins", sans-serif;
    line-height: 24px;
    padding: 15px 30px;
    border-radius: 50px;
    transition: background-color 0.3s ease, padding 0.3s ease;
    background-color: white;
    /* color: #0d58ba; */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.faq .faq-list .question i {
    font-size: 11px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.faq .faq-list .question.open .icon-show {
    transform: rotate(180deg);
}

.faq .faq-list .question:hover {
    background-color: #f0f0f0;
}

.faq .faq-list .question:active {
    background-color: #e0e0e0;
}

.faq .faq-list .answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 30px;
}

.faq .faq-list .answer.open {
    max-height: 200px;
}

.faq .faq-list li:not(:last-child) .answer {
    border-bottom: 1px solid #d4e5fc;
}

.faq .faq-list p {
    margin-bottom: 0;
    padding: 10px 0 0 25px;
    font-size: 15px;
    font-family: "Manrope";
}

.collapse.show-answer {
    display: block;
}

.faq .faq-list .collapsed {
    border-radius: 20px;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));

    color: #000;
    font-family: "Manrope";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    margin-right: 10px;
}

.faq .faq-list .collapsed:hover {
    background-color: white;
    color: #106eea;
}

.faq .faq-list .collapsed .icon-show {
    display: inline-block;
    transition: 0.3s transform ease;
}

.faq .container .image-container {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
}

.faq .container .image-containerr {
    position: relative;
    width: 100%;
    margin-left: 0;
    background-color: yellow;
    height: 100%;
    padding-right: -200px !important;
}

.faq .container .image-containerr .img-fluid-bos {
    width: 100px;
    height: 100px;
    /* object-fit: cover; */
}

.faq .container .image-container .img-fluid-bos {
    width: 700px;
    height: 700px;
    margin-left: -200px;
}

.btn-faq {
    border-radius: 20px;
    background: #3e87f8;
    box-shadow: 16px 16px 50px 0px rgba(0, 0, 0, 0.2);

    width: 259px;
    height: 64px;
    flex-shrink: 0;

    color: #fff;
    font-family: "Raleway";
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.btn-faq:hover {
    border-radius: 20px;
    background: #3e87f8;
    box-shadow: 16px 16px 50px 0px rgba(0, 0, 0, 0.2);

    width: 259px;
    height: 64px;
    flex-shrink: 0;

    color: #fff;
    font-family: "Raleway";
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
    color: #444444;
    text-align: center;
    box-shadow: 0 0 30px rgba(214, 215, 216, 0.3);
    padding: 20px 0 30px 0;
}

.contact .info-box i {
    font-size: 32px;
    color: #106eea;
    border-radius: 50%;
    padding: 8px;
    border: 2px dotted #b3d1fa;
}

.contact .info-box h3 {
    font-size: 20px;
    color: #777777;
    font-weight: 700;
    margin: 10px 0;
}

.contact .info-box p {
    padding: 0;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.contact .php-email-form {
    box-shadow: 0 0 30px rgba(214, 215, 216, 0.4);
    padding: 30px;
}

.contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    font-weight: 600;
}

.contact .php-email-form .error-message br + br {
    margin-top: 25px;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
}

.contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
}

.contact .php-email-form .form-group {
    margin-bottom: 20px;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
    border-color: #106eea;
}

.contact .php-email-form input {
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 12px 15px;
}

.contact .php-email-form button[type="submit"] {
    background: #106eea;
    border: 0;
    padding: 10px 30px;
    color: #fff;
    transition: 0.4s;
    border-radius: 4px;
}

.contact .php-email-form button[type="submit"]:hover {
    background: #3b8af2;
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
    background: #0849b2;
    padding: 0 0 30px 0;
    color: #ffffff;
    font-size: 14px;
    /* background:  #0D2947 ; */
}

#garis1 {
    /* width: 10px;
height: 20px; */
    /* transform: rotate(-12deg); */
    /* flex-shrink: 0; */
    /* stroke-width: 5px; */

    stroke: #003eb5;
    position: absolute;
    z-index: -3;
    filter: drop-shadow(0px 9px 100px #a53ff6);
    margin-bottom: 100px;
    /* background-size: cover; */
}

/* #footer .container .row .footer-links{
height: 500px;
} */

#footer .footer-newsletter {
    padding: 50px 0;
    background: #f1f6fe;
    text-align: center;
    font-size: 15px;
}

.footer-links a:hover {
    color: #ff9900 !important;
    /* background-color: #ff9900;
      border-radius: 50%; */
}

/* .footer-links a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
} */

/* .footer-links a:hover {
  color: #ff9900;
  background-color: transparent;
} */

#footer .footer-newsletter h4 {
    font-size: 24px;
    margin: 0 0 20px 0;
    padding: 0;
    line-height: 1;
    font-weight: 600;
}

#footer .footer-newsletter form {
    margin-top: 30px;
    background: #fff;
    padding: 6px 10px;
    position: relative;
    border-radius: 4px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.06);
    text-align: left;
}

#footer .footer-newsletter form input[type="email"] {
    border: 0;
    padding: 4px 8px;
    width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 20px;
    background: #106eea;
    color: #fff;
    transition: 0.3s;
    border-radius: 0 4px 4px 0;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#footer .footer-top {
    padding: 30px 30px 0;
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1007%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(14%2c 188%2c 227%2c 1)'%3e%3c/rect%3e%3cpath d='M 0%2c189 C 57.6%2c166 172.8%2c58.8 288%2c74 C 403.2%2c89.2 460.8%2c258.8 576%2c265 C 691.2%2c271.2 748.8%2c117.2 864%2c105 C 979.2%2c92.8 1036.8%2c198.6 1152%2c204 C 1267.2%2c209.4 1382.4%2c146.4 1440%2c132L1440 560L0 560z' fill='rgba(14%2c 175%2c 211%2c 1)'%3e%3c/path%3e%3cpath d='M 0%2c469 C 96%2c456.4 288%2c410.4 480%2c406 C 672%2c401.6 768%2c457.2 960%2c447 C 1152%2c436.8 1344%2c373.4 1440%2c355L1440 560L0 560z' fill='rgba(11%2c 141%2c 170%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1007'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); */
    /* background-image: url("/assets/img/bg/footer1.png"); */
    background-size: cover;
}

#footer .footer-top .footer-contact {
    margin-bottom: 30px;
}

#footer .footer-top .footer-contact h3 {
    font-size: 24px;
    margin: 0 0 15px 0;
    padding: 2px 0 2px 0;
    line-height: 1;
    font-weight: 700;
}

#footer .footer-top .footer-contact h3 span {
    color: #106eea;
}

#footer .footer-top .footer-contact p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
    font-family: "Roboto", sans-serif;
    color: #777777;
}

#footer .footer-top h4 {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    position: relative;
    padding-bottom: 12px;
}

#footer .footer-top .footer-links {
    margin-bottom: 30px;
}

#footer .footer-top .footer-links img {
    /* width: 545px; */
    /* display: none; */
    /* bottom: 0;
position: absolute; */
    /* right: 50px; */
    /* margin-top: 100px; */
    /* margin-bottom: -50px; */

    max-width: 100%;
    height: auto;
    bottom: 0;
    position: absolute;
    right: 50px;
    margin-bottom: -50px;
}

#footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .footer-top .footer-links ul i {
    padding-right: 2px;
    color: #106eea;
    font-size: 18px;
    line-height: 1;
}

#footer .footer-top .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

#footer .footer-top .footer-links ul li:nth-child(2) {
    text-align: right;
}

#footer .footer-top .footer-links ul a {
    color: white;
    transition: 0.3s;
    display: inline-block;
    line-height: 1;
    text-decoration: none;
}

#footer .footer-top .footer-links ul a:hover {
    text-decoration: none;
    color: #ff9900;
}

#footer .footer-top .social-links a {
    font-size: 18px;
    display: inline-block;
    background: white;
    color: red;
    margin-top: 8px;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 100%;
    text-align: center;
    /* width: 36px;
    height: 36px; */
    transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
    background: #3b8af2;
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
}

#topbar .social-linkss a {
    color: rgb(255, 253, 253);
    line-height: 0;
    transition: 0.3s;
    margin-left: 20px;
}

#topbar .social-linkss a:hover {
    color: white;
}

#footer .footer-top .social-linkss {
    text-align: center; /* Center the social links */
}

#footer .footer-top .social-linkss a {
    font-size: 18px;
    display: inline-block;
    background: white;
    color: red;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 4px;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
    position: relative;
}

#footer .footer-top .social-linkss a:hover {
    background: red;
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
}

#footer .copyright {
    text-align: center;
    float: center;
}

#footer .copyrightt {
    text-align: center;
    float: center;
}

#footer .credits {
    float: center;
    text-align: center;
    font-size: 13px;
    color: #ffffff;
}

#footer .credits a {
    text-decoration: none;
    color: #ffffff;
    /* Link color */
    /*font-weight: bold;*/
    /* Make the links bold */
    margin-right: 20px;
    /* Add space between links */
    transition: color 0.2s;
    /* Smooth color transition on hover */
}

#footer .credits a:hover {
    color: #ff9900;
    /* Change link color on hover */
}

@media (max-width: 768px) {
    #footer .copyright,
    #footer .credits {
        float: none;
        text-align: center;
        padding: 2px 0;
    }
}

/* #transisi {
font-family: Arial, sans-serif;
text-align: center; */
.galeri {
    margin-top: 5%;
    border-radius: 10px;
    background-color: #f0f0f0;

    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1001%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(26%2c 78%2c 147%2c 1)'%3e%3c/rect%3e%3cpath d='M177.27 -19.19L256.95 26.81L256.95 118.81L177.27 164.81L97.6 118.81L97.6 26.81zM177.27 256.81L256.95 302.81L256.95 394.81L177.27 440.81L97.6 394.81L97.6 302.81zM416.3 118.81L495.98 164.81L495.98 256.81L416.3 302.81L336.63 256.81L336.63 164.81zM495.98 256.81L575.66 302.81L575.66 394.81L495.98 440.81L416.3 394.81L416.3 302.81zM735.01 394.81L814.69 440.81L814.69 532.81L735.01 578.81L655.33 532.81L655.33 440.81zM814.69 532.81L894.36 578.81L894.36 670.81L814.69 716.81L735.01 670.81L735.01 578.81zM1133.39 256.81L1213.07 302.81L1213.07 394.81L1133.39 440.81L1053.72 394.81L1053.72 302.81zM1292.75 256.81L1372.42 302.81L1372.42 394.81L1292.75 440.81L1213.07 394.81L1213.07 302.81zM1452.1 532.81L1531.78 578.81L1531.78 670.81L1452.1 716.81L1372.42 670.81L1372.42 578.81z' stroke='rgba(17%2c 66%2c 96%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M168.07 -19.19 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM247.75 26.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM247.75 118.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM168.07 164.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM88.4 118.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM88.4 26.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM168.07 256.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM247.75 302.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM247.75 394.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM168.07 440.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM88.4 394.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM88.4 302.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM407.1 118.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM486.78 164.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM486.78 256.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM407.1 302.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM327.43 256.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM327.43 164.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM566.46 302.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM566.46 394.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM486.78 440.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM407.1 394.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM725.81 394.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM805.49 440.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM805.49 532.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM725.81 578.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM646.13 532.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM646.13 440.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM885.16 578.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM885.16 670.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM805.49 716.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM725.81 670.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1124.19 256.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1203.87 302.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1203.87 394.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1124.19 440.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1044.52 394.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1044.52 302.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1283.55 256.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1363.22 302.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1363.22 394.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1283.55 440.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1442.9 532.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1522.58 578.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1522.58 670.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1442.9 716.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1363.22 670.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0zM1363.22 578.81 a9.2 9.2 0 1 0 18.4 0 a9.2 9.2 0 1 0 -18.4 0z' fill='rgba(17%2c 66%2c 96%2c 1)'%3e%3c/path%3e%3cpath d='M753.14 193.89L888.24 271.89L888.24 427.89L753.14 505.89L618.04 427.89L618.04 271.89zM618.04 427.89L753.14 505.89L753.14 661.89L618.04 739.89L482.93 661.89L482.93 505.89zM1158.45 -40.11L1293.55 37.89L1293.55 193.89L1158.45 271.89L1023.35 193.89L1023.35 37.89zM1293.55 193.89L1428.66 271.89L1428.66 427.89L1293.55 505.89L1158.45 427.89L1158.45 271.89zM1428.66 -40.11L1563.76 37.89L1563.76 193.89L1428.66 271.89L1293.55 193.89L1293.55 37.89z' stroke='rgba(18%2c 63%2c 91%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1001'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); */
}

.galeri-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20%;
    /* Jarak antara elemen gambar dan tulisan */
    margin-top: 50px;
    /* Jarak bagian atas */
    margin-bottom: 50px;
    /* Jarak bagian bawah */
}

.image-container {
    max-width: 200%;
    display: flex;
    justify-content: flex-start;
    /* Elemen gambar berada di sisi kiri */
    align-items: center;
    /* Elemen gambar berada di tengah vertikal */
}

.caption-container {
    background-color: #ffffff;
    padding: 10px;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* Tulisan berada di tengah vertikal */
}

.caption {
    margin: 5px;
    cursor: pointer;
    font-weight: normal;
    transition: all 0.3s ease;
    /* Efek transisi untuk tulisan */
}

.caption:hover {
    background-color: #ffffff;
    transform: scale(1.05);
    /* Efek zoom saat dihover */
}

.caption:active {
    transform: scale(0.95);
}

.caption-bold {
    font-weight: bold;
}

.thought-bubble {
    position: absolute;
    background-color: #3e87f8;
    border: 1px solid #3e87f8;
    padding: 5px;
    width: 500px;
    text-align: center;
    border-radius: 10px;
    margin-top: 30px;
    box-shadow: 0px 0px 5px rgb(255, 248, 248);
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    color: white; /* Set the text color to white */
}

.arrow-down {
    position: absolute;
    width: 0;
    height: 0;
    border-color: black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #3e87f8;
    top: 100%;
    /* Position it below the bubble */
    left: 50%;
    transform: translateX(-50%);
}

.image-container {
    position: relative;
}

/* Efek transisi gambar */
#gambar {
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Timing function cubic-bezier untuk efek transisi lebih halus */
    transform-origin: center center;
    /* Pusat transformasi di tengah gambar */
    width: 100px;
    /* Ukuran gambar akan mengisi 100% lebar dari elemen image-container */
    height: 100px;
    /* Ketinggian gambar akan menyesuaikan proporsi dari lebar yang ditetapkan */
}

.fadeOut {
    animation: fadeOutAnimation 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Timing function cubic-bezier untuk efek memudar lebih halus */
}

@keyframes fadeOutAnimation {
    0% {
        opacity: 1;
        /* Mulai dengan opacity 1 (tidak terlihat memudar) */
    }

    25% {
        opacity: 0.75;
        /* Setelah 25% animasi, opacity menjadi 0.75 (mulai memudar) */
    }

    50% {
        opacity: 0.5;
        /* Setelah 50% animasi, opacity menjadi 0.5 (memudar lebih banyak) */
    }

    75% {
        opacity: 0.25;
        /* Setelah 75% animasi, opacity menjadi 0.25 (memudar hampir menghilang) */
    }

    100% {
        opacity: 0;
        /* Akhiri dengan opacity 0 (gambar terlihat menghilang) */
    }
}

.fadeIn {
    animation: fadeInAnimation 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Timing function cubic-bezier untuk efek memunculkan lebih halus */
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
        /* Mulai dengan opacity 0 (tidak terlihat memunculkan) */
    }

    25% {
        opacity: 0.25;
        /* Setelah 25% animasi, opacity menjadi 0.25 (mulai memunculkan) */
    }

    50% {
        opacity: 0.5;
        /* Setelah 50% animasi, opacity menjadi 0.5 (memunculkan lebih banyak) */
    }

    75% {
        opacity: 0.75;
        /* Setelah 75% animasi, opacity menjadi 0.75 (memunculkan hampir penuh) */
    }

    100% {
        opacity: 1;
        /* Akhiri dengan opacity 1 (gambar terlihat penuh/muncul sepenuhnya) */
    }
}

/* bagian menu */

.menu .container {
    /* text-align: center;
margin: 50px; */
    margin-left: 120px;
    /* margin: 0;  */
}

#menu .container {
    text-align: center;
    /* margin: 50px; */
}

/* .menu .content-selector {
    border-radius: 50px;
    border: solid 1px;
    width: 212px;
    float: left;
}

.menu .content-selectora {
    margin-bottom: 20px;
    border-radius: 50px;
    padding: 2px;
    border: solid 1px;
    width: 340px;
    float: left;
}

.menu .content-selectora .btn {
    background-color: transparent;
    border-color: transparent;
    border-radius: 50px;
    margin-top: 50px;
    color: black;
} */

.menu .content-selectora .btn:hover {
    border-radius: 50px;
    background-color: #2b65ec;
    /* Warna latar belakang saat hover */
    color: wheat;

    /* Warna teks saat hover */
}

.menu .content-selector .btn {
    background-color: transparent;

    border-color: transparent;
    color: black;
}

.menu .content-selector .btn:hover {
    border-radius: 50px;
    background-color: #2b65ec;

    /* Warna latar belakang saat hover */
    color: black;
    /* Warna teks saat hover */
}

.menu button {
    border-radius: 50px;
    padding: 10px 30px;
    font-size: 16px;
}

.menu button {
    border-radius: 50px;
    padding: 10px 30px;
    font-size: 16px;
}

.menu .content {
    display: none;
}

.menu .content p {
    color: #3c3c3c;
    font-family: "Manrope";
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.menu .content ul {
    list-style-type: none;
    padding: 0;
    margin-top: -20px;
}

.menu .content li {
    border-radius: 21px;
    background: #fefefe;
    box-shadow: -1px 7px 15px 0px rgba(0, 0, 0, 0.1),
        -5px 27px 28px 0px rgba(0, 0, 0, 0.09),
        -10px 61px 37px 0px rgba(0, 0, 0, 0.05),
        -18px 108px 44px 0px rgba(0, 0, 0, 0.01),
        -29px 169px 48px 0px rgba(0, 0, 0, 0);
    color: #3c3c3c;
    font-family: "Manrope";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    position: relative;
    /* font-weight: normal;  */
    width: 559px;
    padding: 20px;
    /* Jarak antara centang dan teks */
    padding-left: 70px;
    /* Jarak antara centang dan teks */
    margin-top: 30px;
    max-width: 100%;
    /* Lebar maksimum */
}

.menu .content .circle {
    position: absolute;
    left: 15px;
    /* width: 20px; Lebar lingkaran */
    /* height: 20px; Tinggi lingkaran */
    top: 50%;
    /* Posisi vertikal tengah */
    transform: translateY(-50%);
    /* Untuk mengatur lingkaran ke tengah vertikal */
    display: flex;
    align-items: center;
    /* Memposisikan gambar ke tengah vertikal dalam lingkaran */
    justify-content: center;
    /* Memposisikan gambar ke tengah horizontal dalam lingkaran */
    border-radius: 50%;
    /* Bentuk lingkaran */
}

.menu .content .circle img {
    max-width: 40px;
    /* Maksimum lebar gambar adalah lebar lingkaran */
    max-height: 100%;
    /* Maksimum tinggi gambar adalah tinggi lingkaran */
}

/* style.css */
.btn-selected {
    background-color: green;
    color: white;
}

.menu .navigation-buttons {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
}

/* #prevBtn {
left: 20px;
}

#nextBtn {
right: 20px;
} */
@media screen and (max-width: 768px) {
    .menu .container {
        margin-left: 0px;
        /* Add padding for spacing */
    }

    .menu .content-selector {
        flex-direction: column;
        align-items: center;
    }

    .menu .content-selector .btn {
        margin: 10px 0;
        font-size: 18px;
    }

    .menu .col-lg-6 {
        text-align: center;
        /* Center align content in columns */
    }

    .menu .content {
        padding: 20px;
    }
}

/* box */

.content-box {
    background-color: #f1f1f1;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
    color: #333;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.content-box:hover {
    background-color: #66b8f2;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    color: #fff;
}

.circle-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #3498db;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    margin-right: 10px;
}

.content-text {
    flex: 1;
}

.content-text h5 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    color: #444;
}

.content-text p {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

/* If you need to reduce the space above the .content-box */
.content.d-flex.justify-content-center {
    margin-top: 15px;
}

/*  pricing produk */
.pricing .custom-judul {
    background: #ffffff;
    text-align: center;
    box-shadow: 0px 0px 40px rgba(0, 0.2, 0.2, 0.12);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    /* Add any specific styles here */
}

/* Styling for .pricing .custom-box class */

.pricing .custom-box {
    padding: 20px;
    height: 600px;
    background: #fff;
    text-align: center;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.paket {
    border-radius: 50px;
    background: #3e87f8;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.15);
    color: #fff;
    text-align: center;
    line-height: 50px;
    height: 30px;
    width: 200px;
    margin: 0 auto;
    font-family: Montserrat;
    font-size: 23px;
    font-style: normal;
    font-weight: 550;
    line-height: 125%; /* 40px */
    letter-spacing: 1px;
}

.custom-packagee {
    border-radius: 50px;
    background: #3e87f8;
    color: #fff;
    text-align: center;
    line-height: 50px;
    height: 30px;
    width: 250px;
    margin: 0 auto;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 550;
    font-size: 18;
    line-height: 125%; /* 40px */
    letter-spacing: -1.6px;
    justify-content: center;

    font-family: Montserrat;
}

.pricing .custom-box h3 {
    font-weight: 600;
    font-size: 18px;
    margin: -20px -20px 20px -20px;
    padding: 20px 15px;
    color: #ffffff;
    background: #f8f8f8;
}

.pricing .custom-box h4 {
    font-size: 30px;
    color: #106eea;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    margin-bottom: 20px;
}

.pricing .custom-boxa h4 {
    font-size: 30px;
    color: black;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    margin-bottom: 20px;
}

.pricing .custom-box ul {
    padding: 10px;
    list-style: none;
    color: #ffffff;
    text-align: center;
    line-height: 24px;
    /* font-size: 18px; */
}

.pricing .custom-box ul li {
    display: flex;
    align-items: center;
    margin-bottom: 19px;
}

.pricing .custom-box ul .checkmark {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #4caf50;
    text-align: center;
    margin-right: 10px;
    border-radius: none;
}

.pricing .custom-box ul .text {
    flex: 1;
}

.pricing .custom-btn-wrap {
    margin: 0px -20px -20px -20px;
    padding: 20px 15px;
    background: #ffffff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Montserrat;
}

.pricing .custom-btn-buy {
    background: #106eea;
    display: inline-block;
    width: 100%;
    text-align: center;
    /* padding: 10px 32px; */
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    transition: 0.3s;
}

.pricing .custom-btn-buy:hover {
    background: #3b8af2;
    /* Add a smooth transition effect */
    transition: background 0.3s ease-in-out;
}

li.left-aligned {
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #1e1e1e;
    text-align: justify;
}
li.left-aligned .text {
    text-align: justify;
    font-size: 12px !important;
}

.custom-package {
    border-radius: 50px;
    background: linear-gradient(0deg, #09326f 0%, #3e87f8 100%), #3e87f8;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    width: 292px;
    height: 50px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: white;
}

.rupiah-display h4 {
    color: #1e1e1e !important;
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-right: 100px;
}

.custom-pricee {
    color: #656565;
    font-family: Montserrat;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: -15px;
    margin-left: -100px;
}

.text {
    color: #656565;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 450;
    line-height: normal;
}

.text-bso {
    color: #656565;
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* wa */
#whatsapp-button {
    position: fixed;
    bottom: 0px; /* Jarak dari bawah */
    left: 20px; /* Jarak dari kiri */
    z-index: 999; /* Mengatur tingkat kedalaman */
    display: flex;
    align-items: center;
    /* background-color: #25D366; */
    border-radius: 5px;
    padding: 10px;
}
#whatsapp-button::before {
    content: "";
    position: absolute;
    top: 10;
    left: 10;
    width: 100%;
    height: 80%;
    /* background-color: #25D366; Warna latar belakang (border color) */
    /*display: inline-block;*/
    /*border-radius: 64px 37px 37px 64.5px;*/
    /*background: rgba(0, 0, 0, 0.479);*/
    /*backdrop-filter: blur(20.5px);*/
    /*z-index: -1;*/
}

/* CSS untuk styling kotak teks */
#whatsapp-text {
    color: #ffffff;
    font-family: "Poppins";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    margin-left: 10px; /* Jarak antara gambar dan teks */
    position: relative;
}
#whatsapp-text.bordered::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #25d366; /* Warna border */
    border-radius: 5px;
    top: 0;
    left: 0;
    z-index: -1;
}

/* #whatsapp-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  transition: transform 0.3s ease-in-out;
} */

#whatsapp-button img {
    margin-right: 10px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

#whatsapp-button.active {
    transform: scale(1.1);
}

/* Styles for the message popup */
#message-popup {
    position: fixed;
    bottom: 90px;
    /* Adjust this value to move the popup up or down */
    left: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
    width: 300px;
    overflow: hidden;
    transform-origin: bottom;
    transition: transform 0.3s ease-in-out;
}

#whatsapp-button.active #message-popup {
    display: block;
    transform: scale(1);
}

#popup-header {
    background-color: #25d366;
    /* WhatsApp green color */
    color: white;
    padding: 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#popup-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

#close-popup-button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #075e54;
    transition: background-color 0.3s ease;
    position: absolute;
    top: 5px;
    right: 10px;
}

#close-popup-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.message-container {
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.message {
    background-color: white;
    color: #000000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.user-message {
    background-color: #e2e2e2;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    line-height: 1.4;
    text-align: right;
}

#send-message-button {
    background-color: #25d366;
    /* WhatsApp green color */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

#send-message-button img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    animation: rotateIcons 5s infinite;
}

@keyframes rotateIcons {
    0%,
    100% {
        opacity: 0;
    }

    20%,
    80% {
        opacity: 1;
    }
}

#send-message-button:hover {
    background-color: #128c7e;
    /* Darker green on hover */
}

/* vidio */
.video-list {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-card {
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
    background-color: white;
    border: 1px solid #9aa4d8;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-left: 325px;
}

/* .video-info {
          padding: 10px;
      } */
/* h3, p {
          margin: 0;
      } */

.checkmark {
    display: inline-block;
    width: 20px;
    height: 20px;
    /* background-color: #2ecc71; Warna latar belakang centang */
    border-style: solid;
    font-family: Montserrat;
    border-width: 1px;
    color: rgb(255, 0, 0);
    /* Warna centang */
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    margin-right: 10px;
}

.feature-text {
    font-size: 16px;
}

.countdown {
    font-size: 20px;
    margin-right: 25px;
    text-align: right;
    /* color: #e4dbdb; */
}

.countdown span {
    display: inline-block;
    margin: 0 1px;
}

/* Cari */
.search-form {
    display: flex;
    margin-left: 150px;
    flex-wrap: wrap;

    gap: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.form-label {
    font-weight: bold;
}

.search-input {
    flex: 1;
    /* Elemen input akan mengambil sebagian besar ruang tersedia */
    border-radius: 50px;
    height: 35px;
    width: 450px;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -280px;
}

.search-button {
    align-items: center;
    height: 35px;
    text-align: center;
    background-color: #0056b3;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 8px 30px;
    border-radius: 50px;
    /* Border radius untuk tombol */
    order: 1;
    /* Urutan elemen tombol diubah menjadi 1 */
    margin-bottom: 0px !important;
}

.search-button:hover {
    background-color: #0056b3;
}

.results-container {
    margin-top: 20px;
    text-align: center;
}

/* #search-input:focus {
} */

.content {
    padding: 20px;
    z-index: 0;
}

.cart-container {
    float: left;
    /* padding: 10px; */
    position: relative;
    z-index: 2;
}

.cart-icon {
    width: 40px;
    height: 40px;
    background-color: rgb(220, 250, 260);
    border: none;
    border-radius: 50%;
    /* Mengatur border-radius ke 50% akan membentuk lingkaran */
    cursor: pointer;
    transition: transform 0.3s;
}

.cart-icon img {
    width: 20px;
    height: 20px;
}

.cart-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    width: 250px;
    z-index: 2;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /* border-radius: 5px; */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    right: 0;

    transform: translateX(-50%);
    top: calc(100% + 5px);
    text-align: center;
}

.cart-items {
    display: flex;
    flex-direction: column;
    /* Tampilan ke bawah */
    text-decoration: none;
}

.cart-item {
    list-style: none;
    padding: 10px;

    /* border-bottom: 1px solid #ddd; */
}

.item-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-image img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-right: 10px;
}

.item-info {
    /* flex: 1; */
    text-align: left;
    margin-right: 20px;
    margin-top: 20px;
}

.item-price {
    text-align: left;
    margin-top: 5px;
    font-size: 14px;
    color: #666;
}

.remove-item-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    position: absolute;
    top: 5px;
    right: 5px;
}

.remove-item-button img {
    width: 10px;
    height: 10px;
}

.cart-items li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.checkout-button {
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.content {
    padding: 20px;
}

/* ================================ */

.gambart {
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    position: relative;
}

.main-container {
    position: relative;
}

.centered-image {
    text-align: center;
}

.centered-image img {
    max-width: 30%;
    /* Ubah persentase sesuai kebutuhan */
    height: auto;
}

.side-text {
    position: absolute;
    padding: 10px;
    width: 300px;
    /* background-color: rgba(0, 0, 0, 0.5); */
    color: #000000;
}

.side-text-left {
    left: 0;
}

.side-text-right {
    right: 0;
}

.top {
    top: -150px;
    /* Naikkan nilai sesuai kebutuhan */
}

.middle {
    top: 50%;
    transform: translateY(-50%);
}

.bottom {
    bottom: 150;
}

.logoss {
    max-width: 50px;
    /* Ubah ukuran logo sesuai kebutuhan */
    height: auto;
    margin-top: 10px;
    /* Atur margin atas logo sesuai kebutuhan */
}

.overlay {
    /* position: absolute; */
    float: right;
    bottom: 0;
    right: 0;
    /* background-color: rgba(0, 0, 0, 0.5); */
    padding: 10px;
    color: #000000;
    /* white-space: pre-line; */
    /* text-align: right; */
    flex-direction: column;
    /* Menambahkan flex-direction untuk memastikan pindah baris */
    max-width: 80%;
}

.overlay p {
    /* font-size: 15px; */
    word-wrap: break-word;
    margin-top: 5px;
    /* Menambahkan jarak antara judul dan deskripsi */
}

/* =------------------------= */
.blockx {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(270deg, #fe602d 0%, #fe4140 100%);
    padding: 20px;
    width: 96.5vw;
    justify-content: center;
    height: 300px;
    flex-shrink: 0;
    margin-left: 20px;
}

/* .blockx .box {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
z-index: 1;
border-radius: 45px;
background: url("../img/bg/rev1.png"), lightgray 50% / cover no-repeat;
width: 95%;
height: 452px;
flex-shrink: 0;
text-align: center;
} */

.blockx .box .text-content {
    flex: 1;
    /* Membuat teks mengambil sebagian besar lebar */
    padding: 30px;
    color: var(--midnight-blue-950, #09326f);
    font-family: Poppins;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px; /* 130% */
    /* Menambahkan padding untuk teks */
    text-align: left;
    /* Mengatur teks menjadi kiri */
}

.blockx img {
    width: 518px;
    height: 529px;
    flex-shrink: 0;
    /* width: 30%; */
    /* height: 352px; */
    /* Sesuaikan lebar gambar sesuai kebutuhan */
    height: auto;
    /* Menjaga gambar agar tetap dalam proporsi aslinya */
    /* background-color: lightgray;  */
    /* background-color: lightgray; */
    float: right;
    right: 0;
    position: absolute;
    z-index: 2;
    margin-top: -79px;
    /* background-color: light gray; */
}

.blockx .box .button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50px;
    background-color: transparent;
    /* color: white; */
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    /* transition: background-color 0.3s, opacity 0.3s; */
}

.blockx .box .button:hover {
    background-color: red;
    opacity: 0.8;
}

.blockx .box .button i {
    font-size: 30px;
}

.blockx .box h2 {
    margin-bottom: 10px;
    /* color: #333; */
}

.blockx .box p {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.blockx .background-box {
    position: absolute;
    margin-top: 250px;
    left: 0;
    width: 100%;
    height: 313px;
    background: #3e87f8;
    z-index: 0;
}

/* jjjjjjjjjjjjjjjj */
table {
    border-collapse: collapse;
    /* width: 600px; */
    margin: auto;
}

th,
td {
    padding: 8px;
    text-align: center;
}

.menu-container {
    display: flex;
    justify-content: flex-start;
    justify-content: center;
    align-items: center;
    padding: 0;
    /* Remove padding */
}

.menu {
    /* cursor: pointer; */
    color: rgb(0, 0, 0);
    padding: 10px 30px;
    /* Add padding to make space for the arrow */
    margin-right: 10px;
    position: relative;
    /* Set the menu position to relative */
}

/* Position the arrow next to the "Menu" text */
.menu .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    /* Set the arrow position to the right */
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
}

.menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    /* Set the position to relative for proper absolute positioning */
}

.menu-container-centered {
    display: flex;
}

.menu {
    /* cursor: pointer; */
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    /* Add padding to make space for the arrow */
    margin-right: 10px;
}

.content-container {
    position: relative;
    /* Set the position to relative for proper absolute positioning */
    display: flex;
    justify-content: center;
    /* Center the content horizontally */
    align-items: center;
    /* Center the content vertically */
    margin-top: 20px;
    text-align: center;
    padding: 0;
    /* Remove padding */
}

#menu .content {
    display: none;
}

#menu .contentbolo {
    /* display: none; */
    border-radius: 46px;
    background: rgba(255, 255, 255, 0.37);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(41.5px);
}

.content.active {
    display: block;
}

.content {
    display: none;
}

.content.active {
    display: block;
}

.paketmentorbso {
    margin-top: -50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Ruang di sekitar elemen */
    background-color: #f0f0f0;
    /* Warna abu-abu latar belakang */
}
.paketmentorbso .container {
    display: flex;
    justify-content: flex-end;
}
.paketmentorbso .paketbso {
    display: flex;
    padding: 10px;
}

.paketbso.active {
    display: block;
}

.paketbso {
    display: none;
}

.paketbso {
    padding: 20px;
}
.paketbso {
    padding: 20px;
    z-index: 0;
}

/* .navigation { */
/* Set the styles for navigation (if you have any) */
/* } */

.nav-button {
    cursor: pointer;
    color: rgb(0, 0, 0);
    padding: 8px 6px;
    /* Reduce padding on the left */
    font-size: 16px;
    margin: 0 5px;
    border: none;
    /* Remove border */
}

/* .left-pane { */
/* Set styles for the left pane (if you have any) */
/* } */

/* .right-pane { */
/* Set styles for the right pane (if you have any) */
/* } */

/* Gaya untuk elemen yang menampilkan angka */
.purecounter {
    font-size: 24px;
    font-weight: bold;
}

/* Gaya untuk tanda plus */
.plus-sign {
    font-size: 16px;
    display: inline-block;
    /* Untuk menempatkan tanda plus di samping angka */
    margin-left: 5px;
    /* Untuk memberi jarak antara angka dan tanda plus */
    vertical-align: middle;
    /* Untuk mengatur vertikal alignment agar tanda plus berada di tengah angka */
}

/*--------------  popup-------------------- */
/* Base styles for larger screens */
.popup {
    /* font-family: Arial, sans-serif; */
    margin-top: -70px;
}

.popup .button-container {
    margin-top: -10px;
    background-color: #f0f0f0;
    width: 40%;
    display: flex;
    padding: 15px;
}

@media screen and (min-width: 1300px) {
    .popup .button-container {
        margin-top: -10px;
        background-color: #f0f0f0;
        width: 500px;
        display: flex;
        padding: 15px;
    }
}

.popup .custom-text {
    margin-top: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    margin-left: 10%;
}

.popup .custom-button {
    background-color: transparent;
    border: 1px solid #007bff;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-weight: bold;
    color: #007bff;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.popup .btn-group {
    display: flex;
    justify-content: space-between;
}

.popup .btn-group button {
    flex: 1;
    margin-right: 10px;
    margin-bottom: 10px;
}

.popup .btn-group button:last-child {
    margin-right: 0;
}

.popup .custom-button:hover {
    background-color: #007bff;
    color: #fff;
}

.popup .modal-content {
    border-radius: 10px;
    padding: 40px;
}

.popup .modal-title {
    font-size: 24px;
    font-weight: bold;
    font-family: "Poppins";
    /* color: #333; */
    /* text-transform: uppercase; */
    margin-bottom: 20px;
    /* text-align: center; */
    color: #09326f;
    text-align: center;
    font-family: Poppins;
    /* font-size: 50px; */
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 130% */
}

.popup .p {
    font-size: 24px;
    font-weight: bold;
    font-family: "Poppins";
    /* color: #333; */
    /* text-transform: uppercase; */
    margin-bottom: 20px;
    /* text-align: center; */
    color: black;

    /* 130% */
}

.popup .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-title {
    margin: 0; /* Menghapus margin di atas dan bawah */
    padding: 0; /* Menghapus padding di atas dan bawah */
}

.modal-content p {
    margin: 0; /* Menghapus margin di atas dan bawah */
    padding: 0; /* Menghapus padding di atas dan bawah */
}

/* .popup .btn-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 234px;
height: 150px;

} */
/* Atur tombol */
.popup .btn-primary {
    flex: 1;
    background-color: transparent;
    color: black;
    border: transparent;
    font-family: "Poppins";
    border-radius: 51px;
    background: #f9f9f9;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    /* transition: background-color 0.3s, color 0.3s; */
}

.popup .btn-list {
    flex: 1;
    background-color: transparent;
    color: white;
    border: 0px solid white;
    font-family: "Poppins";
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
    font-size: 12px;
    /* font-weight: bold; */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    width: 234px;
    height: 180px;
}

.popup .btn-primary:hover {
    background-color: rgb(120, 179, 241);
    color: rgb(29, 4, 255);
}

/* Atur garis pemisah */
.popup hr {
    border: 1px solid #ccc;
    margin: 20px 0;
}

.popup p {
    font-size: 20px;
    font-weight: bold;
    color: #09326f;
    /* text-transform: uppercase; */
    margin-bottom: 20px;
    font-family: "Poppins";
}

.popup .custom-button {
    background-color: transparent;
    border: 2px solid #007bff;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.popup .custom-button:hover {
    background-color: #007bff;
    color: #fff;
}

/* Media query for mobile devices */
@media (max-width: 767px) {
    .popup {
        margin-top: -6%;
        margin-bottom: -25%;
    }

    .popup .button-container {
        flex-direction: column;
        align-items: center;
    }

    .popup .custom-text {
        text-align: center;
        margin-left: 0;
        margin-top: 10;
        font-size: 20px;
    }

    .popup .custom-button {
        margin-left: 0;
        margin-bottom: 0px;
        margin-bottom: 0px;
    }

    .popup .btn-group {
        flex-direction: column;
    }

    .popup .btn-group button {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .popup .modal-content {
        padding: 10px;
    }

    .popup .modal-title {
        text-align: center;
        margin-bottom: 10px;
    }

    .popup p {
        text-align: center;
        margin-bottom: 10px;
    }
}

/* ===========youtube============== */
/* CSS untuk tampilan desktop */
/* styles.css */

.youtube {
    background: url("../img/bg/yt1.png");
    background-size: cover;
    position: relative;
    /* text-align: center; */
    margin-top: -100px;
    /* padding: 50px 0; */
    font-family: "Inter", sans-serif;
}

.video-container {
    /* border: 2px solid #000; */
    /* background: url("../img/bg/yt4.png");
background-size: cover; */
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); */

    margin-bottom: -30px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    /* border-radius: 50px; */

    z-index: 2;
}

.video-container2 {
    /* border: 2px solid #000; */
    /* background: url("../img/bg/yt4.png");
background-size: cover; */
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
align-items: center;
justify-content: center; */
    /* border-radius: 50px; */
    order: 2;
    /* Set the order to 2 to display it behind .video-description */
    border-radius: 27px;
    flex: 1;
    /* Membuat elemen ini memenuhi sebagian besar ruang tersedia */
    margin-bottom: -23px;
    background-color: white;
    height: 150%;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio for responsive sizing */
    order: 2;
    /* Set the order to 2 to display it behind .video-description */
    border-radius: 27px;
    flex: 1;
    /* Membuat elemen ini memenuhi sebagian besar ruang tersedia */
    margin-bottom: -23px;
    border-radius: 27px;
    background: #a3bce7;
    height: 150%;
}

iframe {
    border-radius: 5px;
    position: absolute;
    margin-left: 20px;
    top: 10px;
    left: 0;
    width: 93%;
    height: 93%;
}

.video-description {
    /* border-radius: 27px; */
    margin-top: -70px;
    order: 1;
    /* Set the order to 1 to display it in front */
    border-radius: 27px;
    background: linear-gradient(269deg, #1c4cf2 0.4%, #4692eb 50.97%);
    width: 913px;
    height: 159px;
    flex-shrink: 0;
    z-index: -99;
    display: grid;
    grid-template-columns: 1fr auto;
    /* Kolom teks dan tombol */
    align-items: center;
    /* Memposisikan konten ke tengah vertikal */
    padding: 30px;
    /* height: 100%; */
    width: 100%;
    /* Lebar deskripsi */
}

.video-description p {
    margin-top: 60px;
    color: #f7f7f7;
    font-family: "Manrope";
    font-size: 20.928px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0px;
    color: #fff;
    grid-column: 1;
    /* Menempatkan paragraf di kolom pertama */
}

.join-button {
    display: inline-block;
    margin-right: 0px;
    padding: 8px 8px;
    background-color: rgb(232, 230, 230);
    color: #100f0f;
    border-radius: 33.5px;
    text-decoration: none;
    font-size: 15px;
    align-self: flex-end;
    margin-bottom: -11px;
    grid-column: 2;
    border: 8px solid rgba(74, 143, 166, 0.5);
    font-family: "Manrope";
    /* font-size: 22.076px; */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /* Menambahkan bayangan */
    /* box-shadow:  0px 0px 6px rgb(255, 255, 255); Horisontal offset, Vertical offset, Blur radius, Warna bayangan */
}

/* .join-button:hover {
background-color: #afb1b2;

} */

.left-background,
.right-background {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    /* Half of the container width for each side */
    background-size: cover;
    background-position: center;
    opacity: 1;
    /* Adjust opacity as needed, make sure it's not too low */
    z-index: -1;
    /* Ensure that the background images are behind other content */
}

.left-background {
    left: 0;
    background-image: url("../img/bg/yt2.png");
    /* Replace with your left image path */
}

.right-background {
    right: 0;
    background-image: url("../img/bg/yt3.png");
    /* Replace with your right image path */
}

#youtube .left-image {
    position: absolute;
    float: left;
    margin-top: -120px;
    margin-left: -30px;
    /* top: 0; */
    left: 0;
    /* Position the image on the right side */
    /* You can adjust the top, right, width, and height as needed */
    width: 410px;
    height: auto;
    z-index: 1;
    /* Adjust the z-index as needed */
    /* Add any other styles you want for the image */
}

#youtube .right-image {
    position: absolute;
    float: right;
    margin-top: -50px;
    /* top: 0; */
    right: 0;
    /* Position the image on the right side */
    /* You can adjust the top, right, width, and height as needed */
    width: 410px;
    height: auto;
    z-index: 1;
    /* Adjust the z-index as needed */
    /* Add any other styles you want for the image */
}

/* paketmenrtor */

.paketmentora {
    margin-top: -50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Ruang di sekitar elemen */
    /* Warna abu-abu latar belakang */
}

/* .paketmentorbg {
width: 90%;
} */
.paketmentor {
    margin-top: -50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Ruang di sekitar elemen */
    background-color: #f0f0f0;
    /* Warna abu-abu latar belakang */
}
.paketmentor .container {
    display: flex;
    justify-content: flex-end;
}

/* card */
.kotak {
    left: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 21px;
    background: #fff;
    box-shadow: 5px 7px 18px 0px rgba(0, 0, 0, 0.14),
        19px 28px 33px 0px rgba(0, 0, 0, 0.12),
        42px 62px 45px 0px rgba(0, 0, 0, 0.07),
        74px 111px 53px 0px rgba(0, 0, 0, 0.02),
        116px 173px 58px 0px rgba(0, 0, 0, 0);
    padding: 20px;
    margin: 10px;
    width: 320px;
    flex-direction: column;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.kotak .deskripsi {
    padding: 0px;

    /* background-color: #f7f7f7; */
    /* text-align: center; */
    margin-top: 10px;
    /* position: relative; */
    /* border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc; */
    /* overflow: hidden; */
    color: #1e1e1e;
    font-family: "Manrope";
    font-size: 16.5px;
    font-style: normal;
    /* font-weight: 700; */
    line-height: normal;
}

.kotak .keterangan {
    padding: 10px;
    background-color: #f7f7f7;
    text-align: center;
    margin-top: 10px;
    position: relative;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    overflow: hidden;
}

.kotak .keterangan::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* left: 50%; */
    width: 2px;
    /* background-color: #ccc; */
    transform: translateX(-50%);
}

/* .keterangan .teks-kiri, */
.keterangan .teks-kanan {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    text-align: center;
}

.keterangan .teks-kiri {
    left: 0;
    font-weight: bold;
}

.keterangan .teks-kanan {
    right: 0;
    font-style: italic;
}

/* .keterangan .clear {
  clear: both;
  margin-top: 10px;
} */

.segitiga {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: #f7f7f7; */
    border-radius: 10px;
    padding: 20px;
}

.kiri-atas h3,
.kanan-atas p {
    margin: 0;
}

.kiri-atas,
.kanan-atas {
    width: 50%;
    text-align: center;
}

.bawah {
    margin-top: 10px;
}

.kiri-atas {
    color: #58bb68;
    font-family: "Manrope";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-left: -15px;
    text-align: left;
}

.kanan-atas {
    /* text-align: left; */
    color: #1e1e1e;
    font-family: "Manrope";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: right;
}

/* CSS untuk tombol di luar kotak */
.paketmentor .tombol-pesan {
    text-align: center;
    margin-top: 20px;
    /* Jarak antara kotak dan .paketmentor  tombol */
}

.paketmentor .tombol-pesan button {
    padding: 10px 20px;
    background-color: #007bff;
    /* Warna latar belakang .paketmentor  tombol */
    color: #fff;
    /* Warna teks .paketmentor  tombol */
    border: none;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
    /* Efek hover */
}

.paketmentor .tombol-pesan button:hover {
    background-color: #0056b3;
    /* Warna latar belakang tombol saat dihover */
}

.tombol-judul {
    text-align: center;
    margin-top: 20px;
    /* Jarak antara kotak dan judul-tombol */
}

.paketmentor .judul-tengah {
    text-align: center;
    /* Pusatkan judul */
    color: #3c3c3c;
    font-family: "Manrope";
    /* font-size: 45.962px; */
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 10px;
    /* Jarak antara judul dan tombol */
}

.paketmentor.tombol-judul button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.paketmentor.tombol-judul button:hover {
    background-color: #0056b3;
}

.team-member .member-info h4 {
    border-bottom: 1px dashed #999;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.team-member hr {
    border-style: dashed;
    border-width: 2px;
    border-color: #999;
    /* Ganti dengan warna yang Anda inginkan */
    margin-top: -10px;
    /* margin: 10px 0; */
}

#paketmentor ul.deskripsi {
    list-style: none;
    padding: 0;
}

#paketmentor ul.deskripsi li {
    position: relative;
    /* Position relative to allow absolute positioning of the checkmark image */
    padding-left: 25px;
    /* Add left padding for the checkmark image */
    margin-bottom: 5px;
}

/* centang */
#paketmentor ul.deskripsi li::before {
    content: "";
    width: 20px;
    height: 20px;

    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 7px;
    transform: translateY(0);

    /* margin-right: 30px;
margin-left: 10px;
/* <i class="fa-solid fa-check"></i>  */
}

/* konsultasi */

.konsultasi .container h3 {
    color: #09326f;
    text-align: center;
    font-family: Poppins;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px;
    /* 130% */
}

.container .team-slider .row .konsultasi-content .member-info p {
    color: #212121;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    margin-top: -40px;
    width: 180px;
    /* height: 89px; */
    /* 108.333% */
}

.konsultasi .container .team-slider .row {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    text-align: center;
    /* Center text within the element */
}

.container .team-slider .row .konsultasi-content .member-info {
    margin-top: 10px;
    /* font-weight: 700; */
    /* margin-bottom: 5px; */
    /* font-size: 18px; */
    color: #222222;
}

.container .team-slider .row .konsultasi-content .member-info h4 {
    color: #09326f;
    text-align: center;
    font-family: "Poppins";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px;
    /* 216.667% */
}

.gambarkampus .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gambarkampus .row {
    display: flex;
    justify-content: center;
}

.gambarkampus .image {
    height: 120px;
    width: auto;
    margin: 10px 40px 10px 40px;
}

#testibaru {
    font-family: Arial, sans-serif;
    /* background-color: #f2f2f2; */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    /* margin-top: -60px; */
}

#testicok {
    font-family: Arial, sans-serif;
    /* background-color: #f2f2f2; */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    /* margin-top: -60px; */
}

.profile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    height: 80%;
    /* Ubah tinggi container agar selalu penuh tinggi layar */
}

.profile-container p {
    color: #09326f;
    text-align: center;
    font-family: Poppins;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px;
    /* 130% */
}

.profile-container p1 {
    color: #4f4b4b;
    font-family: "Manrope";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: -20px;
}

.profile-slider {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    justify-content: center;
    border-radius: 50px;
    align-items: center;
    width: 90%;
    height: 20%px;
    /* Agar selalu mengambil lebar penuh */
    transition: transform 0.5s ease-in-out;
}

.profile {
    /* background-color: #fff;
border-radius: 10px; */
    border-radius: 44px;
    background: linear-gradient(180deg, #09326f 0%, #0064ff 100%);
    width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    margin-right: 20px;
    transition: transform 0.5s ease;
    min-height: 280px;
    color: #fff;
    font-family: Manrope;
    font-size: 38px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

/* .profile .profile-info h1{
color: #FFF;
font-family: "Manrope";
font-size: 25px;
font-style: normal;
font-weight: 500;
line-height: normal;
} */

/* .profile:hover {
transform: translateX(100px);
} */

.profile .additional-info {
    position: absolute;
    top: 0;
    left: -200px;
    /* Geser elemen tambahan ke kiri untuk sembunyi */
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
    opacity: 0;
    /* Atur opacity ke 0 untuk menyembunyikan elemen */
    transition: all 0.5s ease;
    /* Tambahkan efek transisi untuk tampilan halus */
}

.profile:hover .additional-info {
    left: 0;
    /* Geser elemen tambahan ke posisi normal saat dihover */
    opacity: 1;
    /* Ubah opacity menjadi 1 untuk munculkan elemen */
}

.profile-image {
    width: 150px;
    height: auto;
    border-radius: 50%;
    border: 0px solid #333;
    margin-right: 10px;
    margin-top: 50px;
    align-self: flex-start;
    position: center;
}

.profile-info {
    text-align: left;
    flex-grow: 1;
    margin-left: 20px;
}

.profile-info h1 {
    font-size: 16px;
    margin-bottom: 5px;
    color: #fff;
    font-family: "Manrope";
    /* font-size: 25px; */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.profile-info p2 {
    font-size: 14px;
    margin: 0;
    color: #fff;
    font-family: Manrope;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    width: 1222.457px;
    height: 200.162px;
    flex-shrink: 0;
}
.gabung {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Sesuaikan jarak bawah sesuai kebutuhan */
}

.profile-image {
    margin-right: 20px; /* Sesuaikan jarak antara gambar dan teks sesuai kebutuhan */
    max-width: 100px; /* Sesuaikan lebar maksimum gambar sesuai kebutuhan */
    height: auto;
}

.profile-info {
    color: #fff;
    font-family: Manrope;
}

.profile-info h1 {
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    margin-bottom: 30px; /* Sesuaikan jarak antara judul dan paragraf sesuai kebutuhan */
}

.profile-info p {
    color: white;
    font-size: 22px;
    font-weight: normal;
    text-align: left;
    line-height: 1.4;
}

.comment {
    background-color: #f0f0f0;
    width: 920px;
    padding: 20px;
    margin-left: 20px;
    position: relative;
}

.triangle {
    width: 5px;
    height: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f0f0f0;
    position: absolute;
    bottom: -10px;
    left: 20px;
}

.gabung {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
}

.comment-text {
    text-align: left;
}

.comment-text p {
    font-size: 14px;
    margin: 0;
}

.right-info {
    text-align: left;
    margin-left: 10px;
    flex-grow: 1;
}

.profile-navigation {
    opacity: 0;
    margin-top: 20px;
    text-align: center;
    float: right;
    right: 0;
    /* border-radius: 50px; */
}

.profile-navigation button {
    background-color: #007bff;
    color: #fff;
    /* padding: 10px 20px; */
    border: none;
    border-radius: 50px;
    margin: 0 10px;
    cursor: pointer;
}

.profile-navigation button:hover {
    background-color: #0056b3;
}

/* popup bawah  */
.popup-bro {
    position: fixed;
    padding: 5px 20px;
    bottom: 10px;
    right: 15px;
    border-radius: 26px 26px 0px 26px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0px 10px 23px 0px rgba(0, 0, 0, 0.29),
        0px 42px 42px 0px rgba(0, 0, 0, 0.26),
        0px 94px 56px 0px rgba(0, 0, 0, 0.15),
        0px 167px 67px 0px rgba(0, 0, 0, 0.04),
        0px 261px 73px 0px rgba(0, 0, 0, 0.01);
    backdrop-filter: blur(25px);
    z-index: 9999;
    /* Puts the popup above other elements */
    display: none;
    width: 347px;
    height: 120px;
    flex-shrink: 0;
    color: #000;
}

.popup-bro {
    position: fixed;
    padding: 5px 20px;
    border-radius: 26px 26px 0px 26px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0px 10px 23px 0px rgba(0, 0, 0, 0.29),
        0px 42px 42px 0px rgba(0, 0, 0, 0.26),
        0px 94px 56px 0px rgba(0, 0, 0, 0.15),
        0px 167px 67px 0px rgba(0, 0, 0, 0.04),
        0px 261px 73px 0px rgba(0, 0, 0, 0.01);
    backdrop-filter: blur(25px);
    z-index: 9999;
    /* Puts the popup above other elements */
    display: none;
    width: 347px;
    height: 120px;
    flex-shrink: 0;
    color: #000;
    animation: slideUpDown 8s ease-in-out infinite; /* Adjusted total duration to 8 seconds */
}

@keyframes slideUpDown {
    0%,
    37.5% {
        bottom: -120px;
    }
    50%,
    87.5% {
        bottom: 10px;
    }
    100% {
        bottom: -120px;
    }
}

/* Add CSS for the month and date boxes */
/* .month-box,
.date-box {
} */
#popup-text {
    color: #3c3c3c;
    font-family: "Manrope";
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.popup-text strong {
    color: #000000;
    font-family: "Manrope";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Styles for the month and date boxes */
.month-box,
.date-box {
    flex: 1;
    margin-top: -15px;
    padding: 10px;
    text-align: center;
    border: transparent;
    float: left;

    /* border: 1px solid #ccc;
float: left;
margin-top: 30px; */
}

/* Add CSS for the text on the right */
/* border: transparent;
float: left;
} */

/* Styling for the month box */
.month-box {
    color: #3c3c3c;
    font-family: "Manrope";
    font-size: 15.286px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

/* Styling for the date box */
.date-box {
    text-align: center;
    width: 86px;
    height: 39px;
    flex-shrink: 0;
    /* border-radius: 16px; */
    border-radius: 16px 0px 16px 16px;
    background: #fbcc62;
    color: #3c3c3c;
    font-family: "Manrope";
    font-size: 20.526px;
    font-style: normal;
    font-weight: 800;
    line-height: 39px;
    /* Mengatur posisi angka tanggal secara vertikal */
    padding: 0 5px;
    /* Mengatur posisi angka tanggal secara horizontal */
}

/* Styling for the text on the right */
.popup-text {
    flex: 2;
    margin-top: -10px;
    text-align: left;
}

.popup-content-bro {
    padding: 20px;
    margin-top: -13px;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-title {
    font-size: 20px;
    font-weight: bold;
    color: #3c3c3c;

    font-family: "Manrope";
    font-size: 20.526px;
    font-style: normal;
    font-weight: 800;
    /* line-height: normal; */
    margin: 0;
}

.popup-close {
    font-size: 24px;
    cursor: pointer;
    color: #000000;
}

.popup-close:hover {
    color: #000000;
}

.popup-content-bro p {
    font-size: 16px;
    margin: 10px 0;
    color: #000;
}

.popup-content-bro p strong {
    font-weight: bold;
    margin-right: 5px;
    color: #3c3c3c;
    font-family: "Manrope";
    font-size: 20.526px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /* color: #3498db; */
}

/* ----------Artikel---------- */

/*--------------------------------------------------------------
# Artikel
--------------------------------------------------------------*/

/* .container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
} */

.article {
    display: flex;
    border: 1px solid #ccc;
    margin: 20px;
    padding: 10px;
    max-height: 180px;
    /* Set a maximum height for the articles */
    overflow: hidden;
}

.article-image {
    flex: 0 0 100px;
}

.article-image img {
    max-width: 100%;
    max-height: 75px;
    object-fit: cover;
}

.article-content {
    flex: 1;
    padding: 10px;
}

.article-title {
    font-size: 18px;
    margin: 0;
}

.article-summary {
    font-size: 14px;
    margin-top: 5px;
}

.read-more {
    display: block;
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    margin-top: 5px;
}

.alignleft {
    float: left;
    margin-left: 0px;
}

.aligncenter {
    display: block;
    margin: 10px auto;
}

.alignright {
    float: right;
    margin-left: 10px;
}

.floatleft {
    float: left;
}

.floatright {
    float: right;
}

.content_area {
    margin-top: 25px;
    margin: 0 auto;
    width: 990px;
}

.main_content {
    width: 970px;
}

.left_coloum {
    width: 450px;
}

.single_left_coloum_wrapper {
    position: relative;
    /* margin-left: -20px; */
    /* margin-bottom: 30px; */
    overflow-x: hidden;
}

.single_left_coloum_wrapper .title {
    margin-left: 10px;
}

.title {
    border-bottom: 4px;
    font-family: "bebasregular";
    font-size: 20px;
    word-spacing: 2px;
}

.more {
    background: url("images/plus.png") no-repeat scroll 57px 9px #cf0000;
    color: #fff;
    display: block;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 20px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 10px;
}

.popular_more {
    background: url("images/plus.png") no-repeat scroll 57px 12px #cf0000;
    color: #fff;
    display: block;
    font-size: 10px;
    font-weight: bold;
    padding: 7px 20px;
    text-transform: uppercase;
    width: 74px;
    margin-top: 10px;
}

.single_left_coloum {
    margin-left: 10px;
    width: 173px;
}

/* .readmore, .single_cat_right_content_meta span{color:#CF0000; font-size:10px; text-transform:uppercase; font-weight:bold; margin-right:20px} */
/* .readmore:hover, .single_cat_right_content_meta span:hover{color:#CF0000; text-decoration:underline} */
/* .gallery{} */
.gallery img {
    margin-bottom: 10px;
    margin-left: 10px;
    width: 141px;
}

.single_cat_left_content {
    border-bottom: 1px dotted #000;
    margin-left: 10px;
    width: 220px;
}

.single_cat_left_content h3 {
    font-size: 15px;
}

.single_cat_left_content_meta {
    font-size: 11px;
}

/* .single_cat_left_content_meta span{color:#cf0000} */
.right_coloum {
    width: 300px;
}

.single_right_coloum {
    margin-bottom: 20px;
    width: 350px;
}

.single_right_coloum ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.single_right_coloum ul li {
    border-bottom: 1px dotted #ddd;
}

.single_right_coloum ul li:last-child {
    border-bottom: none;
}

.single_cat_right_content {
    padding-bottom: 5px;
    margin-bottom: 9px;
}

.single_cat_right_content h3 {
    margin-top: 10px;
    font-size: 16px;
}

.single_cat_right_content p {
    font-size: 14px;
    /* Ubah ukuran sesuai kebutuhan */
}

.single_cat_right_content_meta {
    margin-top: -15px;
    color: rgb(190, 187, 187);
}

.single_left_coloum img {
    width: 204px;
    height: 132px;
    border-radius: 10px;
    object-fit: cover;
}

.scrollable_left_coloum {
    display: flex;
    width: max-content;
    overflow: hidden;
}

/* .single_left_coloum {
margin-left: 10px;
width: 143px;
} */
.left_coloum {
    width: 650px;
    overflow: hidden;
    position: relative;
    /* margin-left: -50px; */
}

.single_left_coloum_wrapper {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.scrollable_left_coloum {
    white-space: nowrap;
    position: relative;
}

.single_left_coloum {
    /* width: 204px; */
    display: inline-block;
    vertical-align: top;
    /* overflow: hidden;  */
    /* overflow-wrap: break-word; */
}

.single_left_coloum p {
    white-space: normal;
    /* Kembali ke spasi normal */
    word-wrap: break-word;
    color: #3c3c3c;
    font-family: "Manrope";
    font-size: 17.822px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 10px;
}

.left-scroll-button,
.left-scroll-buttonn {
    cursor: pointer;
    position: absolute;
    top: 17%;
    transform: translateY(-50%);
    opacity: 0.7;
    /* Mengatur tingkat transparansi */
    background-color: transparent;
    /* Menghapus latar belakang */
    font-size: 50px;
    /* Mengatur ukuran font */
    border-radius: 50%;
    color: red;
}

.left-scroll-button {
    border-radius: 50%;
    left: 0;
}

.left-scroll-button,
.right-scroll-button {
    cursor: pointer;
    position: absolute;
    top: 17%;
    transform: translateY(-50%);
    opacity: 0.7;
    /* Mengatur tingkat transparansi */
    background-color: transparent;
    /* Menghapus latar belakang */
    font-size: 50px;
    /* Mengatur ukuran font */
    border-radius: 50%;
    color: red;
}

.left-scroll-button {
    border-radius: 50%;
    left: 0;
}

.right-scroll-button {
    right: 0;
}

.right-scroll-button:hover {
    color: rgb(0, 0, 0);
    /* Ganti dengan warna yang Anda inginkan saat dihover */
}

.right_image {
    float: right;
    margin-left: 10px;
    /* Jarak antara gambar dan teks */
}

.left_content {
    overflow: hidden;
    /* Ini akan menghindari masalah float */
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.right_image img {
    width: 181px;
    height: 109px;
    border-radius: 7px;
}

.right-scroll-button1 {
    cursor: pointer;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    opacity: 0.7;
    /* Mengatur tingkat transparansi */
    background-color: transparent;
    /* Menghapus latar belakang */
    font-size: 50px;
    /* Mengatur ukuran font */
    border-radius: 50%;
    color: red;
}

.left-scroll-button1 {
    cursor: pointer;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    opacity: 0.7;
    /* Mengatur tingkat transparansi */
    background-color: transparent;
    /* Menghapus latar belakang */
    font-size: 50px;
    /* Mengatur ukuran font */
    border-radius: 50%;
    color: red;
}

.left-scroll-button1 {
    cursor: pointer;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    opacity: 0.7;
    /* Mengatur tingkat transparansi */
    background-color: transparent;
    /* Menghapus latar belakang */
    font-size: 50px;
    /* Mengatur ukuran font */
    border-radius: 50%;
    color: red;
}

.left-scroll-button {
    border-radius: 50%;
    left: 0;
}

.right-scroll-button1 {
    right: 0;
}

.right-scroll-button1:hover {
    color: rgb(0, 0, 0);
    /* Ganti dengan warna yang Anda inginkan saat dihover */
}

.single_left_coloumb img {
    width: 204px;
    height: 350px;
    border-radius: 10px;
    object-fit: cover;
}

.single_left_coloumb {
    margin-left: 10px;
    width: 173px;
}

.single_left_coloumb {
    width: 204px;
    display: inline-block;
    vertical-align: top;
    /* overflow: hidden;  */
    /* overflow-wrap: break-word; */
}

#berita h4 {
    margin-left: 10px;
    color: #3c3c3c;
    font-family: "Manrope";
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #3c3c3c;
    font-family: "Manrope";
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* .text-container {
display: flex;
flex-direction: column;
align-items: flex-start;
} */

.text-container p {
    margin-top: 10px;
    color: white;
    font-size: 15px;
    border-left: 2px solid white; /* Menambahkan garis sebelah kiri teks */
    padding-left: 20px; /* Jarak antara teks dengan garis */
}

/* Css Lanjutan Pak dimas */

/* Responsif untuk layar kecil */
@media (max-width: 768px) {
    .icon-box {
        margin: 10px;
        padding: 15px;
    }

    .icon-box .labels {
        top: 10px;
        left: 10px;
    }

    .icon-box .title {
        font-size: 14px;
    }

    .icon-box .title p {
        font-size: 10px;
        margin-top: -10px;
    }

    .icon-box .description {
        font-size: 10px;
    }

    .icon-box img {
        bottom: -5px;
        right: 5px;
    }
}

.question {
    border-left: 10px solid #007bff; /* Warna garis biru dan lebar yang diinginkan */
    padding-left: 10px; /* Jarak antara garis dan teks */
}

/* .member-infoo {
  border-radius: 80px;
  background: linear-gradient(180deg, #3E87F8 0%, #09326F 100%);
  height: 30px;
  width: 300px;
  position: relative;
  width: 240px;

} */

.konsultasi-content h4 {
    color: #3e87f8;
    font-size: 18px;
    font-family: Montserrat;
    font-weight: 700;
    left: 0;
    line-height: 46.25px;
    word-wrap: break-word;
}

.konsultasi-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Pusatkan kontennya secara horizontal */
}

.konsultasi-content h4,
.konsultasi-content p {
    text-align: center; /* Pusatkan teks secara horizontal */
    margin: 0; /* Hapus margin bawaan dari <h4> dan <p> */
}

.member-img {
    text-align: center; /* Pusatkan gambar secara horizontal */
}

.member-img img {
    max-width: 100%; /* Pastikan gambar tidak melebihi lebar container */
    height: auto; /* Pertahankan rasio aspek gambar */
}

.btn-list {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s;
    cursor: pointer;
}

.btn-list:hover {
    background-color: #555; /* Ganti dengan warna yang diinginkan saat tombol di-hover */
}

.btn-list img {
    transition: transform 0.3s;
}

.btn-list:hover img {
    transform: scale(
        1.1
    ); /* Ganti dengan skala yang diinginkan saat tombol di-hover */
}

.btn-list:hover div {
    color: white; /* Ganti dengan warna teks yang diinginkan saat tombol di-hover */
}

.deskripsi {
    max-height: 150px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    position: relative;
    padding-left: 25px;
}

.deskripsi li {
    display: flex;
    /* align-items: center; */
    margin-bottom: 10px;
}

.deskripsi i {
    margin-right: 10px;
}

.deskripsi::-webkit-scrollbar {
    width: 5px;
}

.deskripsi::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.table-no-border {
    border-collapse: collapse;
    width: 100%;
    margin-left: -1px;
    margin-right: -1px;
}

.table-no-border th,
.table-no-border td {
    border: 1px solid #dee2e6;
    border-width: 1px;
    padding: 8px;
    text-align: left;

    /* background-color: #f7f7f7; */
}

.table-no-border td {
    border: 1px solid #dee2e6;
    border-width: 1px;
    border-left: none;
    border-right: none;
}

.table-no-border th:first-child,
.table-no-border td:first-child {
    border-left: none;
}

.table-no-border th:last-child,
.table-no-border td:last-child {
    border-right: none;
}

/* Responsive */
/* Add this CSS to align the divs */
.blok {
    display: flex;
    align-items: stretch;
}

.contentbolo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gambareo {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .row {
        justify-content: center;
    }
}

.centered-content img {
    max-width: 100%;
    height: auto;
    margin-left: -15px;
    margin-top: 5px;
    margin-bottom: 10px; /* Sesuaikan nilai ini agar gambar tidak menumpuk */
    border: 1px solid #000; /* Ganti #000 dengan warna border yang diinginkan */
    border-radius: 10%;
    box-sizing: border-box; /* Untuk memastikan border dan padding tidak menambah lebar elemen */
}

@media (min-width: 768px) {
    .centered-content img {
        max-width: 300px;
        margin-left: 0;
        margin-top: 10px;
        margin-bottom: 0; /* Mengatur margin-bottom menjadi 0 pada desktop */
    }
}

.blue-text {
    color: blue;
}

.green-text {
    color: #6cc37a;
}

.juduldua {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -170px;
}

.juduldua img {
    max-width: 38%;
    height: auto;
    margin-left: 5px; /* Jarak antara gambar dan teks */
}

.juduldua p {
    font-family: Montserrat;
    font-size: 18px;
    color: #000;
    margin-top: 0; /* Menghilangkan margin atas */
}

.youtubeeeeeee {
    /* background-color: #fff;
  border-radius: 10px; */
    /* border-radius: 44px; */
    border-radius: 50px;
    background: linear-gradient(
        180deg,
        #fe413e 0%,
        #fd5c2e 99.99%,
        rgba(0, 0, 0, 0) 100%
    );
    width: 999px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    margin-right: 20px;
    transition: transform 0.5s ease;
    /* min-height: 280px; */
    color: #fff;
    font-family: Manrope;
    font-size: 38px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.button-container {
    display: flex;
    align-items: center;
}

.btnyt {
    border-radius: 50%;
    width: 89px;
    height: 89px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-right: 10px; /* Jarak antara button dan SVG */
}

svg {
    width: 89px;
    height: 89px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
}

/* .accordion-header{
  margin-bottom: 25px;
  border-radius: 100%;
}



/* .accordion-item {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
} */

/* .accordion-button {
  background-color: #f8f9fa;
  color: #343a40;
  border: none;
  text-align: left;
  padding: 15px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.accordion-button:hover {
  background-color: #3e87f8;
  color: white;
} */

/* .accordion-collapse {
  padding: 15px;
}

.accordion-body {
  margin-top: -30px;

}  */

.myaccordion {
    max-width: 500px;
    margin: 50px auto;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

    margin-left: 30px;
}
.myaccordion .card,
.myaccordion .card:last-child .card-header {
    border: none;
}
.myaccordion .card-header {
    border-bottom-color: #edeff0;
    background: transparent;
}
.myaccordion .fa-stack {
    font-size: 18px;
}
.myaccordion .btn {
    width: 100%;
    font-weight: bold;
    color: #004987;
    padding: 0;
}
.myaccordion .btn-link:hover,
.myaccordion .btn-link:focus {
    text-decoration: none;
}
.myaccordion li + li {
    margin-top: 10px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300vh;
}

.container {
    position: relative;
}

.testimonials-slider {
    margin-top: 20px;
}

.container img {
    /*width: 100%;*/
    height: auto;
    display: block;
}

.alz {
    text-align: center;
}

.custom-btn-buy {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    background-color: #4caf50;
    border-radius: 5px;
}

.custom-btn-buy:hover {
    background-color: #45a049;
}

.pro {
    width: 125px;
    height: auto;
    border-radius: 50%;
    border: 0px solid #333;
    position: absolute;
    /*    top: 50%;*/
    /*margin-top: -150px;*/

    /*    left: 50%;*/
    transform: translate(-50%, -50%);
    background-color: white;
}

/*   img {
          max-width: 100%;
          height: auto;
      }*/

/*--------------------------------------------------------------
# Section Kotak
--------------------------------------------------------------*/
#kotak-skripsi {
    font-family: Arial, sans-serif;
    /* background-color: #f2f2f2; */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    /* margin-top: -60px; */
}

.kotak-skripsi .profile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    height: 100%;
    /* Ubah tinggi container agar selalu penuh tinggi layar */
}

.kotak-skripsi .profile-container p {
    color: white;
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px;
    /* 130% */
}

.kotak-skripsi .profile-container p1 {
    color: #4f4b4b;
    font-family: "Manrope";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: -20px;
}

.kotak-skripsi .profile-slider {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Agar selalu mengambil lebar penuh */
    transition: transform 0.5s ease-in-out;
}

.kotak-skripsi .profile {
    /* background-color: #fff;
border-radius: 10px; */
    z-index: 1;
    border-radius: 44px;
    background-image: url("../img/bg/skripsi1.png");
    background-repeat: no-repeat;
    background-size: cover;
    /* background: linear-gradient(180deg, #09326F 0%, #0064FF 100%); */
    width: 1000px;
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    margin-right: 20px;
    transition: transform 0.5s ease;
    min-height: 280px;
    color: #fff;
    font-family: Manrope;
    font-size: 38px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

/* .profile .profile-info h1{
color: #FFF;
font-family: "Manrope";
font-size: 25px;
font-style: normal;
font-weight: 500;
line-height: normal;
} */

/* .profile:hover {
transform: translateX(100px);
} */

.kotak-skripsi .profile .additional-info {
    position: absolute;
    top: 0;
    left: -200px;
    /* Geser elemen tambahan ke kiri untuk sembunyi */
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
    opacity: 0;
    /* Atur opacity ke 0 untuk menyembunyikan elemen */
    transition: all 0.5s ease;
    /* Tambahkan efek transisi untuk tampilan halus */
}

.kotak-skripsi .profile:hover .additional-info {
    left: 0;
    /* Geser elemen tambahan ke posisi normal saat dihover */
    opacity: 1;
    /* Ubah opacity menjadi 1 untuk munculkan elemen */
}

.kotak-skripsi .profile-image {
    width: 600px;
    height: auto;
    margin-right: 10px;
    margin-top: -5px;
    align-self: flex-start;
    position: center;
}

.kotak-skripsi .profile-info {
    text-align: center;
    flex-grow: 1;
    margin-left: 20px;
}

.kotak-skripsi .profile-info h1 {
    font-size: 16px;
    margin-bottom: 5px;
    color: #fff;
    font-family: "Manrope";
    /* font-size: 25px; */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    align-content: center;
    align-items: center;
}

.kotak-skripsi .profile-info p {
    font-size: 30px;
    margin-bottom: 5px;
    color: #fff;
    /* font-family: "Manrope"; */
    /* font-size: 25px; */
    /* font-style: normal; */
    /* font-weight: 500; */
    line-height: normal;
    text-align: left;
    align-items: center;
    align-content: center;
    /* margin-right: 50px; */
    margin-bottom: 50px;
    color: var(--White, #fff);
    font-family: Lato;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    margin-left: -120px;
    margin-top: -25px;
    /* line-height: 85.846px; */
    /* 120% */
    letter-spacing: -1.431px;
    text-transform: capitalize;
}

.kotak-skripsi .profile-info h2 {
    color: #b5c1d4;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 35.769px;
    margin-left: -250px;
    margin-top: 20px;
    /* 150% */
}

.kotak-skripsi .profile-info p2 {
    font-size: 14px;
    margin: 0;
    color: #fff;
    font-family: Manrope;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    width: 1222.457px;
    height: 200.162px;
    flex-shrink: 0;
}

.kotak-skripsi .gabung {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    /* Sesuaikan jarak bawah sesuai kebutuhan */
}

.kotak-skripsi .profile-image {
    margin-right: 20px;
    /* Sesuaikan jarak antara gambar dan teks sesuai kebutuhan */
    max-width: 1500px;
    /* Sesuaikan lebar maksimum gambar sesuai kebutuhan */
    height: auto;
}

.profile-info {
    color: #fff;
    font-family: Manrope;
}

.profile-info h1 {
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    margin-bottom: 30px;
    /* Sesuaikan jarak antara judul dan paragraf sesuai kebutuhan */
}

.profile-info p {
    color: white;
    font-size: 22px;
    font-weight: normal;
    text-align: left;
    line-height: 1.4;
}

.kotak-skripsi .profile .button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50px;
    font-family: Lato;
    /* background-color: white; */
    background: #3e87f8;
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    margin-left: -120px;
    /* transition: background-color 0.3s, opacity 0.3s; */
}

.kotak-skripsi .profile .button:hover {
    background-color: red;
    opacity: 0.8;
}

.kotak-skripsi .profile .button i {
    font-size: 30px;
}

/*--------------------------------------------------------------
#  Mentor Skripsi Section
--------------------------------------------------------------*/
#mentor-skripsi {
    background-color: #fff;
}

/* .mentor-skripsi .container .section-title {
color: var(--Midnight-Blue-950, #09326F);

text-align: center;
font-family: Montserrat;
font-size: 80px;
font-style: normal;
font-weight: 700;
line-height: 100.9%;

letter-spacing: -1px;

} */

.mentor-skripsi .container .section-title {
    color: var(--Midnight-Blue-950, #09326f);

    /* color: #FFF; */
    text-align: center;
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    /* font-size: 45px; */
    line-height: 125%;
    /* 53.596px */
    letter-spacing: -1px;
}

.mentor-skripsi .container .section-title h4 {
    font-size: 22px;
}

.mentor-img {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
    margin: 20px;
}

.card-img {
    flex: 0 0 22%;
    /* 25% lebar setiap kartu */
    /* box-sizing: border-box; */
    width: 220px;
    margin: 25px;
    overflow: hidden;
    border-radius: 150px 40px 40px 40px;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.4) 100%
        ),
        url(<path-to-image>), lightgray 50% / cover no-repeat, #d9d9d9;
}

.card-img img {
    width: 100%;
    align-content: center;
    height: auto;
    display: block;
}

.name {
    text-align: center;
}

.name h3 {
    color: var(--Text-Colour-1, #0b090a);
    text-align: center;
    font-family: Poppins;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.name h4 {
    color: var(--Colour-1, #4361ee);
    text-align: center;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/*--------------------------------------------------------------
# Sections Benefit
--------------------------------------------------------------*/

#benefit {
    background-image: url("../img/bg/bgkti.jpeg");
    background-size: cover;
    /* height: 1800px; */
    /* width: 1500px; */

    background-repeat: no-repeat;

    /* width: 1300px; */

    /* background: url(assets/img/bg/bso1.png); */
}

.benefit .container .section-title {
    color: #fff;
    font-size: 100px !important;
    text-align: center;
    font-family: "Manrope";
    font-style: normal;
    font-weight: 500;
    line-height: 125%;

    /* 53.596px */
    letter-spacing: -1px;
}

/*  pricing produk */
.benefit .custom-judul {
    background: #ffffff;
    text-align: center;
    box-shadow: 0px 0px 40px rgba(0, 0.2, 0.2, 0.12);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    /* Add any specific styles here */
}

.card-containerr {
    display: flex;
    flex-direction: column;
}

.roww {
    display: flex;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

/* Styling for .pricing .custom-box class */
.benefit .custom-box {
    padding: 25px;
    flex: 1;

    /* height: 500px; */
    background: #fff;
    text-align: center;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.paket {
    border-radius: 50px;
    /* border-radius: 42px; */
    background: var(--Midnight-Blue-950, #09326f);
    /* background: #3E87F8; */
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.15);
    color: #fff;
    text-align: center;
    line-height: 50px;
    height: 100px;
    width: 80px;
    margin: 0 auto;
    font-family: Montserrat;
    font-size: 23px;
    font-style: normal;
    font-weight: 550;
    line-height: 125%;
    /* 40px */
    letter-spacing: -1.6px;
}

.custom-packagee {
    border-radius: 50px;
    /* background: #3E87F8;
border-radius: 42px; */
    background: var(--Midnight-Blue-950, #09326f);
    color: #fff;
    text-align: center;
    line-height: 50px;
    height: px;
    width: 400px;
    margin: 0 auto;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 550;
    font-size: 18;
    line-height: 125%;
    /* 40px */
    letter-spacing: -1.6px;
    justify-content: center;

    font-family: Montserrat;
}

.benefit .custom-box h3 {
    font-weight: 600;
    font-size: 18px;
    margin: -20px -20px 20px -20px;
    padding: 20px 15px;
    color: #ffffff;
    background: #f8f8f8;
}

.benefit .custom-box h4 {
    font-size: 30px;
    color: #106eea;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    margin-bottom: 20px;
}

.benefit .custom-boxa h4 {
    font-size: 30px;
    color: black;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    margin-bottom: 20px;
}

.benefit .custom-box ul {
    padding: 10px;
    list-style: none;
    color: #ffffff;
    text-align: center;
    line-height: 24px;
    /* font-size: 18px; */
}

.benefit .custom-box ul li {
    display: flex;
    align-items: center;
    margin-bottom: 19px;
}

.benefit .custom-box ul .checkmark {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4caf50;
    color: white;
    text-align: center;
    margin-right: 10px;
}

.benefit .custom-box ul .text {
    flex: 1;
}

.container .team-slider .row .konsultasi-content .member-info p {
    color: #212121;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    margin-top: -40px;
    width: 180px;
    /* height: 89px; */
    /* 108.333% */
}

.benefit .member-img {
    text-align: center;
    /* Pusatkan gambar secara horizontal */
}

.benefit .member-img img {
    max-width: 1200px;

    /* Pastikan gambar tidak melebihi lebar container */
    height: auto;
    /* Pertahankan rasio aspek gambar */
}

/*--------------------------------------------------------------
# Sections Card
--------------------------------------------------------------*/
#card-skripsi {
    /*  background-image: url("../img/bg/bg-card1.png");*/
    background-size: cover;
    height: 600px;

    margin-bottom: 50px;
    /* width: 1300px; */

    /* background: url(assets/img/bg/bso1.png); */
}

.card-skripsi .container .scrollto strong {
    margin-top: 100px;
}

.card-skripsi .section-title {
    color: #000;
    font-family: "Manrope" !important;
    font-weight: bold !important;
}

.card-skripsi .section-title h3 {
    color: #000;
    font-family: "Manrope" !important;
    font-weight: bold !important;
}

/* card text geser */

/* .card-text {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
overflow: hidden;
} */

.slider-containerr {
    overflow: hidden;
}

.card-sliderr {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.cardd {
    /* flex: 0 0 20%; */
    margin-right: 20px;
    /* Jarak antar kartu */
    width: 80%;
    border: 1px solid #000;
    /* Warna dan ketebalan garis */
    box-sizing: content-box;
    overflow: hidden;
    height: 300px;
    border-radius: 10px;
    /* object-fit: cover; */
    flex: 0 0 calc(30% - 10px);
}

.card:last-child {
    margin-right: 0;
    /* Tidak memberikan margin-right pada kartu terakhir */
}

/*skripsi*/

.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    margin-right: 10px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* style bso konten button */
.pakethematbso .content {
    display: none;
    padding: 10px;
    text-align: center;
}

.pakethematbso .active {
    display: block;
}

/* style bmj konten button */

/* .container {
display: flex;
justify-content: space-around;
align-items: flex-start;
margin: 20px;
} */

.kontenbmj {
    display: none;
    padding: 10px;
    text-align: center;
}

.aktif {
    display: block;
}

button {
    margin-bottom: 10px;
}

.kontenbmj .buttoncircle {
    margin-left: -100px;
    color: white;
}

.kontenbmj .buttoncircle i {
    margin-bottom: -35px;
}

/* teks button bso */
.text-button {
    /* padding: 10px 20px; */
    /* font-size: 16px; */
    /* background-color: blue;  */
    /* Warna latar belakang awal */
    color: white;
    cursor: pointer;

    /* Menghindari pemilihan teks saat diklik */
    transition: background-color 0.3s, color 0.3s; /* Efek transisi ketika warna berubah */
}

/* Perangkat Mobile */

@media only screen and (max-width: 500px) {
    #topbar {
        display: grid !important;
        background: black;
        height: 60px;
        font-size: 14px;
        transition: all 0.5s;
        color: #fff;
        padding: 0;
    }

    .search-input {
        flex: 1;
        /* Elemen input akan mengambil sebagian besar ruang tersedia */
        border-radius: 50px;
        height: 35px;
        width: 200px;
        padding: 10px;
        border: 1px solid #ccc;
        margin-left: -280px;
    }

    .search-button {
        align-items: center;
        display: flex;
        height: 35px;
        text-align: center;
        background-color: #0056b3;
        color: #fff;
        border: none;
        cursor: pointer;
        padding: 8px 30px;
        border-radius: 50px;
        /* tambah */
        margin-bottom: 0px !important;
        /* Border radius untuk tombol */
        order: 1;
        /* Urutan elemen tombol diubah menjadi 1 */
    }

    .contact-info {
        margin-left: 100px;
    }

    #topbar .logo {
        /* font-size: 30px; */
        margin-top: 5px;
        margin-bottom: 5px;
        width: 30%;
        height: 30%;
        max-height: 180px;
        /* max-width: 400px; */
        /* margin-right: -100px; */
        line-height: 1;
        /* font-weight: 600; */
        letter-spacing: 0.8px;
        /* font-family: "Poppins", sans-serif; */
    }

    #topbar .logo a {
        color: #222222;
    }

    #topbar .logo a span {
        color: #106eea;
    }

    #topbar .logo img {
        max-height: 40px;
    }

    #topbar .contact-info i {
        font-style: normal;
        color: #fff;
    }

    #topbar .contact-info i a,
    #topbar .contact-info i span {
        padding-left: 5px;
        color: #fff;
    }

    #topbar .contact-info i a {
        line-height: 0;
        transition: 0.3s;
        transition: 0.3s;
    }

    #topbar .contact-info i a:hover {
        color: #fff;
        text-decoration: underline;
    }

    #topbar .social-links a {
        color: rgb(255, 253, 253);
        line-height: 0;
        transition: 0.3s;
        margin-left: 20px;
    }

    #topbar .social-links a:hover {
        color: white;
    }

    /* count  */
    .counts {
        position: relative;
        /* text-align: center; */
        display: flex;
        align-items: center;
        z-index: 999;
        /* Atur z-index lebih tinggi dari elemen #popup */
        border-radius: 23.292px;

        background: rgba(255, 255, 255, 0.925);

        backdrop-filter: blur(12.5px);
        /* margin: 10px; Jarak dari tepi halaman */
        margin-top: 30px;
        /* Jarak dari tepi halaman */
        /* Sesuaikan tinggi dan lebar sesuai kebutuhan */
        height: 80px;
        /* width: 200px; */
        /* Atur posisi sesuai kebutuhan */
        /* top: 65%; */
        left: 0;
        /* Tambahkan efek bayangan jika diinginkan */
        box-shadow: 0px 0px 5px 2px rgba(10, 10, 10, 0.1);
    }

    .count-separator {
        width: 1px;
        /* Lebar garis vertikal */
        background-color: rgba(0, 0, 0, 0.3);
        /* Warna garis vertikal */
        margin: 0 0px;
        /* Jarak antara garis vertikal dan teks */
        margin-top: 7px;
        /* Jarak antara garis vertikal dan teks */
        height: 55px;
        /* Sesuaikan dengan tinggi teks jika diperlukan */
    }

    /* .counts .container { */

    /* padding: 20px; Padding pada container agar kontennya tidak terlalu dekat dengan tepi kotak */
    /* } */

    .count-boxes .count-box .left-content span {
        font-size: 10px;

        /* gap: 20px; Jarak antara elemen .count-box */
    }

    .count-box {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: transparent;
        /* Ganti dengan warna latar yang diinginkan */
        /* border: 2px solid; Ganti dengan warna border yang diinginkan */
        border-radius: 50px;
        /* padding: 20px; */
        /* margin-right: 50px; */
        width: 250px;
    }

    /* section */
    #hero .btn-get-awaaal {
        margin-top: 100px;
        color: #fff;
        font-family: "Manrope";
        font-size: 20.695px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        border-radius: 26.104px 26.104px 26.104px 0px;
        background: #09326f;
        letter-spacing: 1.5px;
        margin-top: -30px;
        backdrop-filter: blur(16.369382858276367px);
        background-size: cover;
        width: 666;
        height: 89.8;
        background-color: transparent;
        /* text-transform: uppercase; */
        /* font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    display: inline-block; */
        padding: 14px 15px;
        border-radius: 26.104px 26.104px 26.104px 0px;
        background: #09326f;
        backdrop-filter: blur(16.369382858276367px);
        margin-left: -10px;
        /* transition: 0.5s; */
        color: #ffffff;
        /* text-shadow: 2px 2px 4px rgba(131, 131, 131, 0.5); */
        /* margin-left: 5%; */
        /* margin-right: auto;   */
        /* background-color: #2B65EC; */
    }

    #hero .container .judulkedua {
        display: block;
        flex-direction: column;
        /* align-items: center; */
        margin-top: 20px;
        color: #fff;
    }

    #hero .container .judulkedua h3 {
        color: #fff;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: "Manrope";
        font-size: 68.277px;
        font-style: normal;
        font-weight: 800;
        line-height: 100%;
        /* 88.277px */
        letter-spacing: -0.414px;
    }

    #hero .container .judulkedua p {
        width: 865px;
        color: #fff;

        text-shadow: 0px 5.178691864013672px 5.178691864013672px
            rgba(0, 0, 0, 0.25);
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        /* font-weight: 500; */
        line-height: 110%; /* 36.3px */
    }

    /* popup bawah  */
    .popup-bro {
        position: fixed;
        padding: 5px 20px;
        border-radius: 26px 26px 0px 26px;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: 0px 10px 23px 0px rgba(0, 0, 0, 0.29),
            0px 42px 42px 0px rgba(0, 0, 0, 0.26),
            0px 94px 56px 0px rgba(0, 0, 0, 0.15),
            0px 167px 67px 0px rgba(0, 0, 0, 0.04),
            0px 261px 73px 0px rgba(0, 0, 0, 0.01);
        backdrop-filter: blur(25px);
        z-index: 9999;
        /* Puts the popup above other elements */
        display: none;
        width: 150px;
        height: 60px;
        flex-shrink: 0;
        color: #000;
        animation: slideUpDown 8s ease-in-out infinite; /* Adjusted total duration to 8 seconds */
    }
}

/* Perangkat Tab */

/* Perangkat Laptop */

/* Perangkat Dekstop */
@media only screen and (min-width: 1024px) {
    #hero {
        background-attachment: fixed;
    }
}

/* tambah icon play pada video */
.single_left_coloum {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.play-iconn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Adjust the size of the play icon */
    height: 50px; /* Adjust the size of the play icon */
    fill: gray; /* Adjust the color of the play icon */
    transition: opacity 0.3s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.play-icon {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; /* Adjust the size of the play icon */
    height: 50px; /* Adjust the size of the play icon */
    fill: #fff; /* Adjust the color of the play icon */
    transition: opacity 0.3s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
        255,
        0,
        0,
        0.5
    ); /* Adjust the color and opacity of the overlay */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.single_left_coloum:hover .play-icon,
.single_left_coloum:hover .overlay {
    opacity: 1;
}

/* Tambah button panah scrol kanan kiri pada harga bso */
.arrow-buttons-wrapper {
    position: absolute;
    top: 60%; /* Adjust as needed */
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.left-scroll-buttonbso,
.right-scroll-buttonbso {
    cursor: pointer;
}

.left-scroll-buttonbso {
    margin-left: -58px; /* Adjust as needed */
}

.right-scroll-buttonbso {
    margin-right: -60px; /* Adjust as needed */
}

/* Halaman Karya Tulis Ilmiah */
.header-kti {
    margin-top: -50px;
    height: 200px;
    background: url(/assets/img/bg/utama2.png);
    background-size: cover;
}

.section-title-kti {
    text-align: center;
    color: #fff;
}

.judul-kti {
    font-size: 36px;
    font-weight: bold;
}

.sub-title-kti {
    font-size: 24px;
    font-weight: 500;
}

.judul-kti {
    font-size: 32px;
    font-weight: 700px;
    color: #000;
}

#herokti {
    margin: 0;
    margin-top: -20px;
    padding: 0;
    background: url(/assets/img/bg/ktibg.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-program-container {
    width: 200px;
    height: 40px;
    /* padding: 10px; */
    background: #3e87f8;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15);
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
}

.class-program-text {
    color: white;
    font-size: 18px;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 40px;
    word-wrap: break-word;
}

.judulkti {
    width: 100%;
    color: #09326f;
    font-size: 50px;
    font-family: Montserrat;
    font-weight: 800;
    line-height: 87.5px;
    word-wrap: break-word;
}

.kti-description {
    width: 100%;
    height: 100%;
    color: #202020;
    font-size: 21px;
    font-family: Montserrat;
    font-weight: 500;
    line-height: 27.5px;
    word-wrap: break-word;
}

/* Card */
/* .card-skripsi {
    text-align: center;
} */

.header-title {
    width: 100%;
    font-size: 50px;
    font-weight: 700;
    line-height: 74.75px;
    margin-top: 10px;
}

/* .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 15px;
  box-sizing: border-box;
}

.card {
    width: 100%;
    height: 100%;
    overflow: hidden;
} */

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Halaman Skripsi */

#hero-skripsi .container h2 {
    color: #fff;
    margin-top: 10px;
    width: 600px;
    margin-left: 550px;
    font-family: "Manrope" !important;
    font-size: 30px;
    /* font-weight: 500; */
    line-height: 30px;
}
#hero-skripsi {
    margin: 0;
    padding: 0;
    background: url(/assets/img/bg/bg-skripsi.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-get-started-skripsi {
    border-radius: 50px;
    margin-left: 550px;
    background: #e2cc00;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.15);
    font-family: "Montserrat";
    margin-top: 20px;
    color: #fff;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    padding: 14px 40px;
}

#hero-skripsi .btn-get-started-skripsi:hover {
    background: #000000;
    color: #ffffff;
}

.btn-get-started-skripsi1 {
    border-radius: 50px;
    margin-left: 550px;
    background: #e2cc00;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.15);
    font-family: "Manrope";
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    padding: 10px 20px;
}

.judulketiga-skripsi {
    margin-left: 550px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-top: 20px;
}

#hero-skripsi .container .judulketiga-skripsi {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-top: 20px;
}


#card-skripsi {
    background: url(/assets/img/bg/bg-card.png);
    background-size: cover;
    background-position: center;
}

.btn-get-started2 {
    display: flex;
    width: 280px;
    height: 50px;
    align-self: center;
    margin-left: 420px !important;
    padding: 15.455px;
    justify-content: center !important;
    border-radius: 77.273px;
    align-items: center;
    gap: 15.455px;
    flex-shrink: 0;
    background: var(--midnight-blue-950, #09326f);
    box-shadow: 15.455px 15.455px 30.909px 0px rgba(0, 0, 0, 0.15);
    font-size: 25px;
    color: #fff;
    font-family: "Manrope";
    font-style: normal;
    font-weight: 800% !important;
    line-height: 125%;
    letter-spacing: -1px;
}

.btn-get-started3 {
    display: flex;
    width: 180px;
    height: 35px;
    margin-left: 40px;
    padding: 15.455px 15.455px 15.455px 15.455px;
    justify-content: center;
    border-radius: 77.273px;
    align-items: center;
    gap: 15.455px;
    flex-shrink: 0;
    background: var(--Midnight-Blue-950, #09326f);
    box-shadow: 15.455px 15.455px 30.909px 0px rgba(0, 0, 0, 0.15);
    font-size: 20px;
    color: #fff;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    letter-spacing: -0.5px;
    margin-bottom: 40px;
}

.member-infoo p {
    margin-top: 10px;
    position: relative;
    margin-bottom: 1000px;
    font-size: 14px;
    text-align: center;
    width: 230px;
}

.benefit .member-infoo p {
    color: #454545;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    text-align: left;
    font-weight: 500;
    line-height: 125%;
    letter-spacing: -1px;
    margin-top: 40px;

}

.card-skripsi .section-title {
    color: #000;
    font-family: "Manrope" !important;
    font-weight: bold !important;
}

.card-skripsi .section-title h3 {
    color: #000;
    font-family: "Manrope" !important;
    font-weight: bold !important;
}

#benefit .section-title h3 {
    margin: 15px 0 0 0;
    font-size: 50px;
    font-weight: 700;
}

span:hover {
    color: #106eea !important;
    cursor: pointer;
}
p:hover {
    color: #106eea !important;
}
a:hover {
    color: #106eea !important;
}




/* HALAMAN UTAMA */

#hero-utama{
    background: url("../img/bg/dekstop2.webp");
    background-size: cover;
    margin-top: 100px;
    position: relative;
}

 #hero-utama .btn-get-started:hover {
    background-color: #007AFF !important;
    color: white !important;
}

#hero-utama .judulawal{
        margin-top: 10px;
}

 #hero-utama .container .judulkedua {
        display: block;
        flex-direction: column;
        margin-top: 20px;
        color: #fff;
        font-family:'Manrope';
    }

#hero-utama .judulkedua h3{
    font-family: "Rosa Sans", sans-serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Manrope";
    font-size: 68.277px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -0.414px;

}

#hero-utama .container .judulkedua p {
        width: 865px;
        color: #fff;
        text-shadow: 0px 5.178691864013672px 5.178691864013672px
            rgba(0, 0, 0, 0.25);
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        line-height: 110%;
        letter-spacing:1px;
        font-family: Manrope;
        margin-top:15px;
        pointer-events: none;
    }

#hero-utama .btn-hero-utama{
     color: #fff;
    font-family: "Manrope";
    font-size: 40.695px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 26.104px 26.104px 26.104px 0px;
    background: #09326f;
    letter-spacing: 1.5px;
    margin-top: -30px;
    backdrop-filter: blur(16.369382858276367px);
    background-size: cover;
    width: 666;
    height: 89.8;
    background-color: transparent;

    padding: 14px 15px;
    border-radius: 26.104px 26.104px 26.104px 0px;
    background: #09326f;
    backdrop-filter: blur(16.369382858276367px);
    margin-left: -10px;
    color: #ffffff;
   font-family:'Manrope';
}

#hero-utama .btn-get-started{
       margin-top: 20px;
    color: #fff;
    font-family: "Manrope";
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    padding: 14px 40px;
    border-radius: 23.203px 23.203px 23.203px 0px;
    background: #09326f;
}