:root {
      --loader-size: 15vw;
      --logo-size: 9vw;
      --border-thickness: 0.8vw;
      --tp-theme-redical: #ff3d00;
      --tp-theme-orange: #ff9100;
    }

    /* html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    } */

    .custom-preloader-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(10px);
      z-index: 9999;
      animation: custom-fadeIn 0.5s ease-in-out;
    }

    .custom-preloader-container {
      position: relative;
      width: var(--loader-size);
      height: var(--loader-size);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .custom-preloader-logo {
      background: url('./assets/img/logo/loader1.png') no-repeat center;
      background-size: contain;
      width: var(--logo-size);
      height: var(--logo-size);
      position: absolute;
      animation: custom-pulse 1.5s ease-in-out infinite;
    }

    .custom-loader-circle {
      position: absolute;
      width: var(--loader-size);
      height: var(--loader-size);
      border: var(--border-thickness) solid rgba(243, 243, 243, 0.8);
      border-top: var(--border-thickness) solid transparent;
      border-left: var(--border-thickness) solid var(--tp-theme-redical);
      border-right: var(--border-thickness) solid var(--tp-theme-orange);
      border-radius: 50%;
      animation: custom-spin 1.5s linear infinite;
      will-change: transform;
    }

    @keyframes custom-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes custom-pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes custom-fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    @media (max-width: 768px) {
      :root {
        --loader-size: 20vw;
        --logo-size: 12vw;
        --border-thickness: 1vw;
      }
    }

    @media (max-width: 480px) {
      :root {
        --loader-size: 25vw;
        --logo-size: 15vw;
        --border-thickness: 1.2vw;
      }
    }

    #main-content {
      display: none;
      padding: 2rem;
      text-align: center;
      font-family: sans-serif;
    }




.custom-whatsapp-widget {
      position: fixed;
      bottom: 20px;
      left: 20px; /* Positioned to the left on all devices */
      z-index: 9999;
      font-family: 'Roboto', Arial, sans-serif;
    }

    /* Floating Button with pulse */
    .custom-whatsapp-button {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #25D366;
      border-radius: 50px;
      padding: 10px 16px;
      color: white;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
      animation: pulse 1.5s infinite;
    }

    .custom-whatsapp-button:hover {
      transform: scale(1.07);
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
      70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
      100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
    }

    .custom-whatsapp-button img {
      width: 28px;
      margin-right: 10px;
    }

    .custom-whatsapp-button span {
      font-size: 15px;
      font-weight: 500;
    }

    /* Popup Wrapper */
    .custom-whatsapp-popup {
      display: none;
      position: absolute;
      bottom: 80px;
      left: 0; /* Aligned with the button on the left */
      width: 340px;
      align-items: center;
      flex-direction: column;
    }

    /* Popup Card with modern style */
    .custom-whatsapp-popup-card {
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.25);
      width: 100%;
      animation: popupShow 0.4s ease-out forwards;
      position: relative;
      overflow: hidden;
    }

    /* Popup Header with gradient */
    .custom-whatsapp-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(135deg, #25D366, #128C7E);
      color: white;
      padding: 15px 20px;
    }

    .custom-whatsapp-header img {
      width: 40px;
      margin-right: 10px;
    }

    .custom-whatsapp-header-text h3,
    .custom-whatsapp-header-text p {
      margin: 0;
      color: white;
    }

    .custom-whatsapp-header-text h3 {
      font-size: 16px;
    }

    .custom-whatsapp-header-text p {
      font-size: 13px;
    }

    /* Close Button in top-right */
    .custom-whatsapp-close {
      background: transparent;
      color: white;
      border: none;
      font-size: 24px;
      cursor: pointer;
      transition: transform 0.2s;
    }

    .custom-whatsapp-close:hover {
      transform: rotate(90deg);
    }

    /* Reply Time text */
    .custom-whatsapp-reply-time {
      font-size: 12px;
      color: #777;
      padding: 10px 20px;
      margin: 0;
    }

    /* Agent Card Link Style */
    .custom-whatsapp-agent {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #F5F5F5	;
      border-left: 2px solid #25D366;
      border-right: 2px solid #25D366;
      border-radius: 12px;
      padding: 10px 16px;
      margin: 8px 20px;
      transition: transform 0.5s, box-shadow 0.2s;
      text-decoration: none; /* Remove underline from link */
      color: inherit; /* Use default text color */
    }

    .custom-whatsapp-agent:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .custom-whatsapp-agent-info {
      display: flex;
      align-items: center;
    }

    /* --- MODIFIED AGENT IMAGE STYLE --- */
    .custom-whatsapp-agent-info img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      margin-right: 12px;
      object-fit: cover; /* This is the key change to force a circular shape */
    }

    .custom-whatsapp-agent-info div {
      font-size: 14px;
    }
    
    .custom-whatsapp-agent-info strong {
       font-size: 15px;
    }
    
    .custom-whatsapp-agent .wa-icon {
      width: 28px;
    }

    /* Card animation */
    @keyframes popupShow {
      0% { transform: translateY(30px) scale(0.9); opacity: 0; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 500px) {
      /* On mobile, only adjust popup size and fonts */
      .custom-whatsapp-popup {
        width: calc(100vw - 40px); /* Full width minus margins */
      }
      
      /* Optimize fonts for smaller screens */
      .custom-whatsapp-header-text h3 {
        font-size: 15px;
      }
      .custom-whatsapp-header-text p {
        font-size: 12px;
      }
       .custom-whatsapp-agent-info div {
        font-size: 13px;
      }
       .custom-whatsapp-agent-info strong {
        font-size: 14px;
      }
    }