:root
{
    /* Color Variables */
    --background-color: #CED4DA;
    --section-color: #6C8976;
    --service-color: #BDC3C7;
    --text-color: #000;
    --navbar-color: #264027;
    --navbar-text-color: #fff;
    --navbar-background-color: #362D2B;
    --border-color: #000;
    --inside-border-color: #000;

    /* Global font family */
  --font-family: 'Lora', helvetica, sans-serif;
  
  /* Base Font Sizes */
  --base-font-size: 16px;

  /* Headings */
  --h2-font-size: 19px;
  --h3-font-size: 17px;

  /* Gallery Text */
  --gallery-text-size: 18px;

  /* Navbar */
  --navbar-font-size: 30px; /* Desktop default for .navbar li a and .item a */
  
  /* Carousel/Review Card */
  --carousel-text-size: 20px; /* .from class text */

  /* Services Page */
  --service-h2-font-size: 20px;
  --service-h3-font-size: 18px;
  --service-p-font-size: 16px;
  --info-font-size: 17px;
  
  /* Homepage Specific */
  --island-text-font-size: 15px;
  --link2contact-font-size: 18px;
  --contact-details-font-size: 17px;
  --service-anchor-font-size: 20px;
}


/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --navbar-font-size: 24px;
    --h2-font-size: 22px;
    --h3-font-size: 20px;
    --island-text-font-size: 18px;
    /* You can add other overrides here as needed */
  }
}

/* Very small screens */
@media (max-width: 400px) {
  :root {
    --navbar-font-size: 18px;
  }
}

/* Desktop adjustments */
@media (min-width: 1024px) {
  :root {
    --service-anchor-font-size: 24px;
    /* For example, you might want a larger header font size on desktops */
    --header-font-size: 2.5rem;
  }
}