add styling for pesan buket, detail buket, and pembayaran buket view

public/css/user/main.css

@@ -10,24 +10,18 @@ :root,
 [data-bs-theme=light] {
     /* --- BRAND COLORS --- */
     --bs-primary: #3B8181;
-    /* Teal Utama */
     --bs-primary-rgb: 59, 129, 129;
     --bs-primary-hover: #2f6666;
-    /* Hover Teal */
-
     --bs-link-hover-color: #2a6161;
-    /* Link Hover Spesifik */
+    --bs-brick: #E66351;
-
+    --bs-brick-hover: #cf5948;
-    --flo-accent: #E05D44;
+    --bs-red: #DC464F;
-    /* Merah Bata (Tombol Aksi) */
+    --bs-red-hover: #c43e46;
-    --flo-accent-hover: #c04d36;
-
     /* --- STANDARD COLORS (Grayscale) --- */
     --bs-white: #ffffff;
     --bs-white-rgb: 255, 255, 255;
 
     --bs-black: #000000;
-    /* Hitam Pekat */
     --bs-black-rgb: 0, 0, 0;
 
     --bs-gray-100: #f8f9fa;
@@ -49,13 +43,19 @@ [data-bs-theme=light] {
 
     /* --- THEME ASSIGNMENTS --- */
     --bs-body-bg: var(--bs-white);
-    --bs-body-color: var(--bs-gray-600);
+    --bs-body-color: var(--bs-gray-700);
-    --bs-heading-color: var(--bs-gray-900);
+    --bs-heading-color: black;
 
     /* Legacy Template Vars */
     --bs-secondary-rgb: 108, 117, 125;
     --inverse-color-rgb: 33, 37, 41;
 
+    --body-font: 0.85rem;
+    --heading-font: 1.7rem;
+    --heading2-font: 1.5rem;
+    --heading3-font: 1.2rem;
+    --subheading-font: 1rem;
+    --nav-font: 0.95rem;
     /* --- LAYOUT --- */
     --navbar-height: 80px;
     --header-spacing: 120px;
@@ -65,7 +65,8 @@ [data-bs-theme=light] {
    2. BASE STYLES
    ========================================= */
 body {
-    font: 1rem/1.7 "Inter", sans-serif;
+    font-family: "Poppins", sans-serif !important;
+    line-height: 1.7;
     background-color: var(--bs-body-bg);
     color: var(--bs-body-color);
     -webkit-font-smoothing: antialiased;
@@ -134,13 +135,14 @@ .x-small {
 
 /* Buttons Default */
 .btn {
-    padding: 8px 26px;
+    padding: 10px 24px;
     background-color: var(--bs-primary);
     color: var(--bs-white);
     border: 1px solid transparent;
     border-radius: 36px;
     position: relative;
-    font-weight: 600;
+    font-weight: 500;
+    font-size: var(--body-font)
 }
 
 .btn:hover,
@@ -156,7 +158,7 @@ .form-control {
     padding-top: 10px;
     padding-bottom: 10px;
     border-width: 1px;
-    font-size: 16px;
+    font-size: var(--body-font);
     background-color: transparent;
     border-color: rgba(var(--inverse-color-rgb), 0.1);
 }
@@ -206,7 +208,7 @@ .fbs__net-navbar .navbar-brand .logo.light {
 .fbs__net-navbar .navbar-nav>li>.nav-link {
     position: relative;
     padding: 22px 10px;
-    font-size: 0.9375rem;
+    font-size: var(--nav-font);
     color: rgba(var(--inverse-color-rgb), 1);
     transition: 0.3s all ease;
 }
@@ -283,23 +285,29 @@ .subtitle {
     padding: 5px 12px;
     border-radius: 7px;
     font-weight: 600;
-    font-size: 0.75rem;
+    font-size: var(--body-font);
     margin-bottom: 10px;
 }
 
+.hero-description {
+    color: var(--bs-body-color);
+    font-size: var(--subheading-font);
+    margin-bottom: 1rem;
+}
+
 .hero__v6 .hero-title {
-    font-size: 48px;
+    font-size: 3rem
 }
 
 @media (max-width: 1199.98px) {
     .hero__v6 .hero-title {
-        font-size: 40px;
+        font-size: 2.3rem;
     }
 }
 
 @media (max-width: 991.98px) {
     .hero__v6 .hero-title {
-        font-size: 30px;
+        font-size: 2rem;
     }
 }
 
@@ -352,9 +360,9 @@ @media (max-width: 991px) {
    5. LANDING SECTIONS
    ========================================= */
 .section-buket {
-    padding-top: 80px !important;
+    padding-top: 80px;
     padding-bottom: 80px;
-    background-color: var(--bs-gray-100);
+    background-color: rgba(var(--bs-primary-rgb), 0.05);
 }
 
 .section-foto {
@@ -363,68 +371,106 @@ .section-foto {
     background-color: var(--bs-white);
 }
 
+/* --- TYPOGRAPHY --- */
 .buket-title,
 .foto-title {
-    font-weight: 800;
+    font-weight: 700;
-    font-size: 2.5rem;
+    font-size: var(--heading-font);
     color: var(--bs-heading-color);
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
 }
 
 .buket-desc,
 .foto-desc {
     color: var(--bs-body-color);
-    line-height: 1.8;
+    font-size: var(--subheading-font);
-    font-size: 1.1rem;
+    margin-bottom: 1rem;
-    margin-bottom: 2rem;
+    text-align: justify;
 }
 
-/* Images */
+/* --- COLLAGE WRAPPER --- */
-.buket-img,
+.collage-wrapper {
-.foto-img {
+    max-width: 500px;
+    margin: 0 auto;
+}
+
+/* Gambar Besar (2 buah ditumpuk) */
+.img-lg {
     width: 100%;
+    height: 200px;
     object-fit: cover;
-    border-radius: 1rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease;
 }
 
-.buket-img:hover,
+/* Gambar Sedang/Kecil (1 buah di tengah) */
-.foto-img:hover {
+.img-md {
-    transform: scale(1.02);
+    width: 100%;
+    height: 220px;
+    object-fit: cover;
+    transition: transform 0.3s ease;
 }
 
-.buket-img.main-img {
+/* Hover Effect */
-    height: 300px;
+.img-lg:hover,
+.img-md:hover {
+    transform: scale(1.03);
 }
 
-.buket-img.secondary-img {
+/* Responsive Fix (Mobile) */
-    height: 250px;
+@media (max-width: 767.98px) {
+    .collage-wrapper {
+        margin-bottom: 30px;
     }
 
-.mt-n-custom {
+    .img-lg,
-    margin-top: -1.5rem !important;
+    .img-md {
+        height: 160px;
+    }
 }
 
-/* Custom Buttons */
+/* --- BUTTONS --- */
 .btn-buket,
 .btn-foto {
-    background-color: var(--flo-accent);
-    border: 1px solid var(--flo-accent);
     color: var(--bs-white);
-    padding: 10px 30px;
+    padding: 12px 24px;
     border-radius: 50px;
-    font-weight: 600;
+    font-weight: 500;
+    display: inline-block;
+    text-align: center;
     transition: all 0.3s ease;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    /* Tambahan shadow tombol */
 }
 
-.btn-buket:hover,
+/* Warna Brick (Buket) */
-.btn-foto:hover {
+.btn-buket {
-    background-color: var(--flo-accent-hover);
+    background-color: var(--bs-brick);
+    border: 1px solid var(--bs-brick);
+}
+
+.btn-buket:hover {
+    background-color: var(--bs-brick-hover) !important;
+    border-color: var(--bs-brick-hover) !important;
     color: var(--bs-white);
     transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(230, 99, 81, 0.3);
+    /* Shadow warna brick */
 }
 
+/* Warna Red (Foto) */
+.btn-foto {
+    background-color: var(--bs-red);
+    border: 1px solid var(--bs-red);
+}
+
+.btn-foto:hover {
+    background-color: var(--bs-red-hover) !important;
+    border-color: var(--bs-red-hover) !important;
+    color: var(--bs-white);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(220, 70, 79, 0.3);
+    /* Shadow warna red */
+}
 
 /* =========================================
    6. KATALOG PAGES
@@ -439,9 +485,8 @@ .section-bookingfoto {
 .katalogbuket-title,
 .bookingfoto-title {
     font-weight: 800;
-    font-size: 2rem;
+    font-size: var(--heading-font);
     color: var(--bs-black);
-    /* Menggunakan Black Pekat sesuai request */
 }
 
 /* Search */
@@ -456,7 +501,7 @@ .katalogbuket-search-input {
     border: none;
     border-radius: 50px;
     padding: 12px 20px 12px 45px;
-    font-size: 0.95rem;
+    font-size: var(--body-font);
 }
 
 .katalogbuket-search-input:focus {
@@ -480,10 +525,45 @@ .katalogbuket-filter-box {
     background-color: var(--bs-white);
 }
 
+/* =========================================
+   6. KATALOG PAGES (Update Sidebar Fonts)
+   ========================================= */
+
+/* 1. Judul "Filter" Paling Atas */
+.katalogbuket-filter-box h5 {
+    font-weight: 600 !important;
+    /* Bold */
+    font-size: var(--subheading-font);
+    color: var(--bs-heading-color);
+}
+
+.katalogbuket-category-list li {
+    margin-bottom: 5px;
+}
+
+.katalogbuket-category-list a.active {
+    color: var(--bs-black);
+    font-weight: 700;
+}
+
+/* 3. Judul Accordion (Harga, Ukuran) */
+.katalogbuket .accordion-button {
+    font-family: "Poppins", sans-serif;
+    font-weight: 600 !important;
+    font-size: 1rem;
+    color: var(--bs-heading-color);
+}
+
+/* Teks angka range harga (Rp 50.000 - Rp 200.000) */
+.katalogbuket-filter-box .small {
+    font-weight: 500;
+    font-size: var(--body-font);
+}
+
 .katalogbuket-category-list a {
     text-decoration: none;
     color: var(--bs-gray-600);
-    font-size: 0.95rem;
+    font-size: var(--nav-font);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -492,17 +572,18 @@ .katalogbuket-category-list a {
 
 .katalogbuket-category-list a:hover {
     color: var(--bs-black);
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .btn-size {
-    width: 40px;
+    padding: 0 !important;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
     border: 1px solid var(--bs-gray-200);
     background-color: var(--bs-gray-100);
     color: var(--bs-gray-800);
-    font-size: 0.85rem;
+    font-size: var(--body-font);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -511,6 +592,7 @@ .btn-size {
 
 .btn-size:hover {
     border-color: var(--bs-black);
+    background-color: var(--bs-black) !important;
 }
 
 .btn-size.active {
@@ -524,14 +606,15 @@ .btn-katalogbuket-dark {
     color: var(--bs-white);
     border-radius: 50px;
     padding: 10px;
-    font-weight: 600;
+    font-weight: 500;
     width: 100%;
     border: none;
     transition: all 0.3s;
 }
 
 .btn-katalogbuket-dark:hover {
-    background-color: var(--bs-gray-800);
+    background-color: var(--bs-gray-900) !important;
+    border-color: var(--bs-gray-900) !important;
     color: var(--bs-white);
 }
 
@@ -539,9 +622,9 @@ .btn-katalogbuket-dark:hover {
 .katalogbuket-card {
     cursor: pointer;
     transition: transform 0.3s;
-    padding: 8px 10px;
+    padding: 10px 12px;
     border: 1px solid var(--bs-gray-200);
-    border-radius: 12px;
+    border-radius: 20px;
 }
 
 .katalogbuket-card:hover {
@@ -554,6 +637,8 @@ .katalogbuket-card .img-wrapper img {
     object-fit: cover;
     background-color: var(--bs-gray-100);
     transition: transform 0.5s ease;
+    border-radius: 10px;
+
 }
 
 .katalogbuket-card:hover .img-wrapper img {
@@ -562,17 +647,61 @@ .katalogbuket-card:hover .img-wrapper img {
 
 .katalogbuket-product-title {
     font-weight: 700;
-    font-size: 1rem;
+    font-size: var(--subheading-font);
     margin-bottom: 4px;
     color: var(--bs-black);
 }
 
 .katalogbuket-product-price {
-    font-size: 0.9rem;
+    font-size: var(--nav-font);
     color: var(--bs-gray-600);
     font-weight: 500;
 }
 
+.btn-pagination {
+    color: var(--bs-black);
+    background-color: transparent;
+    border: 1px solid var(--bs-gray-500);
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.btn-pagination:hover {
+    background-color: var(--bs-black) !important;
+    /* Background jadi Teal */
+    color: var(--bs-white);
+    /* Teks jadi Putih */
+    transform: translateY(-2px);
+    /* Efek naik dikit */
+    box-shadow: 0 4px 10px rgba(59, 129, 129, 0.2);
+}
+
+/* 2. Angka Halaman */
+.pagination-numbers .page-number {
+    display: inline-block;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    border-radius: 5px;
+}
+
+/* Hover pada angka */
+.pagination-numbers .page-number:hover {
+    color: var(--bs-black);
+    background-color: var(--bs-gray-100);
+}
+
+/* Angka Aktif (Halaman saat ini) */
+.pagination-numbers .page-number.active {
+    color: var(--bs-black);
+    font-weight: 700;
+    border-bottom: 2px solid var(--bs-black);
+    /* Garis bawah indikator aktif */
+    border-radius: 0;
+    /* Biar garis bawahnya kotak */
+}
+
 /* Grid Cards (Foto - Clean) */
 .bookingfoto-card {
     background: transparent;
@@ -640,26 +769,69 @@ .section-detailfoto {
 }
 
 .detailbuket-title {
-    font-weight: 800;
+    font-weight: 700;
-    font-size: 2.2rem;
+    font-size: var(--heading-font);
     color: var(--bs-heading-color);
     margin-bottom: 10px;
 }
 
 .detailbuket-price {
-    font-weight: 700;
+    font-weight: 600;
-    font-size: 1.5rem;
+    font-size: var(--subheading-font);
     color: var(--bs-gray-800);
     margin-bottom: 20px;
 }
 
+.detailbuket-spec-label {
+    font-size: var(--body-font);
+    /* Pengganti style="font-size: 0.75rem" */
+    font-weight: 600;
+    /* Pengganti style="font-weight: 600" */
+    color: var(--bs-gray-600);
+    /* Pengganti class text-muted */
+    line-height: 1.2;
+}
+
+/* Value Besar (Fresh Flowers / Medium) */
+.detailbuket-spec-val {
+    font-weight: 600;
+    /* Pengganti class fw-bold */
+    color: black;
+    font-size: var(--body-font);
+    line-height: 1.2;
+}
+
+/* Garis Pemisah Vertical Custom */
+.detailbuket-vr {
+    width: 1px;
+    height: 35px;
+    /* Pengganti style="height: 35px" */
+    background-color: var(--bs-gray-400);
+    /* Warna abu */
+    opacity: 0.5;
+    margin: 0 1.5rem;
+    /* Memberi jarak kiri-kanan otomatis */
+}
+
+.detailbuket-desc {
+    font-size: var(--nav-font);
+    font-weight: 400;
+    line-height: 1.7;
+    text-align: justify;
+}
+
+.detailbuket-note {
+    font-size: var(--body-font);
+    line-height: 1.7;
+    text-align: justify;
+}
+
 /* Image Frame */
 .detailbuket-img-frame {
-    background-color: var(--bs-white);
+    background-color: transparent;
     padding: 15px;
     border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    border: 1px solid var(--bs-gray-200);
-    border: 1px solid #f0f0f0;
 }
 
 .detailbuket-img-frame img {
@@ -813,9 +985,9 @@ .btn-detailfoto-primary {
     background-color: var(--bs-primary);
     border: 1px solid var(--bs-primary);
     color: var(--bs-white);
-    padding: 12px 30px;
+    padding: 12px 24px;
     border-radius: 50px;
-    font-weight: 600;
+    font-weight: 500;
     text-align: center;
     display: inline-block;
     transition: all 0.3s;
@@ -833,9 +1005,9 @@ .btn-detailfoto-outline {
     background-color: var(--bs-white);
     border: 1px solid #dee2e6;
     color: var(--bs-primary);
-    padding: 12px 30px;
+    padding: 12px 24px;
     border-radius: 50px;
-    font-weight: 600;
+    font-weight: 500;
     text-align: center;
 }
 
@@ -858,11 +1030,34 @@ .section-formulirfoto {
 
 .formulirbuket-page-title,
 .formulirfoto-page-title {
-    font-weight: 800;
+    font-weight: 700;
-    font-size: 2rem;
+    font-size: var(--heading-font);
     color: var(--bs-heading-color);
 }
 
+.formulirbuket-section-title,
+.formulirfoto-section-title {
+    font-weight: 600;
+    font-size: var(--heading3-font);
+    color: var(--bs-heading-color);
+}
+
+
+.formulirbuket-section h6,
+.formulirfoto-section h6 {
+    font-weight: 600;
+    font-size: var(--nav-font);
+    color: var(--bs-heading-color);
+}
+
+.formulirbuket-section p,
+.formulirfoto-section p {
+    font-weight: 500;
+    font-size: var(--nav-font);
+    color: var(--bs-gray-700) !important;
+}
+
+
 /* Inputs & Cards */
 .formulirbuket-input,
 .formulirfoto-input {
@@ -879,6 +1074,34 @@ .formulirfoto-input:focus {
     box-shadow: 0 0 0 4px rgba(59, 129, 129, 0.1);
 }
 
+.formulirbuket-payment-box h5 {
+    font-weight: 600;
+    color: var(--bs-black);
+    font-size: var(--subheading-font);
+}
+
+.formulirbuket-payment-box .text-muted {
+    font-weight: 500;
+    font-size: 0.95rem;
+    color: var(--bs-gray-600) !important;
+}
+
+/* 3. Teks Instruksi ("Transfer ke Rekening Berikut", "Upload Bukti") */
+.formulirbuket-payment-box p.small {
+    font-weight: 600;
+    /* Bold */
+    color: var(--bs-heading-color);
+    font-size: var(--subheading-font);
+    margin-bottom: 10px;
+    display: block;
+}
+
+.formulirbuket-payment-box .d-flex.justify-content-between.mb-4 {
+    border-bottom: 1px solid var(--bs-gray-300);
+    padding-bottom: 10px;
+    margin-bottom: 10px !important;
+}
+
 .formulirfoto-card,
 .formulirfoto-payment-box,
 .formulirbuket-product-summary {
@@ -889,7 +1112,7 @@ .formulirbuket-product-summary {
 }
 
 .formulirbuket-product-summary {
-    padding: 15px;
+    padding: 10px;
 }
 
 .formulirbuket-product-summary img {
@@ -909,7 +1132,7 @@ .formulirfoto-bank-card {
 
 .formulirbuket-upload-area,
 .formulirfoto-upload-area {
-    border: 2px dashed var(--bs-gray-300);
+    border: 1.5px dashed var(--bs-gray-300);
     border-radius: 12px;
     background-color: var(--bs-gray-100);
     transition: all 0.3s;
@@ -921,7 +1144,89 @@ .formulirfoto-upload-area:hover {
     background-color: var(--bs-gray-200);
 }
 
-/* Buttons */
+.formulirbuket-upload-area i {
+    font-size: 2rem;
+    color: var(--bs-gray-400);
+    margin-bottom: 5px;
+    display: inline-block;
+    transition: color 0.3s;
+}
+
+.formulirbuket-upload-area p.small {
+    font-weight: 600;
+    color: var(--bs-gray-600) !important;
+    font-size: 0.9rem;
+    margin-bottom: 2px;
+}
+
+.formulirbuket-upload-area p.x-small {
+    color: var(--bs-gray-500) !important;
+    font-size: var(--body-font);
+}
+
+p.x-small.text-muted.mb-4 {
+    font-size: var(--body-font);
+    color: var(--bs-gray-600) !important;
+    margin-top: 10px;
+    font-style: italic;
+}
+
+.bank-num {
+    font-weight: 700;
+    font-size: var(--nav-font) !important;
+    color: var(--bs-heading-color);
+}
+
+.bank-name {
+    font-weight: 500;
+    font-size: var(--body-font) !important;
+    color: var(--bs-gray-600);
+}
+
+.form-label.small {
+    font-weight: 600;
+    color: var(--bs-heading-color);
+    font-size: var(--subheading-font);
+    margin-bottom: 6px;
+    display: block;
+}
+
+.formulirbuket-input {
+    background-color: #fff;
+    border: 1px solid var(--bs-gray-300);
+    border-radius: 12px;
+    padding: 12px 16px;
+    font-size: 0.95rem;
+    color: var(--bs-body-color);
+    width: 100%;
+    transition: all 0.3s ease-in-out;
+}
+
+.formulirbuket-input:focus {
+    background-color: #fff;
+    border-color: var(--bs-gray-500);
+    outline: none;
+}
+
+.formulirbuket-input::placeholder {
+    color: var(--bs-gray-600);
+    /* Abu muda */
+    font-size: 0.9rem;
+    font-weight: 400;
+}
+
+textarea.formulirbuket-input {
+    resize: vertical;
+    min-height: 80px;
+}
+
+input[type="date"].formulirbuket-input,
+input[type="time"].formulirbuket-input {
+    cursor: pointer;
+    color: var(--bs-gray-600);
+    font-size: 0.9rem;
+}
+
 .formulirbuket-btn-submit,
 .formulirfoto-btn-submit {
     background-color: var(--bs-primary);
@@ -930,7 +1235,7 @@ .formulirfoto-btn-submit {
     padding: 12px;
     border-radius: 50px;
     border: none;
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .formulirbuket-btn-submit:hover,
@@ -953,21 +1258,24 @@ .formulirfoto-btn-cancel {
 .formulirbuket-btn-cancel:hover,
 .formulirfoto-btn-cancel:hover {
     background-color: var(--bs-gray-100);
-    color: var(--bs-gray-800);
+    color: var(--bs-white);
 }
 
 
 /* =========================================
    9. FAQ SECTION (Fixes)
    ========================================= */
-.faq__v2 {
+
-    background-color: rgba(var(--inverse-color-rgb), 0.02);
+.faq__v2 h2 {
+    font-weight: 600;
+    font-size: 1.7rem;
+    color: var(--bs-heading-color);
 }
 
 .faq__v2 .subtitle {
     background-color: rgba(var(--bs-secondary-rgb), 0.2);
     color: var(--bs-primary);
-    padding: 5px 12px;
+    padding: 5px 10px;
     border-radius: 7px;
     font-weight: 600;
     font-size: 0.75rem;
@@ -975,17 +1283,18 @@ .faq__v2 .subtitle {
 
 .faq__v2 .custom-accordion .accordion-item {
     border: none;
-    margin-bottom: 10px;
+    margin-bottom: 6px;
     border-radius: 10px;
     overflow: hidden;
     transition: 0.3s all ease-in-out;
+    border: 1px solid var(--bs-gray-200);
 }
 
 .faq__v2 .custom-accordion .accordion-button {
-    font-size: 18px;
+    font-size: 1rem;
     font-weight: 500;
     color: var(--bs-heading-color);
-    padding: 20px;
+    padding: 12px 20px;
     border: none;
     outline: none;
 }
@@ -997,7 +1306,7 @@ .faq__v2 .custom-accordion .accordion-button:focus {
 
 .faq__v2 .custom-accordion .accordion-button:not(.collapsed) {
     background-color: transparent;
-    color: var(--bs-primary);
+    color: black;
     box-shadow: none;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
@@ -1006,7 +1315,7 @@ .faq__v2 .custom-accordion .accordion-button:not(.collapsed) {
 .faq__v2 .custom-accordion .accordion-button::after {
     content: "\f4fe";
     font-family: "bootstrap-icons";
-    color: var(--bs-primary);
+    color: black;
     font-size: 30px;
     background-image: none;
     transform: rotate(0deg);
@@ -1029,6 +1338,14 @@ .footer {
     font-size: 0.9rem;
 }
 
+.footer-menu li {
+    margin-bottom: 10px;
+}
+
+.footer-menu li:last-child {
+    margin-bottom: 0;
+}
+
 .footer-menu a {
     color: var(--bs-black);
     text-decoration: none;
@@ -1043,6 +1360,27 @@ .copyright-bar {
     color: var(--bs-white);
 }
 
+/* --- SOCIAL ICONS --- */
+.social-icon {
+    font-size: 1.2rem;
+    color: var(--bs-heading-color);
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icon:hover {
+    color: var(--bs-heading-color);
+    background-color: var(--bs-white);
+    transform: translateY(-3px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
 .back-to-top {
     position: fixed;
     visibility: hidden;