html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', sans-serif;
  color: #333;
}

.corporate-nav {
  background-color: #000000;
}

.home-sec {
  height: 100vh;
  background-size: cover; 
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75)
    ),
    url("img/background/adidaya-bg.png") center / cover no-repeat;
  display: flex;
  align-items: center;
}

.about-sec {
  height: 100vh;
  background-size: cover; 
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75)
    ),
    url("img/foto/7.jpeg") center / cover no-repeat;
  display: flex;
  align-items: center;
}

.service-sec {
  height: 100vh;
  background-size: cover; 
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75)
    ),
    url("img/dokumentasi/back.jpeg") center / cover no-repeat;
  display: flex;
  align-items: center;
}

.our-service-sec {
  background: white ;
  padding-top: 50px;
}

.why-sec {
  background: #0cc0df ;
  padding-top: 50px;
}

.visi-sec {
  background: #ffde59 ;
  padding-top: 50px;
}

.misi-sec {
  background: #0cc0df ;
  padding-top: 50px;
}


.client-sec {
  background: white ;
  padding-top: 50px;
}

.comp-sec {
  background: white ;
  padding-top: 50px;

}

.team-sec{
  background: #0cc0df ;
  padding-top: 50px;
}

.contact-sec {
  background: #ffde59 ;
  padding-top: 50px;
}

.section-title {
  margin-bottom: 40px;
  font-weight: 600;
}

.aboutus-sec{
  background: #0cc0df ;
  padding-top: 150px;

}

.direk-sec{
  background: #ffde59 ;
  padding-top: 150px;

}

.footer {
  background-color: #0cc0df;
  color: white;
  text-align: center;
  padding: 20px 0;
  padding-top: 100px;
}

.adidaya {
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.75)
    ),
    url("img/adidaya.png") center / cover no-repeat;
    background-size: 70%;
}

.card-custom {
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(5px);
}

.icons a {
  text-decoration: none;

}

/* From Uiverse.io by adamgiebl */ 
.button-home {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  padding: 0.7em 2em;
  border: 3px solid #ffde59;
  border-radius: 50px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #0cc0df;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
  width: 200px
}

.button-home:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #0cc0df;
  z-index: -1;
}

.button-home:hover, .button-home:focus {
  color: white;

}

.button-home:hover:before, .button-home:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
  border-radius: 50px;
}

.button-home:active {
  transform: scale(0.9);
}

.dokumentasi-img{
  box-shadow: 10px;
}

/*Dokumentasi */
/* Container utama menggunakan Grid */
        .container-box {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* Membuat 4 kolom sama besar */
            gap: 15px; /* Jarak antar kotak */
            padding: 20px;
        }

        /* Gaya untuk setiap kotak */
        .box {
            border: 2px solid #ddd;
            border-radius: 8px; /* Sudut melengkung */
            overflow: hidden; /* Memastikan foto tidak keluar batas */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Efek bayangan */
            transition: transform 0.3s ease; /* Animasi saat hover */
        }

        /* Efek hover saat mouse di atas kotak */
        .box:hover {
            transform: scale(1.05);
            border-color: #3498db;
        }

        /* Gaya untuk gambar di dalam kotak */
        .box img {
            width: 100%;
            height: 200px; /* Tinggi gambar konsisten */
            object-fit: cover; /* Foto menutupi kotak tanpa distorsi */
            display: block;
        }

        /* Responsive: Mengubah jadi 2 kolom di tablet, 1 kolom di HP */
        @media (max-width: 768px) {
            .container-box {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 480px) {
            .container-box {
                grid-template-columns: 1fr;
            }
        }

/*Company Profile */
/* Container utama untuk baris gambar */
        .image-row {
            display: flex;
            justify-content: center; /* Mengatur agar ke tengah */
            align-items: center;    /* Mengatur vertikal center */
            gap: 15px;              /* Jarak antar gambar */
            padding: 20px;
        }

        /* Gaya untuk gambar */
        .image-row img {
            max-width: 100%;
            height: auto;
            border: 2px solid #ccc;
        }

        /* Ukuran Gambar 1 (Kecil) */
        .img-small {
            width: 350px;
            height: 200px;
            object-fit: cover; /* Agar gambar tidak gepeng */
        }

        /* Ukuran Gambar 2 (Sedang) */
        .img-medium {
            width: 350px;
            height: 200px;
            object-fit: cover;
        }

        /* Ukuran Gambar 3 (Besar/Tinggi) */
        .img-large {
            width: 650px;
            height: 300px;
            object-fit: cover;
        }