@import url('https://fonts.cdnfonts.com/css/azonix');

.ragdalion{
    font-family: 'Azonix', sans-serif;
    font-size: 140px;
    color: #D9D9D9;
}

.ragdalion-sub{
    margin-top: -145px;
    padding-bottom: 50px;
    z-index: 10000;
}

.ragdalion {
    font-family: 'Azonix', sans-serif;
    font-size: 140px;
    color: #D9D9D9;
}

.ragdalion-sub {
    margin-top: -150px;
    padding-bottom: 50px;
    z-index: 100;
}

/* Media Queries untuk Tablet */
@media (max-width: 768px) {
    .ragdalion {
        font-size: 100px; /* Sesuaikan ukuran font untuk tablet */
    }

    .ragdalion-sub {
        margin-top: -115px;
        padding-bottom: 40px;
        font-size: 31px;
    }

    
}

/* Media Queries untuk Smartphone */
@media (max-width: 480px) {
    .ragdalion {
        font-size: 60px; /* Sesuaikan ukuran font untuk smartphone */
    }

    .ragdalion-sub {
        margin-top: -85px;
        padding-bottom: 30px;
        font-size: 19px;
    }
}


.font-title-footer{
    font-size: 15px;
    font-weight: bold;
    color: #ffffffa3;
}

.font-small-footer{
    font-size: 13px;
    color: #f9f9f9a3;
    max-width: 180px;
}
.font-copyright{
    font-size: 13px !important;
    color: #f9f9f9a3;
}


.font-bold{
    font-size: 24px;
    font-weight: bold;
}

.font-bold-midle{
    font-size: 16px;
    font-weight: bold;
}

.font-bold-mini{
    font-size: 12px;
    font-weight: bold;
}

.font-blue {
    color: #1975B1;
}

a.font-blue2{
    color: #0B3F6B !important;
    font-size: 22px;
}

.font-blue2{
    color: #0B3F6B;
}

p.font-hd{
    font-size: 26px;
}

.font-dark{
    color: #000 !important;
    opacity: 2;
}

a.font-link{
    color: #1975B1 !important;
    text-decoration: underline;
}

.font-25{
    font-size: 25px;
}

.font-12{
    font-size: 11px;
}

.font-13{
    font-size: 13px;
}
.font-16{
    font-size: 16px;
}


a, .font-white{
    color: #fff !important;
}
.bg-white{
    background-color: #f3f2f5c7 !important;
}

.bg-white-2{
    background-color: #fff !important;
}

.bg-blue{
    background-color: #B8D4E7 !important;
}

.btn-group-custom .btn-default {
    background-color: rgba(0, 0, 0, 0.125);
    border: 1px solid transparent; /* Opsional: untuk menghilangkan border bawaan */
    transition: background-color 0.3s ease;
}

/* Background warna khusus untuk tombol aktif */
.btn-group-custom .btn-default.active {
    background-color: #4791C1;
    color: white; /* Pastikan teks/gambar terlihat */
}

/* Hover effect (opsional) */
.btn-group-custom .btn-default:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Sedikit lebih gelap saat dihover */
}

.img-flag{
    width: 15px;
    height: 10px;
}

.carousel-caption.left-caption {
    text-align: left; /* Teks rata kiri */
    left: 0; /* Memindahkan teks ke sisi kiri */
    top: 33%; /* Posisi vertikal di tengah */
    transform: translateY(-50%); /* Menyeimbangkan posisi vertikal */
    padding-left: 50px; /* Default jarak kiri */
    max-width: 50%; /* Default batas lebar (untuk layar kecil) */
    word-wrap: break-word; /* Memastikan teks pecah jika terlalu panjang */
}


.ms-konten-left{
    margin-left: 10rem!important;
}



@media (max-width: 767px) {
    .carousel-caption.left-caption h3 {
        font-size: 13px; /* Sesuaikan ukuran huruf judul */
    }

    .carousel-caption.left-caption p {
        font-size: 9px; /* Sesuaikan ukuran huruf paragraf */
    }

    /* Menu mobile */
    .menu-container {
        max-width: 1840px;
        margin-right: 5px;
        margin-left: 5px;
    }
    .font-25{
        font-size: 16px;
    }

    .footer-menu.gap-5 {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem !important; /* Sesuaikan gap antar kolom */
    }

    .footer-menu.gap-5 .w-max-content {
        flex: 1 0 45%;
        box-sizing: border-box;
        width: 100%; /* Pastikan mengambil lebar penuh */
    }

    .section-client{
        padding: 1em 2em 1em 2em;
    }
}

