/* background:
        radial-gradient(circle at top, #7b2436, #3a0e18),
        url('../img/bg.png'); */
   body {
       background-color: #6B1E2E;
       /* shows instantly */
       background-image:
           linear-gradient(#6B1E2E, #4A1420);

   }

   body {
       margin: 0;

       background-size: cover;
       color: #FAF8F4;
       background-image: url('../img/bg2-min.jpg');

       background-repeat: repeat;
       background-size: auto;

   }

   h2.quote {
       font-size: 15px;
       color: #d4af37;
       font-style: italic;
   }

   .faizee-page {
       padding: 5px 10px 100px 10px;
       display: flex;
       justify-content: center;
   }

   .faizee-app-frame {
       max-width: 1100px;
       width: 100%;
   }

   /* HEADER */
   .faizee-top {
       background: linear-gradient(#6B1E2E, #4A1420);
       border-bottom: 2px solid #D4AF37;
       padding: 18px 25px;
   }

   .top-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .top-row i {
       font-size: 22px;
       color: #D4AF37;

   }

   button.logout-btn {
       background-color: rgba(107, 30, 45, 0.5);
       /* RGBA format for opacity */
       border: none;
   }

   .top-center {
       text-align: center;
   }

   .arabic-title {
       font-family: 'Amiri', serif;
       color: #E8C872;
   }

   .app-title {
       font-size: 22px;
       letter-spacing: 1px;
       color: #d4af37;
   }

   /* GOLD FRAME */
   .gold-frame {
       background:
           linear-gradient(180deg, rgba(107, 30, 46, .50), rgba(58, 14, 24, .50)),
           url('../svg/islamic-rosette.svg');
       background-repeat: repeat;
       border-radius: 20px;
   }

   .pattern-bg {
       position: absolute;
       inset: 0;
       z-index: 0;
   }

   .gold-frame>* {
       position: relative;
       z-index: 1;
   }

   .gold-frame {
       margin-top: 10px;
       padding: 25px;
       border-radius: 20px;
       /* background: linear-gradient(#6B1E2E, #4A1420); */
       position: relative;
       text-align: center;
   }

   .gold-frame::before {
       content: "";
       position: absolute;
       inset: 6px;
       border: 1px solid #D4AF37;
       border-radius: 16px;
       pointer-events: none;
   }

   /* GREETING */
   .greeting-frame {
       text-align: center;
   }

   .arabic-big {
       font-family: 'Amiri', serif;
       color: #E8C872;
   }

   /* FEATURES */
   .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(147px, 1fr));
       gap: 20px;
       margin-top: 30px;
   }

   .feature-box {
       background: -webkit-linear-gradient(#6b1e2eb3, #320e16a6);
       background: linear-gradient(#6b1e2eb3, #320e16a6);
       border-radius: 20px;
       padding: 15px 15px;
       text-align: center;
       box-shadow: inset 0 0 0 2px #D4AF37,
           0 0 25px rgba(212, 175, 55, .25);
   }

   a.folder-card,
   .feature-box h5,
   .feature-box span,
   .features-grid a,
   .feature-box span,
   section.bayaan-list a {
       color: #D4AF37;
       text-decoration: none !important;
       text-decoration-style: none !important;
   }

   .feature-box i {
       font-size: 40px;
       color: #D4AF37;
       margin-bottom: 10px;
   }

   /* FEATURED */
   .featured-frame {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .gold-progress {
       height: 6px;
       background: rgba(255, 255, 255, .1);
       border-radius: 5px;
       margin-top: 10px;
   }

   .gold-progress div {
       width: 40%;
       height: 100%;
       background: #D4AF37;
   }

   .gold-play {
       width: 64px;
       height: 64px;
       border-radius: 50%;
       border: none;
       background: radial-gradient(#E8C872, #D4AF37);
       font-size: 30px;
       color: #4A1420;
   }

   /* NOTIFY */
   .notify-frame p {
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .dot {
       width: 8px;
       height: 8px;
       background: #D4AF37;
       border-radius: 50%;
   }

   .ornament-bg {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
   }

   svg {
       max-width: 100%;
       height: auto;
   }

   .faizee-bottom-nav {
       position: fixed;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 100%;
       max-width: 1100px;

       background:
           linear-gradient(180deg, #6B1E2E, #4A1420),
           url('../svg/islamic-pattern.svg');

       border-top: 2px solid #D4AF37;
       padding: 10px 0 8px;
       display: flex;
       justify-content: space-around;
       z-index: 1000;
   }

   /* NAV ITEM */
   .faizee-bottom-nav .nav-item,
   .faizee-bottom-nav a {
       text-align: center;
       color: #FAF8F4;
       font-size: 11px;
       text-decoration: none;
       position: relative;
   }

   /* ICON */
   .faizee-bottom-nav img {
       width: 26px;
       height: 26px;
       display: block;
       margin: 0 auto 4px;
       filter: drop-shadow(0 0 4px rgba(212, 175, 55, .3));
   }

   /* ACTIVE STATE */
   .faizee-bottom-nav .active img {
       filter: drop-shadow(0 0 10px rgba(212, 175, 55, .8));
   }

   .faizee-bottom-nav .active span {
       color: #D4AF37;
   }

   /* ACTIVE INDICATOR */
   .faizee-bottom-nav .active::before {
       content: "";
       position: absolute;
       top: -8px;
       left: 50%;
       transform: translateX(-50%);
       width: 36px;
       height: 3px;
       background: #D4AF37;
       border-radius: 4px;
   }


   /* .faizee-bottom-nav {
    padding-bottom: 20px;
} */


   .folder-icon img {
       width: 60px;
       height: auto;
       margin-bottom: 10px;
   }

   li.breadcrumb-item a {
       color: #d4af37;
       font-size: 18px;
   }

   a.btn.btn-sm.btn-outline-secondary {
       border-color: #333333;
       color: #d4af37;
   }

   @media screen and (max-width: 768px) {}