Update static/css/style.css

static/css/style.css

@@ -7,29 +7,22 @@
 :root{
 
     --primary:#C89B3C;
-    --primary-dark:#A67C1A;
-    --primary-light:#E9D18B;
+    --primary-dark:#8B6914;
+    --primary-light:#E0C36D;
 
     --white:#FFFFFF;
-    --off-white:#FCFAF4;
-    --section:#F7F5EF;
 
-    --text:#000000;
-    --text-light:#222222;
-    --muted:#555555;
+    --off-white:#F4EFE3;
 
-    --border:#E6E6E6;
+    --section:#ECE5D6;
 
-    --success:#198754;
-    --danger:#DC3545;
+    --border:#D8CFBE;
 
-    --shadow:0 8px 30px rgba(0,0,0,.08);
+    --text:#000000;
 
-    --radius:16px;
+    --muted:#555555;
 
-    --transition:.35s ease;
 }
-
 /* =======================
    Global
 ======================= */
@@ -123,53 +116,96 @@ a:hover{
    Navbar
 ======================= */
 
-.premium-nav{
-
-    position:relative !important;
-
-    background:#fff !important;
+/* ======================================
+   Premium Golden Navbar
+====================================== */
 
-    border-bottom:3px solid var(--primary);
+.premium-nav{
 
-    box-shadow:0 3px 20px rgba(0,0,0,.08);
+    background:linear-gradient(135deg,#D4AF37,#B8860B);
 
     padding:15px 0;
 
+    box-shadow:0 8px 25px rgba(184,134,11,.35);
+
+    border-bottom:none;
 }
 
+/* Brand */
+
 .navbar-brand{
 
-    color:var(--primary-dark)!important;
+    color:#fff !important;
+
+    font-size:28px;
 
     font-weight:700;
 
 }
 
+.brand-highlight{
+
+    color:#fff;
+
+}
+
+/* Navigation */
+
+.navbar-nav{
+
+    gap:12px;
+
+}
+
+/* Default Tabs */
+
 .nav-link{
 
-    color:#000!important;
+    color:#fff !important;
 
     font-weight:600;
 
-    margin-left:18px;
+    padding:10px 22px !important;
+
+    border-radius:50px;
+
+    transition:.35s ease;
 
 }
 
+/* Hover */
+
 .nav-link:hover{
 
-    color:var(--primary-dark)!important;
+    background:rgba(255,255,255,.20);
+
+    color:#fff !important;
+
+    transform:translateY(-2px);
 
 }
 
+/* Active Tab */
+
 .nav-link.active{
 
-    color:var(--primary)!important;
+    background:#fff;
+
+    color:var(--primary-dark) !important;
+
+    font-weight:700;
+
+    box-shadow:0 8px 20px rgba(0,0,0,.15);
 
 }
 
-.nav-link::after{
+/* Active Hover */
 
-    background:var(--primary);
+.nav-link.active:hover{
+
+    background:#fff;
+
+    color:var(--primary-dark)!important;
 
 }
 
@@ -187,7 +223,9 @@ a:hover{
 
     align-items:center;
 
-    padding-top:50px;
+    margin-top:30px;      /* Space after navbar */
+
+    padding-top:100px;
 
 }
 
@@ -420,14 +458,130 @@ a:hover{
 }
 
 /* =======================
-   Contact
+   Contact Section
 ======================= */
 
-.contact-form-card h4,
-.contact-form-card label,
-.contact-form-card p{
+.contact-card,
+.contact-form-card{
 
-    color:#000!important;
+    background:#fff;
+
+    border:1px solid var(--border);
+
+    border-radius:22px;
+
+    padding:35px;
+
+    height:100%;
+
+    box-shadow:0 12px 30px rgba(0,0,0,.08);
+
+}
+
+/* Contact Information */
+
+.contact-item{
+
+    display:flex;
+
+    align-items:flex-start;
+
+    gap:18px;
+
+    margin-bottom:30px;
+
+}
+
+.contact-item i{
+
+    width:52px;
+
+    height:52px;
+
+    display:flex;
+
+    align-items:center;
+
+    justify-content:center;
+
+    border-radius:14px;
+
+    background:linear-gradient(135deg,#D4AF37,#B8860B);
+
+    color:#fff;
+
+    font-size:20px;
+
+    flex-shrink:0;
+
+}
+
+.contact-item h5{
+
+    margin-bottom:5px;
+
+    font-weight:700;
+
+}
+
+.contact-item p{
+
+    margin:0;
+
+    color:#666 !important;
+
+}
+
+/* Form */
+
+.contact-form-card label{
+
+    color:#000;
+
+    font-weight:600;
+
+    margin-bottom:8px;
+
+}
+
+.contact-form-card .form-control,
+.contact-form-card .form-select{
+
+    height:52px;
+
+    border-radius:12px;
+
+}
+
+.contact-form-card textarea{
+
+    min-height:180px;
+
+    resize:none;
+
+}
+
+/* Google Map */
+
+.map-box{
+
+    margin-top:30px;
+
+    overflow:hidden;
+
+    border-radius:18px;
+
+    border:3px solid var(--primary);
+
+}
+
+.map-box iframe{
+
+    width:100%;
+
+    height:320px;
+
+    border:0;
 
 }
 
@@ -474,35 +628,7 @@ footer{
     background:#198754;
 
 }
-.team-image{
-
-    height:220px;
-
-    display:flex;
-
-    justify-content:center;
-
-    align-items:center;
-
-    padding:20px;
-
-    background:#fafafa;
-
-}
-
-.team-image img{
-
-    width:160px;
-
-    height:160px;
-
-    border-radius:50%;
 
-    object-fit:cover;
-
-    border:5px solid #D4AF37;
-
-}
 /* ===========================
    Image Responsive Fix
 =========================== */
@@ -595,4 +721,1261 @@ img{
     height:auto;
     object-fit:contain;
 }
-small text-white-50 mb-0{color:#000!important;}
+/* =====================================
+   Launch Scanner Button
+===================================== */
+
+.btn-premium-sm{
+    position: relative;
+    overflow: hidden;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 12px 28px;
+
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    color: var(--white) !important;
+
+    font-weight: 600;
+    font-size: 15px;
+    letter-spacing: .5px;
+
+    border: 2px solid var(--primary);
+
+    border-radius: 50px;
+
+    box-shadow: 0 8px 25px rgba(200,155,60,.30);
+
+    transition: all .35s ease;
+}
+
+/* Shine Effect */
+
+.btn-premium-sm::before{
+    content:"";
+    position:absolute;
+    top:0;
+    left:-120%;
+    width:60%;
+    height:100%;
+
+    background:linear-gradient(
+        120deg,
+        transparent,
+        rgba(255,255,255,.7),
+        transparent
+    );
+
+    transition:.7s;
+}
+
+.btn-premium-sm:hover::before{
+    left:140%;
+}
+
+/* Hover */
+
+.btn-premium-sm:hover{
+    background: var(--white);
+    color: var(--primary-dark) !important;
+
+    border-color: var(--primary-dark);
+
+    transform: translateY(-4px);
+
+    box-shadow: 0 15px 35px rgba(200,155,60,.40);
+}
+
+/* Active */
+
+.btn-premium-sm:active{
+    transform: scale(.96);
+}
+
+/* Focus */
+
+.btn-premium-sm:focus{
+    box-shadow: 0 0 0 .25rem rgba(200,155,60,.25);
+}
+
+/* Icon */
+
+.btn-premium-sm i{
+    margin-right:8px;
+    transition:.35s;
+}
+
+.btn-premium-sm:hover i{
+    transform:translateX(3px);
+}
+.company-logo{
+
+    height:60px;
+
+    width:auto;
+
+    transition:.35s;
+
+}
+
+.company-logo:hover{
+
+    transform:scale(1.05);
+
+}
+/* ===============================
+   QR Scanner Animation
+================================ */
+
+.scanner-container{
+
+    display:flex;
+
+    justify-content:center;
+
+    align-items:center;
+
+    margin:25px 0;
+
+}
+
+.scanner-frame{
+
+    width:220px;
+
+    height:220px;
+
+    position:relative;
+
+    border-radius:18px;
+
+    background:#fff;
+
+    border:2px solid #D4AF37;
+
+    overflow:hidden;
+
+}
+
+/* QR */
+
+.scanner-qr{
+
+    width:150px;
+
+    height:150px;
+
+    object-fit:contain;
+
+    position:absolute;
+
+    left:50%;
+
+    top:50%;
+
+    transform:translate(-50%,-50%);
+
+}
+
+/* Scanner Line */
+
+.scan-line{
+
+    position:absolute;
+
+    left:0;
+
+    width:100%;
+
+    height:4px;
+
+    background:linear-gradient(
+        90deg,
+        transparent,
+        #00E5FF,
+        transparent
+    );
+
+    box-shadow:0 0 18px #00E5FF;
+
+    animation:scanMove 2.5s linear infinite;
+
+}
+
+@keyframes scanMove{
+
+    0%{
+        top:0;
+    }
+
+    50%{
+        top:210px;
+    }
+
+    100%{
+        top:0;
+    }
+
+}
+
+/* Scanner Corners */
+
+.scanner-corners{
+
+    position:absolute;
+
+    width:28px;
+
+    height:28px;
+
+    border:4px solid #00E5FF;
+
+}
+
+.corner-tl{
+
+    left:8px;
+    top:8px;
+
+    border-right:none;
+    border-bottom:none;
+
+}
+
+.corner-tr{
+
+    right:8px;
+    top:8px;
+
+    border-left:none;
+    border-bottom:none;
+
+}
+
+.corner-bl{
+
+    left:8px;
+    bottom:8px;
+
+    border-right:none;
+    border-top:none;
+
+}
+
+.corner-br{
+
+    right:8px;
+    bottom:8px;
+
+    border-left:none;
+    border-top:none;
+
+}
+/* =====================================================
+   ASSETQR ENTERPRISE
+   Premium Gold & White Theme
+   All Text Black
+===================================================== */
+
+:root{
+
+    --primary:#C89B3C;
+    --primary-dark:#8B6914;
+    --primary-light:#E0C36D;
+
+    --white:#FFFFFF;
+
+    --off-white:#F4EFE3;
+
+    --section:#ECE5D6;
+
+    --border:#D8CFBE;
+
+    --text:#000000;
+
+    --muted:#555555;
+
+}
+/* =======================
+   Global
+======================= */
+
+html{
+    scroll-behavior:smooth;
+}
+
+body{
+
+    background:var(--off-white);
+
+    color:var(--text);
+
+    font-family:"Segoe UI",sans-serif;
+
+    overflow-x:hidden;
+
+}
+
+section{
+
+    background:var(--section);
+
+    padding:80px 0;
+
+}
+
+.container{
+
+    position:relative;
+
+    z-index:2;
+
+}
+
+/* =======================
+   Typography
+======================= */
+
+h1,h2,h3,h4,h5,h6{
+
+    color:#000 !important;
+
+    font-weight:700;
+
+}
+
+p,
+span,
+label,
+small,
+strong,
+li{
+
+    color:#000 !important;
+
+}
+
+.text-muted,
+.text-light,
+.text-white,
+.text-muted-light,
+.text-navy{
+
+    color:#444 !important;
+
+}
+
+/* =======================
+   Links
+======================= */
+
+a{
+
+    color:#000;
+
+    transition:.3s;
+
+    text-decoration:none;
+
+}
+
+a:hover{
+
+    color:var(--primary-dark);
+
+}
+
+/* =======================
+   Navbar
+======================= */
+
+/* ======================================
+   Premium Golden Navbar
+====================================== */
+
+.premium-nav{
+
+    background:linear-gradient(135deg,#D4AF37,#B8860B);
+
+    padding:15px 0;
+
+    box-shadow:0 8px 25px rgba(184,134,11,.35);
+
+    border-bottom:none;
+}
+
+/* Brand */
+
+.navbar-brand{
+
+    color:#fff !important;
+
+    font-size:28px;
+
+    font-weight:700;
+
+}
+
+.brand-highlight{
+
+    color:#fff;
+
+}
+
+/* Navigation */
+
+.navbar-nav{
+
+    gap:12px;
+
+}
+
+/* Default Tabs */
+
+.nav-link{
+
+    color:#fff !important;
+
+    font-weight:600;
+
+    padding:10px 22px !important;
+
+    border-radius:50px;
+
+    transition:.35s ease;
+
+}
+
+/* Hover */
+
+.nav-link:hover{
+
+    background:rgba(255,255,255,.20);
+
+    color:#fff !important;
+
+    transform:translateY(-2px);
+
+}
+
+/* Active Tab */
+
+.nav-link.active{
+
+    background:#fff;
+
+    color:var(--primary-dark) !important;
+
+    font-weight:700;
+
+    box-shadow:0 8px 20px rgba(0,0,0,.15);
+
+}
+
+/* Active Hover */
+
+.nav-link.active:hover{
+
+    background:#fff;
+
+    color:var(--primary-dark)!important;
+
+}
+
+/* =======================
+   Hero
+======================= */
+
+.hero-section{
+
+    background:linear-gradient(180deg,#ffffff,#FFF8EA);
+
+    min-height:80vh;
+
+    display:flex;
+
+    align-items:center;
+
+    margin-top:30px;      /* Space after navbar */
+
+    padding-top:100px;
+
+}
+
+.hero-section::before,
+.hero-section::after{
+
+    display:none;
+
+}
+
+.text-gradient{
+
+    color:var(--primary-dark)!important;
+
+    background:none!important;
+
+    -webkit-text-fill-color:inherit;
+
+}
+
+/* =======================
+   Cards
+======================= */
+
+.glass-card,
+.edge-card,
+.feature-box,
+.partner-card,
+.counter-card,
+.service-panel,
+.contact-form-card{
+
+    background:#fff!important;
+
+    border:1px solid var(--border)!important;
+
+    border-radius:18px;
+
+    backdrop-filter:none!important;
+
+    box-shadow:var(--shadow);
+
+    color:#000!important;
+
+    transition:var(--transition);
+
+}
+
+.glass-card:hover,
+.edge-card:hover,
+.feature-box:hover,
+.partner-card:hover,
+.counter-card:hover,
+.service-panel:hover{
+
+    transform:translateY(-8px);
+
+    border-color:var(--primary)!important;
+
+    box-shadow:0 15px 35px rgba(200,155,60,.25);
+
+}
+
+/* =======================
+   Icons
+======================= */
+
+.icon-wrap{
+
+    width:60px;
+
+    height:60px;
+
+    border-radius:14px;
+
+    background:#FFF6DA;
+
+    color:var(--primary-dark);
+
+    display:flex;
+
+    align-items:center;
+
+    justify-content:center;
+
+    font-size:24px;
+
+}
+
+.glass-card:hover .icon-wrap{
+
+    background:var(--primary);
+
+    color:#fff;
+
+}
+
+/* =======================
+   Buttons
+======================= */
+
+.btn-premium-primary{
+
+    background:linear-gradient(135deg,#D4AF37,#B8860B);
+
+    color:#fff;
+
+    border:none;
+
+    padding:14px 34px;
+
+    border-radius:10px;
+
+    font-weight:600;
+
+}
+
+.btn-premium-primary:hover{
+
+    background:#A67C1A;
+
+    color:#fff;
+
+    transform:translateY(-3px);
+
+}
+
+.btn-premium-outline{
+
+    background:#fff;
+
+    border:2px solid var(--primary);
+
+    color:#000;
+
+}
+
+.btn-premium-outline:hover{
+
+    background:var(--primary);
+
+    color:#fff;
+
+}
+
+/* =======================
+   Forms
+======================= */
+
+.form-control,
+.form-select{
+
+    background:#fff!important;
+
+    border:1px solid #ddd;
+
+    color:#000!important;
+
+    border-radius:10px;
+
+    padding:12px;
+
+}
+
+.form-control::placeholder{
+
+    color:#777;
+
+}
+
+.form-control:focus,
+.form-select:focus{
+
+    border-color:var(--primary);
+
+    box-shadow:0 0 0 .2rem rgba(200,155,60,.15);
+
+}
+
+/* =======================
+   Tables
+======================= */
+
+.table{
+
+    background:#fff;
+
+    color:#000;
+
+    border-radius:12px;
+
+    overflow:hidden;
+
+}
+
+.table thead{
+
+    background:var(--primary);
+
+    color:#fff;
+
+}
+
+.table th{
+
+    color:#fff!important;
+
+}
+
+/* =======================
+   QR Scanner
+======================= */
+
+.scanner-ui-frame{
+
+    background:#fff;
+
+    border:2px solid var(--primary);
+
+    border-radius:18px;
+
+    box-shadow:var(--shadow);
+
+}
+
+.scanner-laser{
+
+    background:linear-gradient(to right,transparent,var(--primary),transparent);
+
+}
+
+/* =======================
+   Contact Section
+======================= */
+
+.contact-card,
+.contact-form-card{
+
+    background:#fff;
+
+    border:1px solid var(--border);
+
+    border-radius:22px;
+
+    padding:35px;
+
+    height:100%;
+
+    box-shadow:0 12px 30px rgba(0,0,0,.08);
+
+}
+
+/* Contact Information */
+
+.contact-item{
+
+    display:flex;
+
+    align-items:flex-start;
+
+    gap:18px;
+
+    margin-bottom:30px;
+
+}
+
+.contact-item i{
+
+    width:52px;
+
+    height:52px;
+
+    display:flex;
+
+    align-items:center;
+
+    justify-content:center;
+
+    border-radius:14px;
+
+    background:linear-gradient(135deg,#D4AF37,#B8860B);
+
+    color:#fff;
+
+    font-size:20px;
+
+    flex-shrink:0;
+
+}
+
+.contact-item h5{
+
+    margin-bottom:5px;
+
+    font-weight:700;
+
+}
+
+.contact-item p{
+
+    margin:0;
+
+    color:#666 !important;
+
+}
+
+/* Form */
+
+.contact-form-card label{
+
+    color:#000;
+
+    font-weight:600;
+
+    margin-bottom:8px;
+
+}
+
+.contact-form-card .form-control,
+.contact-form-card .form-select{
+
+    height:52px;
+
+    border-radius:12px;
+
+}
+
+.contact-form-card textarea{
+
+    min-height:180px;
+
+    resize:none;
+
+}
+
+/* Google Map */
+
+.map-box{
+
+    margin-top:30px;
+
+    overflow:hidden;
+
+    border-radius:18px;
+
+    border:3px solid var(--primary);
+
+}
+
+.map-box iframe{
+
+    width:100%;
+
+    height:320px;
+
+    border:0;
+
+}
+
+/* =======================
+   Footer
+======================= */
+
+footer{
+
+    background:#fff!important;
+
+    color:#000!important;
+
+    border-top:3px solid var(--primary);
+
+    padding:40px 0;
+
+}
+
+/* =======================
+   Utilities
+======================= */
+
+.bg-soft-primary{
+
+    background:#FFF5D7;
+
+    color:#8A6500;
+
+    border:1px solid var(--primary);
+
+}
+
+.bg-success-soft{
+
+    background:#EAF7EE;
+
+    color:#198754;
+
+}
+
+.dot{
+
+    background:#198754;
+
+}
+
+/* ===========================
+   Image Responsive Fix
+=========================== */
+
+img{
+    max-width:100%;
+    height:auto;
+    display:block;
+}
+
+/* Card Images */
+
+.card img,
+.edge-card img,
+.glass-card img,
+.feature-box img,
+.partner-card img{
+    width:100%;
+    height:220px;
+    object-fit:cover;
+    border-radius:12px;
+}
+
+/* Team Images */
+
+.team-image{
+    height:240px;
+    overflow:hidden;
+    border-radius:16px;
+}
+
+.team-image img{
+    width:100%;
+    height:100%;
+    object-fit:cover;
+}
+
+/* Partner Logos */
+
+.partner-image{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    height:120px;
+}
+
+.partner-image img{
+    width:auto;
+    max-width:180px;
+    max-height:90px;
+    object-fit:contain;
+}
+
+/* Hero Image */
+
+.hero-image img,
+.hero-preview-card img{
+    width:100%;
+    max-width:500px;
+    height:auto;
+    margin:auto;
+    object-fit:contain;
+}
+
+/* QR Images */
+
+.qr-placeholder img{
+    width:180px;
+    height:180px;
+    object-fit:contain;
+}
+
+/* Gallery Images */
+
+.gallery img{
+    width:100%;
+    height:250px;
+    object-fit:cover;
+    border-radius:15px;
+}
+.partner-image img{
+    max-width:160px;
+    max-height:80px;
+    width:auto;
+    height:auto;
+    object-fit:contain;
+}
+img{
+    max-width:100%;
+    height:auto;
+    object-fit:contain;
+}
+/* =====================================
+   Launch Scanner Button
+===================================== */
+
+.btn-premium-sm{
+    position: relative;
+    overflow: hidden;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 12px 28px;
+
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    color: var(--white) !important;
+
+    font-weight: 600;
+    font-size: 15px;
+    letter-spacing: .5px;
+
+    border: 2px solid var(--primary);
+
+    border-radius: 50px;
+
+    box-shadow: 0 8px 25px rgba(200,155,60,.30);
+
+    transition: all .35s ease;
+}
+
+/* Shine Effect */
+
+.btn-premium-sm::before{
+    content:"";
+    position:absolute;
+    top:0;
+    left:-120%;
+    width:60%;
+    height:100%;
+
+    background:linear-gradient(
+        120deg,
+        transparent,
+        rgba(255,255,255,.7),
+        transparent
+    );
+
+    transition:.7s;
+}
+
+.btn-premium-sm:hover::before{
+    left:140%;
+}
+
+/* Hover */
+
+.btn-premium-sm:hover{
+    background: var(--white);
+    color: var(--primary-dark) !important;
+
+    border-color: var(--primary-dark);
+
+    transform: translateY(-4px);
+
+    box-shadow: 0 15px 35px rgba(200,155,60,.40);
+}
+
+/* Active */
+
+.btn-premium-sm:active{
+    transform: scale(.96);
+}
+
+/* Focus */
+
+.btn-premium-sm:focus{
+    box-shadow: 0 0 0 .25rem rgba(200,155,60,.25);
+}
+
+/* Icon */
+
+.btn-premium-sm i{
+    margin-right:8px;
+    transition:.35s;
+}
+
+.btn-premium-sm:hover i{
+    transform:translateX(3px);
+}
+.company-logo{
+
+    height:60px;
+
+    width:auto;
+
+    transition:.35s;
+
+}
+
+.company-logo:hover{
+
+    transform:scale(1.05);
+
+}
+/* ===============================
+   QR Scanner Animation
+================================ */
+
+.scanner-container{
+
+    display:flex;
+
+    justify-content:center;
+
+    align-items:center;
+
+    margin:25px 0;
+
+}
+
+.scanner-frame{
+
+    width:220px;
+
+    height:220px;
+
+    position:relative;
+
+    border-radius:18px;
+
+    background:#fff;
+
+    border:2px solid #D4AF37;
+
+    overflow:hidden;
+
+}
+
+/* QR */
+
+.scanner-qr{
+
+    width:150px;
+
+    height:150px;
+
+    object-fit:contain;
+
+    position:absolute;
+
+    left:50%;
+
+    top:50%;
+
+    transform:translate(-50%,-50%);
+
+}
+
+/* Scanner Line */
+
+.scan-line{
+
+    position:absolute;
+
+    left:0;
+
+    width:100%;
+
+    height:4px;
+
+    background:linear-gradient(
+        90deg,
+        transparent,
+        #00E5FF,
+        transparent
+    );
+
+    box-shadow:0 0 18px #00E5FF;
+
+    animation:scanMove 2.5s linear infinite;
+
+}
+
+@keyframes scanMove{
+
+    0%{
+        top:0;
+    }
+
+    50%{
+        top:210px;
+    }
+
+    100%{
+        top:0;
+    }
+
+}
+
+/* Scanner Corners */
+
+.scanner-corners{
+
+    position:absolute;
+
+    width:28px;
+
+    height:28px;
+
+    border:4px solid #00E5FF;
+
+}
+
+.corner-tl{
+
+    left:8px;
+    top:8px;
+
+    border-right:none;
+    border-bottom:none;
+
+}
+
+.corner-tr{
+
+    right:8px;
+    top:8px;
+
+    border-left:none;
+    border-bottom:none;
+
+}
+
+.corner-bl{
+
+    left:8px;
+    bottom:8px;
+
+    border-right:none;
+    border-top:none;
+
+}
+
+.corner-br{
+
+    right:8px;
+    bottom:8px;
+
+    border-left:none;
+    border-top:none;
+
+}
+/* ==========================
+   Dashboard Bar Graph
+========================== */
+
+.mockup-chart-container{
+    height:300px;
+    width:100%;
+    display:flex;
+    align-items:flex-end;
+    justify-content:space-around;
+    gap:20px;
+    padding:20px;
+    background:#fff;
+    border-radius:15px;
+    border:1px solid #ddd;
+}
+
+.chart-bar{
+    width:60px;
+    background:#C89B3C;
+    border-radius:10px 10px 0 0;
+    display:block;
+    min-height:20px;
+}
+
+.chart-bar:nth-child(1){height:120px !important;}
+.chart-bar:nth-child(2){height:200px !important;}
+.chart-bar:nth-child(3){height:260px !important;}
+.chart-bar:nth-child(4){height:170px !important;}
+.chart-bar:nth-child(5){height:230px !important;}
+.chart-bar:nth-child(6){height:150px !important;}