/* di bawah resolusi 768 */
@media (max-width: 768px) {
    
   

    .navbar-expand-xl .navbar-nav .nav-link {
        font-size: 11px !important;
    }
    
    .footer-menu.gap-5 {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem !important; /* Sesuaikan gap antar kolom */
    }

    .footer-menu.gap-5 .w-max-content {
        flex: 1 0 45%;
        box-sizing: border-box;
        width: 100%; /* Pastikan mengambil lebar penuh */
    }

}

/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
    .carousel-caption.left-caption {
        top: 55%;
        padding-left: 80px; /* Menambah jarak untuk layar tablet */
        max-width: 500px; /* Batas lebar untuk tablet */
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        font-size: 11px !important;
    }

    

}










.carousel-control-next-icon,
.carousel-control-prev-icon {
  width: 5vw;
  height: 5vw;
  filter: brightness(300) saturate(100%) contrast(200%);
}

/* Default indikator */

.carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    background-color: #fff;
    border: none;
    margin: 0 5px;
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
}

.carousel-indicators .active {
    width: 40px !important; /* Panjang lonjong */
    height: 12px !important; /* Tinggi lonjong */
    border-radius: 14px; /* Membentuk kapsul sempurna */
    opacity: 1; /* Transparansi penuh */
    transition: all 0.3s ease-in-out; /* Animasi transisi */
}


.owl-carousel {
    margin-bottom: 20px; /* Jarak antar baris */
}

.owl-carousel {
    width: 100vw; /* Mengambil seluruh lebar viewport */
    margin: 0 auto; /* Memastikan posisi center */
}
.section {
    padding-left: 15;
    padding-right: 15;
}


.banner {
    background-image: radial-gradient(circle farthest-side, rgba(27,127,204,.8), #12537E00);
    padding: 20px; /* Padding for spacing */
    text-align: center; /* Center the text */
    position: relative; /* Dibutuhkan untuk positioning pseudo-element */
}

.banner:before,
.banner:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px; /* Ketebalan border */
    background-image: radial-gradient(circle farthest-side, rgba(237, 241, 243, 0.8), #eef0f100);;
}

.banner:before {
    top: 0; /* Posisi border atas */
}

.banner:after {
    bottom: 0; /* Posisi border bawah */
}


h3 {
    font-size: 26px; /* Font size */
    margin: 0; /* Remove default margin */
    font-weight: bold; /* Bold font weight */
}


.banner h1 {
    color: white; /* White text color */
    font-size: 36px; /* Font size */
    margin: 0; /* Remove default margin */
    font-weight: bold; /* Bold font weight */
}
@media (max-width: 600px) {
    .banner h1 {
        font-size: 24px; /* Smaller font size for mobile screens */
    }
}



figure.snip1208{
    margin: 0px 30px 0rem !important;
}

figure.snip1208 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
figure.snip1208 img {
  max-width: 100%;
  vertical-align: top;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
figure.snip1208 figcaption {
  margin-top: 20px;
  position: relative;
}

figure.snip1208 i {
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  font-weight: bold;
}

figure.snip1208 h3,
figure.snip1208 p {
  margin: 0;
  padding: 0;
}
figure.snip1208 h3 {
  margin-bottom: 10px;
  display: inline-block;
  font-weight: 600;
  /* font-size: 25px; */
  color: #333333;
  /* text-transform: uppercase; */
}
figure.snip1208 p {
  font-size: 0.8em;
  margin-bottom: 20px;
  line-height: 1.6em;
}
figure.snip1208 button {
    border: 2px solid;
    border-color: rgb(23, 109, 175);
    padding: 7px 6px;
    font-weight: 800;
    color: rgb(23, 109, 175) !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8em;
    background: #fff;
}
figure.snip1208 h3 a  {
  color: #000 !important;
  font-size: 20px;
}

figure.snip1208 a {
    color: #1975B1 !important;
}


figure.snip1208:hover img,
figure.snip1208.hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

figure.snip1208:hover i,
figure.snip1208.hover i {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
figure.snip1208:hover button,
figure.snip1208.hover button {
  background-color: rgb(230, 237, 242);
  color: #fff !important;
}




.button-contact {
    border: 2px solid;
    border-color: #ffffff;
    padding: 20px 40px;
    font-weight: 800;
    color: rgb(23, 109, 175);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.8em;
    background: rgb(23, 109, 175);
  }

  .button-contact:hover {
    border: 2px solid;
    border-color: rgb(14, 102, 169);
    padding: 20px 40px;
    font-weight: 800;
    color: #000;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.8em;
    background: rgb(14, 102, 169);
  }



  /* Card  */

.card-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Spasi antara gambar dan judul */
}



.card-img-top {
    width: 75px; /* Sesuaikan lebar gambar sesuai kebutuhan */
    height: auto;
}

.card-title {
    margin: 0; /* Hilangkan margin default dari elemen h5 */
}



.card:hover {
    /* Menonaktifkan efek hover dengan menjaga properti default */
    transform: none; /* Jika ada transformasi */
    box-shadow: none; /* Jika ada bayangan */
    background-color: inherit; /* Menjaga warna latar belakang */
    color: inherit; /* Menjaga warna teks */
    /* Tambahkan properti lain yang mungkin berubah saat hover */
}

/* Menghilangkan efek hover pada link dalam card */
.card a:hover {
    text-decoration: none; /* Menjaga gaya teks */
    color: inherit; /* Menjaga warna teks */
}


.bg-main-1 .card-header {
    color: inherit; /* Menjaga warna teks */
    background-color: transparent; /* Menetapkan warna latar belakang menjadi transparan */
    border-bottom: none; /* Menghilangkan border bawah */
}
.bg-main-1 .card-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Spasi antara gambar dan judul */
}

.bg-main-2 .card-header {
    color: inherit; /* Menjaga warna teks */
    background-color: transparent; /* Menetapkan warna latar belakang menjadi transparan */
    border-bottom: none; /* Menghilangkan border bawah */
}
.bg-main-2 .card-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Spasi antara gambar dan judul */
}


