/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
/* Move this font import to your HTML for better performance:
*/
:root {
--red: #B41833;
--light-red: #fdf2f3;
--green: #419a30ff;
}
/* +++ FONT COLORS +++ */
.fc-red {
color: var(--red);
}
.fw-superbold {
font-weight: 800;
}
a {
color: initial;
text-decoration: none;
}
* {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.15px;
margin: 0;
padding: 0;
outline: none;
}
h5 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 18px;
line-height: 30px;
letter-spacing: 0%;
}
h1 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 28px;
line-height: 34px;
letter-spacing: 0%;
}
h2 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 24px;
line-height: 32px;
letter-spacing: 0%;
}
h3 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 20px;
line-height: 30px;
letter-spacing: 0%;
}
p {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
}
li {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
}
.navbar {
background: #FFFFFF;
height: 80px;
box-shadow: 3px 5px #E6ECF7;
}
.nav-link {
/* font-family: "Poppins", serif;
font-weight: 500; */
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
position: relative;
}
.nav-link:hover, .nav-link.active {
color: black;
}
.carousel-caption > h1,
.hero-section h1 {
font-family: 'Merriweather Sans', sans-serif;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal;
}
.offcanvas {
background: #FFE3E7;
}
.dropdown:hover .dropdown-menu {
/* background: #FFE3E7; */
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
/* .nav-link::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: aqua;
visibility: hidden;
}
.nav-link:hover::before {
width: 100%;
visibility: visible;
} */
.navbar-toggler {
border: none;
font-size: 1.25rem;
}
.btn-register {
border-radius: 8px;
color: white;
font-family: "Poppins", serif;
font-size: 14px;
}
.navbar-toggler:focus {
box-shadow: none;
outline: none;;
}
.breadcrumb h1 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 36px;
line-height: 44px;
letter-spacing: 0%;
margin: 0;
padding: 0;
}
.breadcrumb p {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
margin: 0;
padding: 0;
}
.inputcustom {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
margin-left: -10px;
}
.inputcustom i {
margin-left: -30px;
color: #ccc;
}
.hero-section {
background: url("/assets/images/Hero.png") rgba(255, 150, 150, 0.4);
background-size: cover;
background-position: right bottom;
width: 100%;
height: 100vh;
color: white;
text-shadow: 1px 1px 5px black;
background-blend-mode: multiply;
}
.carousel-caption {
top: 200px !important;
}
.preliminary h1 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 28px;
line-height: 34px;
letter-spacing: 0%;
margin: 0;
padding: 0;
}
.preliminary p {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
/* margin: 0;
padding: 0; */
}
.countdown {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 36px;
line-height: 44px;
letter-spacing: 0.25px;
margin: 0;
padding: 0;
}
.countdown p {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
margin: 0;
padding: 0;
}
.timeline {
/* background: url("/assets/images/bg_Timeline.webp"); */
background-color: var(--light-red);
background-size: cover;
background-position: center;
width: 100%;
}
.tl_bubble {
background: url("/assets/images/tl_bubble_new.png");
background-size: cover;
padding: 30px 50px;
background-position: center;
background-repeat: no-repeat;
width: 619px;
}
.tl_bubble.final{
background: url("/assets/images/tl_bubble_final_exam_new.png");
background-size: cover;
padding: 30px 50px;
/* margin: 0 30px; */
background-position: center;
background-repeat: no-repeat;
width: 619px;
}
.tl_bubble.grand_final{
background: url("/assets/images/tl_bubble_grand_final_new.png");
background-size: cover;
padding: 30px 50px;
/* margin: 0 30px; */
/* background-position: center; */
background-position: center;
background-repeat: no-repeat;
width: 619px;
}
.tl_title {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 20px;
line-height: 30px;
letter-spacing: 0%;
}
.tl_status {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
}
.tl_desc {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.1px;
margin-top: -20px;
}
.tl_upcoming_events {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 20px;
line-height: 30px;
letter-spacing: 0%;
}
.tl_upcoming_desc {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.1px;
}
.btn {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
}
.behind_the_story {
background-color: #fff;
}
.behind_the_story h2 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 36px;
line-height: 44px;
letter-spacing: 0.25px;
margin: 0;
padding: 0;
}
.behind_the_story h3 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-size: 20px;
line-height: 30px;
letter-spacing: 0%;
margin: 0;
padding: 0;
}
.label {
background: #fff3c7;
border-bottom-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
font-size: .8rem;
font-weight: 600;
line-height: 1.6rem;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 7rem;
z-index: 50;
}
.award {
background-color: #FDF2F3;
}
.award h2 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 36px;
line-height: 44px;
letter-spacing: 0.25px;
margin: 0;
padding: 0;
}
.award p {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
}
.insight {
background-color: #fff;
}
.insight h1 {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 36px;
line-height: 44px;
letter-spacing: 0.25px;
margin: 0;
padding: 0;
}
.insight p {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
}
.card.artikel {
box-shadow: 2px 2px 10px rgb(0 0 0 / 8%);
height: 100%;
border: none !important;
border-radius: 20px;
background-color: #f4f9ff;
}
.card.artikel img {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 100%;
height: auto;
}
.card-body.artikel .card-title {
font-family: "Merriweather Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-size: 18px;
line-height: 30px;
letter-spacing: 0%;
min-height: 60px;
}
.card-body.artikel .card-text, .card-date {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-size: 15px;
line-height: 24px;
letter-spacing: 0.15px;
}
.card-date {
color: #B41833;
}
.owl-dots {
display: none;
}
.owl-theme .owl-nav {
margin-top: 10px;
text-align: end;
}
.owl-prev, .owl-next {
font-size: 1rem !important;
background-color: #f7d5daff !important;
color: #333 !important;
width: 35px;
height: 35px;
}
.footer {
background-color: #F1F4FA;
}
.footer a {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 14px;
line-height: 25px;
letter-spacing: 0.1px;
text-decoration: none;
color: black;
}
.footer a:hover {
color: #B41833;
}
.footer .sosmed {
background-color: #B41833;
color: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
}
@media screen and (max-width: 768px) {
.navbar {
height: 65px;
margin: 16px 20px;
border-radius: 20px;
}
.hero-section {
height: 70vh;
}
.preliminary {
text-align: center;
}
.preliminary img {
width: 200px;
margin: auto;
}
.preliminary h1 {
font-size: 16px;
}
.countdown {
font-size: 24px;
}
.tl_bubble, .tl_bubble.final, .tl_bubble.grand_final {
background-image: none;
background-color: #fff;
background-size: cover;
padding: 0;
margin: 0;
background-position: center;
width: 100%;
}
.behind_the_story img {
width: 200px !important;
}
/* .behind_the_story h2 {
font-size: 20px;
} */
.behind_mobile {
text-align: center !important;
}
.award h1 {
font-size: 20px;
}
.about_img {
width: 100% !important;
}
}
@media screen and (min-width: 1000px) {
.tl_bubble, .tl_bubble.final, .tl_bubble.grand_final {
min-height: 247px;;
}
}
/* +++++ Custom +++++ */
.iob-list {
counter-reset: my-awesome-counter;
list-style: none;
padding-left: 40px;
}
.iob-list li {
counter-increment: my-awesome-counter;
position: relative;
}
.iob-list li::before {
content: counter(my-awesome-counter);
color: #fff;
font-size: 1rem;
position: absolute;
--size: 32px;
left: calc(-1 * var(--size) - 10px);
line-height: var(--size);
width: var(--size);
height: var(--size);
top: -3px;
background: black;
border-radius: 50%;
text-align: center;
}
.iob-list li::marker {
background: #000000;
color: #ffffff;
width: 100px;
height: 100px;
padding: 10px 15px;
border-radius: 50px;
}
.card-timeline {
box-shadow: 2px 2px 10px rgb(0 0 0 / 8%);
border: none;
border-radius: 20px;
}
.card-timeline .card-footer {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.card-timeline .card-header {
min-height: auto;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.btn-join {
color: white;
background-color: var(--green);
transition: background-color 0.2s;
}
.btn-join:hover {
color: white;
background-color: #357a26; /* darker green */
}
.btn-detail {
color: white;
background-color: #8fa4c3ff;
transition: background-color 0.2s;
}
.btn-detail:hover {
color: white;
background-color: rgb(125, 141, 166);
}
.owl-nav .owl-prev{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
margin: 0 !important;
}
.owl-nav .owl-next{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
margin: 0 !important;
}
.logo-partner {
width: 100%;
height: auto;
max-width: 200px;
}
.fs-title {
color: #cc2840;
font-size: 36px !important;
}
@media screen and (max-width: 768px) {
.fs-title {
font-size: 24px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.card-timeline .card-header {
min-height: 11.5rem;
}
}
/* +++++ End Custom +++++ */
/* +++++ Boostrap +++++ */
.card-footer {
background: transparent;
border: none;
}
/* +++++ End Boostrap +++++ */