Update style.css

style.css

@@ -1,6 +1,6 @@
 /* Body */
 body {
-    font-family: 'Open Sans', Arial, sans-serif; /* Ganti font ke Open Sans untuk kesan lebih profesional */
+    font-family: 'Open Sans', Arial, sans-serif;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
@@ -29,11 +29,6 @@ body {
     object-fit: contain;
 }
 
-.navbar .logo img:hover {
-    transform: scale(1.1);
-    transition: transform 0.3s ease;
-}
-
 /* Headline */
 .headline {
     text-align: center;
@@ -62,13 +57,12 @@ body {
     flex-direction: column;
 }
 
-/* Container untuk semua elemen konversi */
 .converter-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-    max-width: 800px; /* Membatasi lebar agar tampilan tetap rapi pada layar besar */
+    max-width: 800px;
     padding: 40px;
     border-radius: 12px;
     background-color: white;
@@ -76,17 +70,15 @@ body {
     box-sizing: border-box;
 }
 
-/* Flexbox untuk bagian input Amount, From, Swap, dan To */
 .currency-box {
     display: flex;
     flex-direction: column;
     width: 100%;
     gap: 25px;
-    max-width: 800px; /* Membatasi lebar supaya lebih rapi pada layar besar */
-    margin: 0 auto; /* Menjaga posisi tetap di tengah */
+    max-width: 800px;
+    margin: 0 auto;
 }
 
-/* Untuk input amount */
 .currency-box .amount {
     display: flex;
     justify-content: space-between;
@@ -121,13 +113,6 @@ body {
     margin: 30px 0;
 }
 
-.currency-group {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
 .currency-group select {
     padding: 20px;
     font-size: 18px;
@@ -138,66 +123,45 @@ body {
 
 /* Swap Button */
 #swap-btn {
-    color: #000; /* Warna hitam untuk simbol swap */
+    color: #000;
     cursor: pointer;
-    border-radius: 50%; /* Membuat tombol swap berbentuk bulat */
-    border: 2px solid #000; /* Border hitam untuk tombol */
-    font-size: 30px; /* Ukuran lebih besar untuk tampilan web */
-    height: 70px; /* Ukuran lebih besar */
-    width: 70px; /* Ukuran lebih besar */
+    border-radius: 50%;
+    border: 2px solid #000;
+    font-size: 30px;
+    height: 70px;
+    width: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 30px auto;
     font-weight: bold;
-    transition: transform 0.3s ease; /* Menghapus background dan efek hover */
-}
-
-#swap-btn:hover {
-    transform: rotate(180deg); /* Rotasi saat hover */
+    transform: rotate(0deg); /* Awal tanpa hover */
 }
 
 /* Mode Mobile */
 @media screen and (max-width: 768px) {
     .currency-select {
         flex-direction: column;
-        justify-content: center;
-        align-items: center;
         gap: 15px;
     }
 
     #swap-btn {
-        transform: rotate(90deg); /* Rotasi tombol swap */
+        transform: rotate(90deg); /* Rotasi tombol swap di mode mobile */
         width: 60px;
         height: 60px;
         margin: 0;
     }
-
-    .currency-group {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
 }
 
-/* Mode Web dan Tablet */
+/* Mode Desktop */
 @media screen and (min-width: 769px) {
     .currency-select {
         flex-direction: row;
-        align-items: center;
         gap: 25px;
     }
 
     #swap-btn {
-        transform: rotate(0deg); /* Pastikan tombol swap tetap horizontal */
-        width: 70px; /* Ukuran lebih besar */
-        height: 70px; /* Ukuran lebih besar */
-    }
-
-    .currency-group {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+        transform: rotate(0deg); /* Tetap horizontal di mode desktop */
     }
 }
 
@@ -245,12 +209,6 @@ body {
     padding: 25px;
     border-radius: 10px;
     text-align: center;
-    transition: background-color 0.3s ease, transform 0.3s ease;
-}
-
-.step:hover {
-    background-color: #e0e0e0;
-    transform: translateY(-5px);
 }
 
 .step h3 {
@@ -268,10 +226,6 @@ body {
     border-top: 2px solid #003300;
 }
 
-.footer-content p {
-    margin: 5px 0;
-}
-
 .footer-content a {
     color: white;
     text-decoration: none;