/* Menambahkan warna latar belakang untuk card group */
.bg-main-1 {
    background-color: #082F50;
    padding: 5px; /* Tambahkan padding agar konten tidak terlalu mepet ke tepi */
    border-radius: 8px; /* Opsional: Tambahkan border radius untuk sudut yang lebih halus */
    width: 100%;
}

.bg-main-2 {
    background-color: #fff;
    padding: 5px; /* Tambahkan padding agar konten tidak terlalu mepet ke tepi */
    border-radius: 8px; /* Opsional: Tambahkan border radius untuk sudut yang lebih halus */
    border: 1px solid #9b9494b8;
    width: 100%;
}

/* Mengatur gaya kartu agar tidak ada gap antar kartu */
.card-group .card {
    margin: 0; /* Hilangkan margin antar kartu */
    border: none; /* Hilangkan border jika ada */
    background-color: transparent; /* Set background transparan agar warna dari .bg-custom terlihat */
}



.section-about{
    background: linear-gradient(180deg, rgb(4 100 156 / 83%), rgba(4 100 156 / 83%)), url(/rdl/img/about-bg.png);
    background-size: cover;
    background-position: center;
}

.section-expertize{
    background-color: #166499; /* For browsers that do not support gradients */
    /* global 90%+ browsers support */
    background: conic-gradient(from 0deg at 50% 52%, rgba(22, 100, 153, 1) 20%, rgba(5, 150, 178, 1) 30%, rgba(22, 100, 153, 1) 56%, rgba(5, 150, 178, 1) 84%, rgba(22, 100, 153, 1) 90%);
}


.section-general{
    background-color: #156398;
    padding: 2em 2em 2em 2em;
}


.card.card-misi{
    background:#EDF8FC;
    border: 1px solid #bfbebe;
    box-shadow: 2px 3px 2px 1px #888888;
}

.card.card-misi:hover{
    background:#EDF8FC;
    border: 2px solid #166499;
    box-shadow: 4px 3px 4px 1px #888888;
}

.section-service{
    padding: 2em 2em 5em 2em;
}

.left-1{
    margin-left: -50px;
}

.card-team{
    border-radius: 10px;
    border: 1px solid #B3C3D1;
    background: #fff;
    padding: 15px;
    
}

.card-team:hover{
    border-radius: 10px;
    border: 2px solid #B3C3D1;
    background: #fff;
    padding: 15px;
    box-shadow: 4px 3px 4px 1px #888888;
    
}

.card-contact {
    border-radius: 20px;
    border: 1px solid #B3C3D1;
    background: #fff;
    padding: 0px;
    max-height: 200px;
    height: 100px;
}
.card-contact:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Tambahkan shadow */
    transform: scale(1.05); /* Perbesar sedikit */
    border: 1px solid #8FA5C0; /* Ubah warna border saat hover */
}

.form-input-bg{
    background-color: #eaeaea96;
}

.btn-push{
    background: #1975B1;
    color: #fff;
}

