@media (min-width: 768px) {
       .md\:text-6xl {
           font-size: 2.75rem;
           line-height: 1;
       }
   }

   .content {
       text-align: center;
   }

   .content h1 {
       font-family: 'Sansita', sans-serif;
       letter-spacing: 1px;
       font-size: 50px;
       color: #282828;
       margin-bottom: 10px;
   }

   .content i {
       color: #FFC107;
   }

   .content span {
       position: relative;
       display: inline-block;
   }

   .content span:before,
   .content span:after {
       position: absolute;
       content: "";
       background-color: #282828;
       width: 40px;
       height: 2px;
       top: 40%;
   }

   .content span:before {
       left: -45px;
   }

   .content span:after {
       right: -45px;
   }

   .content p {
       font-family: 'Open Sans', sans-serif;
       font-size: 18px;
       letter-spacing: 1px;
   }

   .wrappear {
       position: relative;
       display: inline-block;
       border: none;
       font-size: 14px;
       left: 50%;
       transform: translateX(-50%);
   }

   .wrappear input {
       border: 0;
       width: 1px;
       height: 1px;
       overflow: hidden;
       position: absolute !important;
       clip: rect(1px 1px 1px 1px);
       clip: rect(1px, 1px, 1px, 1px);
       opacity: 0;
   }

   .wrappear label {
       position: relative;
       float: right;
       color: #C8C8C8;
   }

   .wrappear label:before {
       margin: 5px;
       content: "\f005";
       font-family: FontAwesome;
       display: inline-block;
       font-size: 1.5em;
       color: #ccc;
       -webkit-user-select: none;
       -moz-user-select: none;
       user-select: none;
   }

   .wrappear input:checked~label:before {
       color: #FFC107;
   }

   .wrappear label:hover~label:before {
       color: #ffdb70;
   }

   .wrappear label:hover:before {
       color: #FFC107;
   }

   .product__gallery .slick-current img {
       animation: slowZoom 10s infinite alternate;
       transform-origin: center;
   }

   @keyframes slowZoom {
       from {
           transform: scale(1);
       }

       to {
           transform: scale(1.1);
       }
   }

   .product__variants .item img {
       filter: grayscale(80%);
       transition: all 0.4s ease;
       cursor: pointer;
   }

   .product__variants .slick-current img {
       filter: grayscale(0%);
       border: 2px solid #mt-3 btn--custom btn--rounded btn--outline;
       transform: scale(1.05);
   }

   @keyframes vividFloatingEffect {
       0% {
           transform: translateY(0px) rotate(0deg);
       }

       50% {
           transform: translateY(-12px) rotate(0.2deg);
       }

       100% {
           transform: translateY(0px) rotate(0deg);
       }
   }

   .smooth-float-slow {
       animation: vividFloatingEffect 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   }

   .vivid-premium-reviews {
       padding: 40px 0;
       max-width: 1200px;
       margin: 0 auto;
   }

   /* Dashboard Styling */
   .vivid-dashboard {
       background: #fff;
       border-radius: 40px;
       padding: 40px;
       box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
       margin-bottom: 50px;
       border: 1px solid rgba(255, 255, 255, 0.7);
   }

   .vivid-score-num {
       font-size: 55px;
       font-weight: 900;
       color: var(--color-1st);
       margin: 0;
   }

   .vivid-count-label {
       color: var(--color-1st);
       font-weight: 700;
       font-size: 14px;
       margin-top: 10px;
   }

   .vivid-bar-line {
       display: flex;
       align-items: center;
       margin-bottom: 10px;
   }

   .vivid-bar-bg {
       flex-grow: 1;
       height: 7px;
       background: #f0f4f8;
       border-radius: 10px;
       margin: 0 15px;
   }

   .vivid-bar-fill {
       height: 100%;
       background: var(--color-1st);
       border-radius: 10px;
   }

   .vivid-label {
       width: 40px;
       font-weight: bold;
       font-size: 12px;
       color: #666;
   }

   .vivid-grid-container {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 30px;
       margin-bottom: 60px;
   }

   .vivid-floating-card {
       background: #fff;
       border-radius: 35px;
       padding: 40px;
       position: relative;
       box-shadow: 0 12px 35px rgba(0, 0, 0, 0.02);
       transition: 0.4s;
       border: 1px solid rgba(255, 255, 255, 1);
   }

   .vivid-floating-card:hover {
       transform: scale(1.02) !important;
       box-shadow: 0 20px 50px rgba(209, 207, 207, 0.52);
   }

   .vivid-quote {
       position: absolute;
       font-size: 70px;
       font-family: 'Georgia', serif;
       color: rgba(2, 110, 148, 0.05);
       line-height: 1;
       pointer-events: none;
   }

   .q-top {
       top: 15px;
       left: 15px;
   }

   .q-bottom {
       bottom: 35px;
       right: 15px;
   }

   .vivid-card-header {
       display: flex;
       align-items: center;
       gap: 15px;
       margin-bottom: 20px;
   }

   .vivid-user-avatar img {
       width: 55px;
       height: 55px;
       border-radius: 15px;
       object-fit: cover;
   }

   .vivid-user-name {
       margin: 0;
       font-weight: 800;
       color: #333;
       font-size: 16px;
   }

   .vivid-card-body {
       padding: 0 10px;
       position: relative;
       z-index: 2;
   }

   .vivid-review-text {
       font-size: 15px;
       color: #555;
       line-height: 1.8;
       font-style: italic;
       margin-bottom: 0;
   }

   .vivid-card-footer {
       margin-top: 25px;
       padding-top: 15px;
   }

   .vivid-sep-line {
       width: 35px;
       height: 2px;
       background: var(--color-1st);
       opacity: 0.1;
       margin-bottom: 12px;
   }

   .vivid-footer-flex {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .vivid-date-txt {
       font-size: 11px;
       color: #bbb;
       font-weight: 500;
   }

   .vivid-delete-btn {
       color: #fcc;
       transition: 0.3s;
   }

   .vivid-delete-btn:hover {
       color: #dc3545;
   }

   .vivid-star-selector {
       display: flex;
       flex-direction: row-reverse;
       justify-content: center;
       gap: 5px;
       margin-bottom: 25px;
   }

   .vivid-star-selector input {
       display: none;
   }

   .vivid-star-selector label:before {
       content: "\f005";
       font-family: FontAwesome;
       font-size: 30px;
       color: #f1f5f9;
       cursor: pointer;
       transition: 0.2s;
   }

   .vivid-star-selector input:checked~label:before,
   .vivid-star-selector label:hover~label:before {
       color: #fbbf24;
   }

   .vivid-form-section {
       background: #fff;
       padding: 45px;
       border-radius: 40px;
       box-shadow: 0 25px 70px rgba(0, 0, 0, 0.05);
       max-width: 800px;
       margin: 0 auto;
   }

   .vivid-text-box {
       position: relative;
   }

   .vivid-text-box textarea {
       width: 100%;
       border: 1.5px solid #f1f5f9;
       border-radius: 20px;
       padding: 20px;
       min-height: 130px;
       outline: none;
   }

   .vivid-submit-btn {
       position: absolute;
       bottom: 15px;
       right: 15px;
       border: none;
       border-radius: 12px;
       font-weight: bold;
   }