/* ===== Dashboard Layout ===== */
   .dashboard-container {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 15px;
   }

   /* ===== Each Box ===== */
   .dash-box {
       background: #fff;
       border-radius: 5px;
       padding: 25px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
   }

   .dash-box::before {
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
       width: 5px;
       border-radius: 8px 0 0 8px;
       opacity: 0.8;
   }

   /* .dash-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1);
    } */

   /* ===== Content ===== */
   .dash-content {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .dash-text p {
       color: #777;
       font-weight: 500;
       font-size: 14px;
       margin: 0 0 5px;
   }

   .dash-text h3 {
       font-size: 22px;
       font-weight: 700;
       margin: 0;
   }

   .dash-icon {
       width: 60px;
       height: 60px;
       border-radius: 5px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 28px;
       color: #fff;
       transition: all 0.3s ease;
   }

   .dash-box:hover .dash-icon {
       transform: rotate(10deg) scale(1.1);
   }

   /* ===== Gradient Backgrounds (Soft to Transparent) ===== */
   .info {
       background: linear-gradient(135deg, rgba(23, 234, 217, 0.25), rgba(96, 120, 234, 0.05));

   }

   .danger {
       background: linear-gradient(135deg, rgba(245, 78, 162, 0.25), rgba(255, 118, 118, 0.05));

   }

   .success {
       background: linear-gradient(135deg, rgba(0, 176, 155, 0.25), rgba(150, 201, 61, 0.05));

   }

   .warning {
       background: linear-gradient(135deg, rgba(255, 223, 64, 0.25), rgba(255, 131, 89, 0.05));

   }

   .purple {
       background: linear-gradient(135deg, rgba(164, 80, 139, 0.25), rgba(95, 10, 135, 0.05));

   }

   .teal {
       background: linear-gradient(135deg, rgba(17, 153, 142, 0.25), rgba(56, 239, 125, 0.05));

   }


   /* ===== Color Schemes ===== */
   .info::before {
       background: linear-gradient(180deg, #17ead9, #6078ea);
   }

   .danger::before {
       background: linear-gradient(180deg, #f54ea2, #ff7676);
   }

   .success::before {
       background: linear-gradient(180deg, #00b09b, #96c93d);
   }

   .warning::before {
       background: linear-gradient(180deg, #ffdf40, #ff8359);
   }

   .purple::before {
       background: linear-gradient(180deg, #a4508b, #5f0a87);
   }

   .teal::before {
       background: linear-gradient(180deg, #11998e, #38ef7d);
   }

   .info .dash-icon {
       background: linear-gradient(45deg, #17ead9, #6078ea);
   }

   .danger .dash-icon {
       background: linear-gradient(45deg, #f54ea2, #ff7676);
   }

   .success .dash-icon {
       background: linear-gradient(45deg, #00b09b, #96c93d);
   }

   .warning .dash-icon {
       background: linear-gradient(45deg, #ffdf40, #ff8359);
   }

   .purple .dash-icon {
       background: linear-gradient(45deg, #a4508b, #5f0a87);
   }

   .teal .dash-icon {
       background: linear-gradient(45deg, #11998e, #38ef7d);
   }



   .page-head {
       display: flex;
       align-items: center;
       /* gap: 20px; */
       border-radius: 5px;
       background: #fff;
       border: 1px solid #ddd;
       margin-top: 25px;
       padding: 10px;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
       overflow: hidden;
       position: relative;
       background-color: #ffffff;
       background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
       margin-bottom: 20px;
       /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */

   }


   /* Left Side */
   .page-left {
       border: 1px solid #ddd;
       padding: 3px;
       border-radius: 3px;
       max-width: 250px;
   }

   .lft-image img {
       width: 100%;
       max-width: 320px;
       border-radius: 3px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       object-fit: cover;
   }

   /* Right Side */
   .page-right {
       width: 100%;
       margin-left: 10px;
   }



   .social-links {
       display: flex;
       flex-wrap: wrap;
       gap: 9px;
       justify-content: center;
       max-width: 210px;
   }

   .social-links>div {
       border: 1.5px solid transparent;
       display: flex;
       justify-content: space-between;
       align-items: center;
       background-color: #fff;
       border-radius: 3px;
       min-width: 200px;
       transition: all 0.3s ease;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
       text-align: left;
       padding: 2px 0px 2px 5px;
   }

   .social-links i {
       padding: 10px;
       color: #fff;
       font-size: 14px;
       /* border-radius: 3px 0 0 3px; */
   }

   .social-links span img {
       width: 35px;
       height: 35px;
       border-radius: 10px;
   }

   .social-links a {
       padding: 0 10px;
       font-size: 13px;
       font-weight: 500;
       text-decoration: none;
   }

   /* --- Facebook --- */
   .fb {
       border-color: #0065b8 !important;
   }

   /* .fb span {
       background-color: #0065b8;
   } */

   .fb a {
       color: #0065b8;
   }

   /* --- YouTube --- */
   .yt {
       border-color: #ff0000 !important;
   }

   /* .yt span {
       background-color: #ff0000;
   } */

   .yt a {
       color: #ff0000;
   }

   /* --- LinkedIn --- */
   .ln {
       border-color: #0077b5 !important;
   }

   /* .ln span {
       background-color: #0077b5;
   } */

   .ln a {
       color: #0077b5;
   }

   /* --- Instagram --- */
   .ig {
       border-color: #e4405f !important;
   }

   /* .ig span {
       background-color: #e4405f;
   } */

   .ig a {
       color: #e4405f;
   }

   /* --- WhatsApp --- */
   .wa {
       border-color: #25d366 !important;
   }

   .wa i {
       background-color: #25d366;
   }

   .wa a {
       color: #25d366;
   }

   /* --- Hover Effects --- */
   .social-links>div:hover {
       transform: translateY(-1px);
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   }
/* 
   .bbl1 {
       width: 42px;
       height: 42px;
       border: 2px solid #0065b8;
       border-radius: 50%;
       position: absolute;
       top: -19px;
       right: -19px;
       opacity: 0.4;
   }

   .bbl2 {
       width: 62px;
       height: 62px;
       border: 2px solid #b88400ff;
       border-radius: 50%;
       position: absolute;
       top: -25px;
       right: -25px;
       opacity: 0.4;
   }

   .bbl3 {
       width: 82px;
       height: 82px;
       border: 2px solid #800a95ff;
       border-radius: 50%;
       position: absolute;
       top: -31px;
       right: -31px;
       opacity: 0.4;
   } */

   /* .bbl4 {
        width: 102px;
        height: 102px;
        border: 2px solid #fbf300ff;
        border-radius: 50%;
        position: absolute;
        top: -37px;
        right: -37px;
        opacity: 0.4;
    }
    .bbl5 {
        width: 122px;
        height: 122px;
        border: 2px solid #b80000ff;
        border-radius: 50%;
        position: absolute;
        top: -43px;
        right: -43px;
        opacity: 0.4;
    }
    .bbl6 {
        width: 144px;
        height: 144px;
        border: 2px solid #007926ff;
        border-radius: 50%;
        position: absolute;
        top: -50px;
        right: -50px;
        opacity: 0.4;
    } */


   .offer-box {
       position: relative;
       background: linear-gradient(to right, #1b2735, #2c5364);
       color: #fff;
       border-radius: 5px;
       padding: 20px;
       text-align: center;
       overflow: hidden;
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
       /* background-image: url('https://i.ibb.co/qWfL0T4/halloween-bg.png'); */
       background-size: cover;
       background-position: center;
       min-height: 200px;
   }

   .offer-content h1 {
       font-size: 18px;
       font-weight: 700;
       margin-bottom: 15px;
       text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   }

   .offer-content p {
       font-size: 11px;
       color: #d1e7ff;
       margin-bottom: 25px;
   }

   .offer-content button {
       background: #ff6600;
       color: #fff;
       border: none;
       padding: 12px 28px;
       border-radius: 6px;
       font-size: 12px;
       font-weight: 600;
       cursor: pointer;
       transition: 0.3s ease;
       box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
   }

   .offer-content button:hover {
       background: #ff8533;
       transform: translateY(-3px);
   }

   .offer-box::before {
       content: "🎃";
       font-size: 80px;
       position: absolute;
       left: 40px;
       bottom: 10px;
       opacity: 0.2;
   }

   .offer-box::after {
           content: "🕸️";
    font-size: 75px;
    position: absolute;
    right: -7px;
    top: -15px;
    opacity: 0.4;
   }

   hr.icon {
       margin: 50px 0px 0px 0px;
       padding: 0;
       border: 0;
       border-top: solid 3px;
       text-align: center;
   }

   hr.icon:after {
       content: "\f0e7";
       display: inline-block;
       position: relative;
       top: -1.7rem;
       padding: 0 1rem;
       font-family: FontAwesome;
       font-size: 3rem;
       background-color: #fff;
   }


   /* ===== Responsive ===== */

   @media (max-width:834.5px) {
       .page-head {
           flex-direction: column-reverse;
       }

       .page-right {
           margin-bottom: 15px;
       }
       .page-right{
        margin-left: 0;
       }

       .page-left,
       .social-links {
           width: 100%;
           max-width: 100%;
           justify-content: space-around;
       }

       .social-links {
           padding: 15px;
       }
   }



   @media (max-width: 767px) {
       .social-links>div {
           flex: 0 0 45%;
       }

       .dashboard-container {
           grid-template-columns: repeat(2, 1fr);
           padding: 0px;
       }
   }

   @media (max-width: 480px) {
       .dashboard-container {
           grid-template-columns: 1fr;
       }

       .dash-icon {
           width: 50px;
           height: 50px;
           font-size: 22px;
       }
   }

    @media (max-width: 478px) {
       .social-links>div {
           flex: 0 0 100%;
       }
   }