.card-maps{
    border-radius: 10px;
    border: 3px solid #B3C3D1;
    background: #fff;
    padding: 1px;
    
}

.section-career{
    background: linear-gradient(180deg, #156398 , #156398), url(/rdl/img/bg-contact.png);
    background-size: cover;
    background-position: center;
}


.card-about{
    background: transparent;
}

/* about carausel */

.thumbnail-gallery {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 0;
}
.thumbnail-gallery img {
    max-width: 100px; /* Adjust the size of the thumbnails */
    cursor: pointer;
    margin: 0 5px;
    flex: 0 0 auto;
}
.thumbnail-gallery img.active {
    border: 2px solid #007bff;
}

.carousel-control-prev-icon,
        .carousel-control-next-icon {
            display: none;
        }
.custom-control-prev-icon,
.custom-control-next-icon {
    font-size: 2rem;
    color: #fff;
    background: #006B80;
    width: 35px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.carousel-control-prev,
.carousel-control-next {
    width: auto;
    top: 50%;
    transform: translateY(-50%);
}
.carousel-control-prev {
    left: 10px;
}
.carousel-control-next {
    right: 10px;
}


.home-control-prev-icon,
.home-control-next-icon {
    font-size: 2rem;
    color: #fff;
    background: transparent;
    width: 35px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.float-menu {
    position: fixed;
    width: 60px;
    height: 80px; /* Adjusted height to accommodate text */
    bottom: 300px;
    right: 0px;
    background-color: #B8D4E7;
    color: #FFF;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items in a column */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    padding: 10px 0; /* Add some padding */
}

.float-menu i {
    font-size: 24px; /* Adjust icon size */
    margin-bottom: 5px; /* Space between icon and text */
    color: #176AA1;
}

.float-menu span {
    font-size: 12px;
    font-weight: bold;
    color: #176AA1;
}


.card.card-product{
    background-color: rgba(231, 236, 240, 1) !important;
}

.card-product:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background: rgb(103,171,219);
    background: linear-gradient(179deg, rgba(103,171,219,1) 32%, rgba(255,255,255,1) 100%);
}


.card-solution {
    background-color: rgba(4, 22, 37, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    min-height: 90%;
}

.card-solution:hover {
    transform: translateY(-5px); /* Move the card slightly up */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a shadow for elevation effect */
}


.btn-pdf {
    border: 3px solid; /* fallback border if gradient is not supported */
    border-image: linear-gradient(to right, rgba(176, 209, 216, 1), rgba(230, 240, 242, 0)) 1;
    color: #000 !important;
    padding: 10px 20px; /* Adjust padding as needed */
    background-color: #fff; /* Adjust background color as needed */
    text-decoration: none; /* Remove underline from links if the button is a link */
    display: inline-block; /* Ensure proper sizing */
}


.btn-learn {
    border: 1px solid; /* fallback border if gradient is not supported */
    border-image: linear-gradient(to right, rgba(176, 209, 216, 1), rgba(230, 240, 242, 0)) 1;
    color: #000 !important;
    padding: 10px 20px; /* Adjust padding as needed */
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    text-decoration: none; /* Remove underline from links if the button is a link */
    display: inline-block; /* Ensure proper sizing */
}




/* Pagination settings */
.custom-pagination .pagination{ margin:0 auto; }
.custom-pagination .pagination>li>a{ 
    display: block; 
    border: none; 
    background: transparent; 
    color: #7a7979 !important; 
    font-size: 14px; 
    width: 45px; 
    height: 45px; 
    margin:0 3px; 
    -webkit-transition: all 0.25s; 
    -moz-transition: all 0.25s; 
    transition: all 0.25s; 
    display: flex; 
    display: -ms-flexbox; 
    justify-content: center; 
    -ms-flex-pack: center; 
    align-items: 
    center; -ms-flex-align: center; 
}
.custom-pagination .pagination>li.active>a{ 
    background-color: transparent !important; 
    color: #000 !important; 
    font-weight: bold;
    cursor: default;  
}

/* Pagination hovers */
.custom-pagination .pagination>li:not(.active)>a:hover{ 
    color:#0B3F6B; 
    background-color:transparent;
}
.custom-pagination .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{ 
    background-color:#dedede; 
    border-color:#dedede; 
    color:inherit; 
}
.custom-pagination .pagination-lg>li>a, .pagination-lg>li>span{ 
    padding: 7px 22px; 
}


.bg-service{
    background-color: #E7ECF0;
    border-top-right-radius: 150px;
}


.card.card-services{
    background: transparent;
    padding: 20px;
}


.row-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; /* Mengatur jarak antar card */
    position: relative; /* Untuk pseudo-elemen */
}

/* Garis vertikal untuk .row-services */
.row-services::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: #BFBFBF; /* Warna garis */
}

/* Garis horizontal untuk .row-services */
.row-services::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #BFBFBF; /* Warna garis */
}

