@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

 :root {
   --bg: #ffffff;
   --text: #000000;
   --muted: #666;
   --cta-bg: #ffc1075f;
   --cta-border: #ffc107;
   --hr-border: #dddddd;

   --color-general: #0bbcd6;  
  --color-business: #e6a700; 
  --color-urgent: #c62828; 

   transition: background-color 0.25s ease, color 0.25s ease;
 }


 .dark {
   --bg: #121212;
   --text: #ffffff;
   --muted: #aaa;
   --cta-bg: #ffc1075f;
   --cta-border: #ffc107;
   --hr-border: #ccc;

   --color-general: #00ffff;
  --color-business: #ffc107;
  --color-urgent: #dc143c;
 }



 html {
   font-size: 16px;
   scroll-behavior: smooth;
 }


 * {
   -webkit-tap-highlight-color: transparent;
 }


 /*body {
   -webkit-user-select: none !important;
   -moz-user-select: none !important;
   -ms-user-select: none !important;
   user-select: none !important;
   -webkit-touch-callout: none;
 }*/

 body {
   margin: 0;
   font-family: 'Poppins', Arial, sans-serif;
   background-color: var(--bg);
   color: var(--text);
   line-height: 1.5;
   transition: background-color 0.25s ease, color 0.25s ease;
 }

 .container {
   max-width: 900px;
   margin: 1rem auto;
   padding: 1.5rem;
 }

 h1,
 h2,
 h3 {
   color: var(--text);
   font-weight: 500;
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
   transition: color 0.15s ease-in-out;

 }

 h1 {
   font-size: 2rem;
 }

 h2 {
   font-size: 1.5rem;
 }

 h3 {
   font-size: 1.2rem;
 }

 h4 {
   font-size: 1.05rem;
   color: var(--text);
   font-weight: 500;
   transition: color 0.15s ease-in-out;
   margin-bottom: -0.25rem;


 }

 p,
 li {
   font-size: 1rem;
   margin-bottom: 0.75rem;
 }


 em {
   color: var(--muted);
 }

 a {
   color: var(--text);
   text-decoration: none;
   border-bottom: 1px solid var(--text);
   transition: background-color 0.15s, border-color 0.15s;
   white-space: nowrap;
 }

 @media (hover: hover) and (pointer: fine) {
   a:hover {
     background-color: var(--cta-bg);
     border-bottom-color: var(--cta-border);
   }
 }

 @media (hover: none) and (pointer: coarse) {
   a:active {
     background-color: var(--cta-bg);
     border-bottom-color: var(--cta-border);
   }
 }


 hr {
   border: none;
   border-top: 1px solid var(--hr-border);
   margin: 1.5rem 0;
 }


 ul {
   padding-left: 1.5rem;
 }

 .spacer {
   margin-top: 1rem;
 }

 .top-space {
   padding-top: 0.5rem;
 }

 .bottom-space {
   padding-bottom: 0.5rem;
 }

 strong,
 b {
   font-weight: 600;
 }


 .quick-links {
   border: 1px solid var(--hr-border);
   padding: 1.5rem 0.6rem;
   border-radius: 8px;
   background-color: var(--bg);
   color: var(--text);
   text-align: center;
   transition: background-color 0.25s ease, color 0.25s ease;
 }

 .quick-links h3 {
   margin-top: 0;
 }

 .quick-links p {
   margin: 0.5rem 0;
 }



 /* Contact Page Refinement */

 .subtitle {
   margin-bottom: 2.5rem;
   color: var(--text);
 }

 /* Grid */
 .contact-grid {
   display: grid;
   gap: 1.5rem;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   margin-bottom: 2.5rem;
   margin-top: 2rem;
 }

 /* Base card */
 .contact-card {
   border: 1px solid var(--card-color);
   border-radius: 14px;
   padding: 1.5rem;
   background-color: var(--bg);
 }


 /* CTA buttons */
 .cta-btn {
   display: inline-block;
   margin-top: 1rem;
   padding: 0.6rem 1.2rem;
   border-radius: 999px;
   font-size: 0.95rem;
   font-weight: 500;
   border: 1px solid var(--card-color);
   transition: background-color 0.25s ease, border-color 0.25s ease;
 }


 @media (hover: hover) and (pointer: fine) {

   .contact-card .cta-btn:hover {
     background-color: color-mix(in srgb, var(--card-color) 80%, transparent);
     border-bottom: 1px solid var(--card-color);

   }
 }

 @media (hover: none) and (pointer: coarse) {

   .contact-card .cta-btn:active {
     background-color: color-mix(in srgb, var(--card-color) 80%, transparent);
     border-bottom: 1px solid var(--card-color);

   }
 }

 /* Light color accents (works in dark & light mode) */
 .general {
  --card-color: var(--color-general);
}

.business {
  --card-color: var(--color-business);
}

.urgent {
  --card-color: var(--color-urgent);
}


 /* Footer note */
 .footer-note {
   color: var(--text);
   font-size: 0.95rem;
   text-align: center;
 }