html {
  box-sizing: border-box;
  overflow-x: hidden;
}

*, *:before, *:after {
  box-sizing: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
    color: #333;
    overflow-x: hidden;
}

.main-content {
  min-height: 0px;
  background-color: white;
}

/* Base styles for a clean layout */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Ensure all images and iframes are responsive */
img, iframe {
  max-width: 100%;
  /* height: auto; */
}

/* Prevent text overflow globally */
address, p, span, a {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Small mobile screens */
@media (max-width: 480px) {
  .container {
    padding: 0 0.5rem;
  }
}

/* Extra small screens */
@media (max-width: 320px) {
  .container {
    padding: 0 0.25rem;
  }
}

/* ===========================
   Global Custom Scrollbar
   =========================== */
/* ===========================
   Global Custom Scrollbar with Arrows
   =========================== */

:root {
    --primary-green: #2d7d32;
    --secondary-green: #4caf50;
    --accent-green: #81c784;
    --light-green: #e8f5e8;
    --dark-green: #1b5e20;
    --earth-brown: #5d4037;
    --sky-blue: #4fc3f7;
    --sunset-orange: #ff8f65;
    --pure-white: #ffffff;
    --soft-gray: #f5f5f5;
    --text-dark: #2e2e2e;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-heavy: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar {
    width: 12px;   /* wider scrollbar */
    height: 12px;  /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    border-radius: 6px;
    border: 2px solid #f1f1f1; /* creates spacing */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-green);
}

/* Scrollbar buttons (increment arrows) */
::-webkit-scrollbar-button {
    width: 14px;
    height: 14px;
    background: #f1f1f1;
    border: none;
}

/* Up Arrow */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232d7d32'><polygon points='6,2 10,8 2,8'/></svg>") no-repeat center;
    background-color: #f1f1f1;
}

/* Down Arrow */
::-webkit-scrollbar-button:single-button:vertical:increment {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232d7d32'><polygon points='2,4 10,4 6,10'/></svg>") no-repeat center;
    background-color: #f1f1f1;
}

/* Left Arrow */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232d7d32'><polygon points='2,6 8,2 8,10'/></svg>") no-repeat center;
    background-color: #f1f1f1;
}

/* Right Arrow */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232d7d32'><polygon points='4,2 4,10 10,6'/></svg>") no-repeat center;
    background-color: #f1f1f1;
}