:root {
    --color-primary: #007fc5;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-light: #FDFEFE;
    --color-dark: #343a40;
    --color--primarySandton: #425465;
}

.section-ourexperties{
    display: flex;
    padding: 48px 24px;
    flex-direction: column;
    align-items: center;
    gap: 78px;
    align-self: stretch;
}

.content-ourexperties {
    display: flex;
    max-width: 1280px;
    justify-content: space-between;
    align-items: center;
}

.text-ourexperties{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    flex: 1 0 0;
}
.text-ourexperties .title-section{
    color: var(--color--primarySandton);
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 44px; /* 122.222% */
    letter-spacing: -0.65px;
}

.text-ourexperties text {
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.25px;
    color: #5A676C;
}

.product-section {  
    display: grid;
    gap: 24px;
    max-width: 1280px;  
    margin: 0 auto;  
    padding: 20px;  
    text-align: center;  
}  

.product-section h2{
    padding: 0;
    margin: 0;
    color: var(--color--primarySandton);
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 44px; /* 122.222% */
    letter-spacing: -0.65px;
}


.carousel {
    max-width: 1280px;  
    position: relative;     
    padding: 24px 16px;
    overflow: hidden;
}    
    
.carousel-container {    
    display: flex;  
    gap: 24px;  
    transition: transform 0.3s ease;    
} 

.carousel-button {  
    position: absolute;  
    top: 50%;  
    transform: translateY(-50%);  
    background-color: rgba(255, 255, 255, 0.7);  
    border: none;  
    cursor: pointer;  
    padding: 10px;  
    border-radius: 50%;  
}  
  
.prev {  
    left: 10px;  
}  
  
.next {  
    right: 10px;  
}  
  
.carousel-indicators {  
    text-align: center;  
    margin-top: 10px;  
}  
  
.indicator {  
    display: inline-block;  
    width: 10px;  
    height: 10px;  
    background-color: #ccc;  
    border-radius: 50%;  
    margin: 0 5px;  
    cursor: pointer;  
}  
  
.indicator.active {  
    background-color: var(--color-primary); /* Warna untuk indikator aktif */  
}  

.product-details {  
    padding: 0 24px;
    margin: 0 auto;
}  
  
.carousel-container {
    display: flex;
    width: 100%;
    max-width: 1280px;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Sembunyikan bagian yang melampaui */  
    height: 700px; /* Tinggi untuk carousel */  
    border-radius: 16px;
    margin: 0 auto; /* Pusatkan kontainer */
}  
  
.carousel-products { 
    display: flex;
    max-width: 1280px;
    width: 100%;
    align-items: center;
    border-radius: 16px;
    transition: transform 0.5s ease-in-out; /* Efek transisi saat menggeser */  
}  
  
.content-product-details {  
    display: flex;
    flex: 0 0  100%;
    height: 700px;
    max-width: 1280px;
    padding-bottom: 16px;
    flex-direction: column;
    align-items: center;
    gap: 78px;
    overflow: hidden;
    border-radius: 16px;
    background-size: cover;  
    background-position: center;  
}  
  
.text-product-details {  
    display: flex;  
    padding: 25px;  
    flex-direction: column;  
    align-items: center;  
    gap: 10px;  
    align-self: stretch;  
    background: linear-gradient(3deg, rgba(255, 255, 255, 0.00) 11%, #FFF 50.1%);
}  
  
.text-product-details .title-section {  
    text-align: center;
    color: var(--color-primary);  
    font-size: 32px;  
    font-style: normal;  
    font-weight: 600;  
    line-height: 44px; /* 122.222% */  
    letter-spacing: -0.65px;  
}  
  
.text-product-details text {  
    text-align: center;  
    font-size: 18px;  
    font-style: normal;  
    font-weight: 400;  
    line-height: 28px;  
    letter-spacing: -0.25px;  
    color: #5A676C;  
}  


 /* css for section */
 .vision-section {  
    margin: 0 auto;  
    padding: 40px 24px 0;  
    text-align: center;  
}  
  
.vision-cards {  
    display: flex;
    padding: 48px 24px 0;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 12px;
    align-self: stretch;
    flex-wrap: wrap;;  
    justify-content: center;  
    gap: 20px; /* Jarak antar card */  
}  
  
.vision-card {
    display: flex;
    min-width: 370px;
    max-width: 616px;
    height: 200px;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    flex: 1 0 0;
}  
  
.vision-card h3 {
    margin: 0;
    padding: 0;
}

.card-title {  
    position: relative; /* Untuk positioning pseudo-element */  
    color: var(--color-primary); /* Warna biru */  
    font-size: 32px; /* Ukuran font judul card */  
    font-weight: 600;  
    margin-bottom: 10px; 
}  
  

.background-text {  
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(0, 127, 197, 0.05);
    text-align: center;
    font-family: var(--Typeface-Family-display, Inter);
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--Typeface-Line-Height-118, 118px); /* 118% */
    letter-spacing: -0.65px;
    left: 50%;  
    top: 50%;  
    transform: translate(-50%, -50%); 
    z-index: -1; /* Pastikan berada di belakang teks utama */
    white-space: nowrap; /* Mencegah teks terputus */
}  
  
.vision-card p {  
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.25px;
    color: #5A676C;;
}  

.section-projects{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 0px;
    gap: 78px;
}

