/*css body*/
body {
            scroll-behavior: smooth;
        }
        .hero {
            background: #007bff;
            color: #fff;
            padding: 100px 0;
            text-align: center;
        }
        .hero h1 {
            font-size: 3rem;
        }
        .portfolio-item {
            transition: transform 0.3s ease;
        }
        .portfolio-item:hover {
            transform: scale(1.05);
        }
        footer {
            background: #343a40;
            color: #fff;
        }
/* end css body*/
/*float wa*/
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
  }
  
  .whatsapp-button img {
    width: 60px;
    height: 60px;
  }
/*end float wa*/

/* Menghapus batasan lebar dan memastikan iframe Google Maps mengisi penuh */
.col-12 {
    padding: 0; /* Menghapus padding agar peta benar-benar mengisi lebar */
}

.border {
    border: none; /* Menghapus border jika tidak ingin border mengelilingi peta */
}

iframe {
    width: 100%;
    height: 400px; /* Sesuaikan tinggi sesuai kebutuhan */
}

@media (max-width: 768px) {
    iframe {
        height: 250px; /* Menurunkan tinggi peta pada perangkat mobile */
    }
}

/* Formulir Kontak */
.form-container {
    max-width: 600px;
    margin: -10px auto 20px; /* Menurunkan margin atas untuk mendekatkan form ke peta */
}
/* Mengatur jarak top untuk seluruh row */
.row {
    margin-top: 30px; /* Menambahkan jarak atas untuk seluruh row */
}

/* Mengatur jarak atas untuk judul */
h3.text-center {
    margin-top: 20px; /* Menambah jarak atas pada judul */
}

/* Mengatur jarak top pada setiap kolom */
.col-md-4, .col-md-8 {
    margin-top: 20px; /* Menambahkan jarak atas pada kolom */
}

/* Formulir Kontak */
#contact-form {
    background-color: #f9f9f9; /* Latar belakang form */
    padding: 30px;
    border-radius: 8px; /* Sudut melengkung pada form */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan untuk efek kedalaman */
}

/* Memberikan jarak pada kolom kiri (contact details) */
.contact-details {
    margin-top: 20px;
}

/* Mengatur jarak top pada alert */
#form-alert {
    margin-top: 20px;
    display: none; /* Menyembunyikan alert secara default */
}

.contact-details {
    background-color: #f8f9fa;
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 20px;
    margin: 25px auto 20px;
}

.contact-details i {
    color: #007bff;
    margin-right: 10px;
}

.contact-details h4 {
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .contact-details {
        margin-bottom: 15px;
    }

    .map-responsive iframe {
        height: 250px; /* Menurunkan tinggi peta pada perangkat mobile */
    }

    /* Menurunkan margin pada form kontak untuk perangkat mobile */
    .form-container {
        margin: -5px auto 10px;
    }
}
/*end form*/