/* Ukuran font untuk judul dan paragraf di .card-services */
.card-services h3 {
    font-size: 24px;
}

.card-services p {
    font-size: 16px;
}

/* Ukuran font untuk perangkat mobile di .card-services */
@media (max-width: 767px) {
    .card-services h3 {
        font-size: 20px;
    }

    .card-services p {
        font-size: 14px;
    }

    /* Menghilangkan garis vertikal dan horizontal di .row-services pada mobile */
    /* .row-services::before,
    .row-services::after {
        content: none;
    } */

    .card.card-services{
        background: transparent;
        padding: 1px;
    }
}


/* Efek hover pada h3 */
.bottom-0.left-0.text-dark h3 {
    transition: color 0.3s ease, transform 0.3s ease;
}

.bottom-0.left-0.text-dark h3:hover {
    color: #1975B1; /* Ubah warna teks saat hover */
    transform: translateX(5px); /* Efek pergeseran sedikit ke kanan */
    font-weight: bold;
}

/* Efek hover pada paragraf p */
.text-color-1 {
    transition: color 0.3s ease, transform 0.3s ease;
}

.text-color-1:hover {
    color: #1975B1; /* Ubah warna teks saat hover */
    transform: translateY(5px); /* Efek pergeseran sedikit ke bawah */
    font-weight: bold;
}




.bg-accent-gallery {
    background: linear-gradient(90deg, #163844 0%, #368DAA 100%);
    background-size: cover;
    background-blend-mode: overlay;
}


.section-gallery{
    padding: 5em 2em 2em 2em !important;
    overflow: hidden;
}


.bg_stack{
    background-color: #E8F1F7;
    border: 1px solid #176AA1;
    border-top-right-radius: 15px; /* Sudut kanan atas */
    border-bottom-right-radius: 15px;
}

.bg_tech {
    background: linear-gradient(90deg, rgba(21, 95, 145, 1) 0%, rgba(5, 150, 178, 1) 100%);
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-top-right-radius: 14px; /* Sudut kanan atas */
    border-bottom-right-radius: 14px;
}

.rectangle-svg {
    position: absolute;
    top: -55px;
    right: 215px;
    z-index: 0;
    opacity: 0.8;
}

.bg_tech h3, .bg_tech p {
    position: relative;
    z-index: 1; /* Konten berada di depan rectangle */
}



.btn.btn-discuss {
    display: inline-block; /* Pastikan button terlihat */
    background: linear-gradient(90deg, rgba(176, 209, 216, 1) 0%, rgba(230, 240, 242, 0) 100%);
    padding: 15px 30px; /* Ukuran padding */
    text-decoration: none; /* Hilangkan garis bawah */
    font-weight: bold; /* Teks lebih tebal */
    transition: all 0.3s ease; /* Animasi pada hover */
}

.btn.btn-discuss:hover {
    background: linear-gradient(90deg, rgba(176, 209, 216, 1) 20%, rgba(230, 240, 242, 0.8) 80%);
    color: #005f78; /* Warna teks saat hover */
}


.box-stack {
    position: relative; /* Dibutuhkan untuk positioning pseudo-element */
    padding-left: 20px; /* Memberikan jarak dari border ke konten */
}

.box-stack::before {
    content: ""; /* Membuat elemen pseudo */
    position: absolute;
    top: 0;
    left: 0;
    width: 5px; /* Ketebalan border */
    height: 100%; /* Tinggi penuh elemen */
    background: linear-gradient(90deg, rgba(103, 171, 219, 1) 36%, rgb(255 255 255 / 5%) 93%)
}


.box-stack .social-icon {
    display: flex; /* Atur elemen anak menjadi fleksibel */
    flex-wrap: wrap; /* Gambar otomatis pindah ke baris berikutnya */
    gap: 40px; /* Jarak antar gambar */
}




@media (min-width: 768px) { /* Target layar ukuran medium (md) ke atas */
    .col-md-4-5 {
        flex: 0 0 37.5%; /* 4.5 dari 12 = 37.5% */
        max-width: 37.5%;
    }
    .col-md-3 {
        flex: 0 0 25%; /* 3 dari 12 = 25% */
        max-width: 25%;
    }
}