.text-projects{
    display: flex;
    max-width: 1280px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.title-projects{
    color: var(--color-primary);
    padding: 0;
    margin: 0;
    /* Xdemia/Inter/Normal/SemiBold/xxxLarge-H6 */
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 44px; /* 122.222% */
    letter-spacing: -0.65px;
}

.text-projects text{
    color:var(--color--primarySandton);
    text-align: center;
    /* Xdemia/Inter/Normal/Regular/Medium-Subtitle 2-Button 1 */
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 155.556% */
    letter-spacing: -0.25px;
}
  
.carousel-container-projects {  
    position: relative; /* Agar tombol dapat diposisikan relatif terhadap kontainer */  
    max-width: 1280px;
    overflow: hidden; /* Sembunyikan bagian yang melampaui kontainer */
    width: 100%; /* Pastikan kontainer mengambil lebar penuh */
    margin: 0 auto; /* Pusatkan kontainer */  
}  
.card-container-projects {  
    display: flex; /* Mengatur kartu dalam baris */  
    transition: transform 0.5s ease-in-out; /* Efek transisi saat menggeser */  
    width: 100%; /* Pastikan lebar kontainer 100% */  
}  
  
.card-projects {  
    display: flex;
    flex: 0 0 48%; /* Memenuhi kontainer jika di bawah 1280px */  
    box-sizing: border-box; /* Menghitung padding dan margin dalam ukuran */ 
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}  


  
@media (min-width: 1024px) {  
    .card-projects {  
        flex: 1 0 0; /* Tampilkan tiga kartu saat lebar lebih dari 1024px */  
    }  
} 

@media (max-width: 600px){
    .card-projects{
        flex: 0 0 100%;
    }
}
.card-content-projects {  
    position: relative;  
    width: 100%;  
    height: 564px; /* Tinggi kartu */  
    margin: 16px 16px;
    background-size: cover;  
    background-position: center;  
    border-radius: 16px;  
    overflow: hidden;    
    display: flex;  
    flex-direction: column; /* Mengatur konten dalam kolom */  
    justify-content: flex-end; /* Mengatur konten ke bawah */  
}  

.card-projects:hover {
    transform: scale(1.05); /* Membesarkan kartu sedikit saat di-hover */
}
  
.overlay-projects {  
    position: absolute;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 47.17%, rgba(30, 30, 30, 0.50) 90%);  
}  
  
.text-content-projects {  
    display: flex;
    flex-direction: column;
    position: relative;  
    z-index: 1; /* Pastikan teks berada di atas overlay */  
    padding: 24px; /* Padding untuk teks */  
    gap: 16px;
}  

.text-content-projects h2{
    margin: 0;
    padding: 0;
    color: var(--Xdemia-Neutral-Xdemia-NeutralWhite, #FDFEFE);
    /* Xdemia/Inter/Normal/SemiBold/xxLarge-Title 1 */
    font-family: var(--Typeface-Family-display, Inter);
    font-size: var(--Typeface-Size-32-px, 32px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Typeface-Line-Height-42, 42px); /* 131.25% */
    letter-spacing: -0.65px;
}

.text-content-projects p{
    margin: 0;
    padding: 0;
    color: var(--Xdemia-Neutral-Xdemia-NeutralWhite, #FDFEFE);

    /* Xdemia/Inter/Normal/Regular/Medium-Subtitle 2-Button 1 */
    font-family: var(--Typeface-Family-display, Inter);
    font-size: var(--Typeface-Size-18-px, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typeface-Line-Height-28, 28px); /* 155.556% */
    letter-spacing: -0.25px;
}
  
.arrow-button { 
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 10px;
    border-radius: 36px;
    background: var(--Sandton_Primary, #007FC5);
    /* Xdemia/Elevation/Elevation - M */
    box-shadow: 0px 7px 16px 0px rgba(21, 24, 25, 0.16);
    border: none; /* Hilangkan border */  
    cursor: pointer; /* Ubah kursor menjadi pointer */  
    position: absolute; /* Posisi absolut */  
    top: 50%; /* Pusatkan secara vertikal */  
    transform: translateY(-50%); /* Pusatkan secara vertikal */  
    z-index: 10; /* Pastikan tombol berada di atas kartu */  
}  
  
.left-arrow {  
    left: 10px; /* Jarak dari kiri */  
}  
  
.right-arrow {  
    right: 10px; /* Jarak dari kanan */  
}  
  
.arrow-icon {  
    width: 24px; /* Ukuran ikon */  
    height: 24px; /* Ukuran ikon */  
}  



.section-ourClients {
    display: flex;
    padding: 48px 24px;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
}

.container-cards-ourClients{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 16px 24px;
    align-self: stretch;
    flex-wrap: wrap;
}

.cards-ourClients{
    display: flex;
    width: 150px;
    height: 150px;
    padding: 36px 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    border: 1px solid var(--Xdemia-Neutral-Xdemia-Neutral-200, #C5CCCE);
    background: #FFF;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    /* Xdemia/Elevation/Elevation - S */
    box-shadow: 0px 1px 4px 0px rgba(21, 24, 25, 0.10);
}

.cards-ourClients:hover{
    transform: scale(1.05);
}

.cards-ourClients img{
    width: 100%;  
    height: 100%;  
    object-fit: contain; /* Memastikan gambar memenuhi kontainer sambil mempertahankan rasio aspek */ 
    border-radius: 16px; 
}