/*





*/

footer a { color:#000000; }

.bg-blue {
    background-color: rgba(57, 73, 171, 1)!important;
}
.footer-blue {
  background: rgb(15,8,124);
  background: linear-gradient(0deg, rgba(15,8,124,1) 0%, rgba(57,73,171,1) 60%);
  color:#FFFFFF!important;
}
.footer-blue a {
	color:#FFFFFF!important;
}
#navbarMainMenu .nav-link {
		color: rgba(255, 255, 255, 1)!important;
		font-weight: bold;
}

.card-text {
  height: 48px;
  margin-bottom: 5px!important;
}
.card-foot {
  font-size:10pt;color:#757D8B;
}

a { text-decoration: none; }
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
.img-headline {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 500px;
  min-height: 100%;
  width: 100%;
}

.blog-post {
font-size: 14pt;
}
.blog-post h2 {
font-weight: 400;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { .img-headline{height:400px!important;} }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { .img-headline{height:400px!important;} }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { .img-headline{height:500px!important;} }

.carousel-caption {
    z-index: 10;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.1), black);
    padding: 5px;
    margin: 0px;
    left: 0;
    bottom: 0;
}
.carousel-caption a {
    font-weight: 500 !important;
    color:#FFF !important;
}

.carousel-caption span {
  font-size: 10pt;
  text-align:right;
  float:right;
}

.carousel-control-next {
  opacity:1!important;
}

.carousel-static {
  position: relative;
  color: white;
}

.carousel-static img {
  width:100%;
  min-height:202px;
  height:202px;
}

.carousel-static .img-caption {
  position: absolute;
  width:100%;
  padding:5px;
  margin-bottom: 0.25rem;
  bottom: 0px;
  background: linear-gradient(rgba(0, 0, 0, 0.1), black);
}

.carousel-static .img-caption h3{
  text-align: center;
  font-weight: 500;
  font-size: 13pt;
  margin-bottom:0px;
}

.carousel-static .img-caption a{
  color:#FFF!important;
}

.carousel-static .img-caption span{
  font-size: 10pt;
  text-align:right;
  float:right;
}

/* LIST BLOG SIDE RIGHT */

.list-blog img {
width:100%;
min-height: 95px;
}
.list-blog span {
font-size: 14pt;
line-height: 18pt;
display: block;
font-weight: 600;
}

.list-popular .number {
font-size:20pt;position:absolute;color:#AAA;font-style:italic;
}
.list-popular .text {
padding-left:40px;
font-size: 15pt;
line-height: 18pt;
margin-bottom: 0px;
}
.list-popular .text a {
color:#000;
}
.list-popular .datetime {
float:right;
font-size:10pt;
color:rgb(141 141 141);
}
.list-popular hr {
clear:both;
}

.bg-video-gradient {
background: rgb(33,113,221);
background: linear-gradient(308deg, rgba(33,113,221,1) 0%, rgba(65,201,189,1) 75%);
padding: 10px 0px 40px 0px;
margin-top: 50px;
margin-bottom: 50px;
border-radius: 5px;
}

.ghw-text-category {text-decoration:none;color:black;}
.title-category {
  font-size: 17pt;
  padding: 6px;
  margin-top:10px;
  border-left: 6px solid red;
  text-transform: uppercase;
  color: rgb(17 31 114) !important;
  font-weight: 600;
}


.featured-blog img {
  width: 100%;
  margin-bottom: 10px;
}
.featured-blog .full-width img {
  width: 100%;
  height: 250px;
}
.featured-blog p { margin-bottom:0px; }
.featured-blog .full-width { margin-bottom:10px; }
.featured-blog a {
  font-size: 14pt;
  line-height: 18pt;
  display: block;
  font-weight: 600;
  color:#000;
}


/* Slick */
.brand-slider-home {
  padding: 0px 5px;
  width:100%;
}
.grandchild {
  padding: 17px;
  border: 1px solid #d8d8d8;
  height: 144px;
  background-color: #ffffff;
}
.slick-img {
  width:inherit !important;
  max-width: 173px;
  height: 114px;
  margin-right: auto;
  margin-left: auto;
}
.slick-prev:before, .slick-next:before {
    color: #283593;
}


/* brand */
.brand-card a {
color: #000;
text-decoration: none;
}
.brand-card img {
width: 100%;
aspect-ratio : 1 / 1;
}
.brand-view img {
max-width:100% !important;
height:auto !important;
}
.brand-detail-contact {
list-style: none;
padding:0px;
}
.brand-detail {
list-style: none;
font-weight:bold;
padding:0px;
}
.brand-detail li span {
float:right;
font-weight: normal;
}
.brand-logo {
border-radius: 15px 15px;
width:150px;
height:150px;
border:1px solid #e2e2e2;
box-shadow: 2px 2px 5px #e2e2e2;
}

.btn-fg-default {
  background-color: #3949AB!important;
  color:#FFF!important;
}
.page-item {
  margin: 10px;
}

.pagelink .page-item:first-child .page-link {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.page-item:first-child .page-link, .page-item:last-child .page-link {
  border-radius: 10px;
}
.pagelink .active>.page-link {
  background: #374B5C;
  color: #fff;
  border: 1px solid #374B5C;
}
.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.active>.page-link, .page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}
.pagelink ul li a {
  border: 1px solid #DEE2E7;
  background: #fff;
  border-radius: 10px;
  color: #0D233E;
  padding: 10px 19px;
  margin: 0 12px 0 0;
  width: 46px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.pagelink li {
  text-align: -webkit-match-parent;
}
.pagelink ul {
  list-style: none;
  padding: 0;
  margin: 0;
}





/* Style umum untuk semua banner */
.banner {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    font-size: 16px;
    border-radius: 5px;
    z-index: 9999;
}

@media (max-width: 1699.98px) {
    .banner.left,
    .banner.right {
        display: none !important; /* Sembunyikan banner pada layar kecil */
    }
}

/* Banner kiri */
.banner.left {
    top: 20px;
    left: 0;
    transform: translateX(-100%);
    width: 180px; /* Menyesuaikan lebar banner kiri */
    height: auto;
}

.banner.left img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Gambar menutupi area tanpa distorsi */
}

/* Banner kanan */
.banner.right {
    top: 20px;
    right: 0;
    transform: translateX(100%);
    width: 180px; /* Menyesuaikan lebar banner kanan */
    height: auto;
}

.banner.right img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Gambar menutupi area tanpa distorsi */
}

/* Banner bawah */
.banner.bottom {
    bottom: 0;
    left: 0;
    transform: translateX(-50%);
    width: 100%; /* Pastikan lebar banner bawah full screen */
    text-align: center;
}

.banner.bottom img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Gambar akan memenuhi area */
}

/* Tombol close */
button.close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 10000;
}

button.close-btn:hover {
    opacity: 0.7;
}

/* Animasi untuk banner */
@keyframes slideLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideBottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Apply the animation */
.left {
    animation: slideLeft 0.5s ease-out forwards;
}

.right {
    animation: slideRight 0.5s ease-out forwards;
}

.bottom {
    animation: slideBottom 0.5s ease-out forwards;
}