:root {
    --primary: #4d8871;
    --secondary: #your-secondary-color;
    --tertiary: #your-tertiary-color;
  }

  body {
    background: #f2f7f5;
  }
  
  /* Base color classes for background */
  .bg-primary { background-color: var(--primary) !important; }
  .bg-secondary { background-color: var(--secondary) !important; }
  .bg-tertiary { background-color: var(--tertiary) !important; }
  
  /* Base color classes for text */
  .text-primary { color: var(--primary); }
  .text-secondary { color: var(--secondary); }
  .text-tertiary { color: var(--tertiary); }
  
  /* Opacity classes for background */
  .bg-o10 { background-color: rgba(var(--color-rgb), 0.1) !important; }
  .bg-o20 { background-color: rgba(var(--color-rgb), 0.2) !important; }
  .bg-o30 { background-color: rgba(var(--color-rgb), 0.3) !important; }
  .bg-o40 { background-color: rgba(var(--color-rgb), 0.4) !important; }
  .bg-o50 { background-color: rgba(var(--color-rgb), 0.5) !important; }
  /* ... continue for other opacity levels ... */
  
  /* Opacity classes for text */
  .text-o10 { color: rgba(var(--color-rgb), 0.1) !important; }
  .text-o20 { color: rgba(var(--color-rgb), 0.2) !important; }
  .text-o30 { color: rgba(var(--color-rgb), 0.3) !important; }
  .text-o40 { color: rgba(var(--color-rgb), 0.4) !important; }
  .text-o50 { color: rgba(var(--color-rgb), 0.5) !important; }
  /* ... continue for other opacity levels ... */
  
  /* Saturation classes for background (lightening towards white) */
  .bg-s10 { background-color: color-mix(in srgb, var(--color) 10%, white) !important; }
  .bg-s20 { background-color: color-mix(in srgb, var(--color) 20%, white) !important; }
  .bg-s30 { background-color: color-mix(in srgb, var(--color) 30%, white) !important; }
  .bg-s40 { background-color: color-mix(in srgb, var(--color) 40%, white) !important; }
  .bg-s50 { background-color: color-mix(in srgb, var(--color) 50%, white) !important; }
  /* ... continue for other saturation levels ... */
  
  /* Saturation classes for text (lightening towards white) */
  .text-s10 { color: color-mix(in srgb, var(--color) 10%, white) !important; }
  .text-s20 { color: color-mix(in srgb, var(--color) 20%, white) !important; }
  .text-s30 { color: color-mix(in srgb, var(--color) 30%, white) !important; }
  .text-s40 { color: color-mix(in srgb, var(--color) 40%, white) !important; }
  .text-s50 { color: color-mix(in srgb, var(--color) 50%, white) !important; }
  /* ... continue for other saturation levels ... */
  
  /* Saturation classes for background (darkening towards black) */
  .bg-s10.dark { background-color: color-mix(in srgb, var(--color) 10%, black) !important; }
  .bg-s20.dark { background-color: color-mix(in srgb, var(--color) 20%, black) !important; }
  .bg-s30.dark { background-color: color-mix(in srgb, var(--color) 30%, black) !important; }
  .bg-s40.dark { background-color: color-mix(in srgb, var(--color) 40%, black) !important; }
  .bg-s50.dark { background-color: color-mix(in srgb, var(--color) 50%, black) !important; }
  /* ... continue for other saturation levels ... */
  
  /* Saturation classes for text (darkening towards black) */
  .text-s10.dark { color: color-mix(in srgb, var(--color) 10%, black) !important; }
  .text-s20.dark { color: color-mix(in srgb, var(--color) 20%, black) !important; }
  .text-s30.dark { color: color-mix(in srgb, var(--color) 30%, black) !important; }
  .text-s40.dark { color: color-mix(in srgb, var(--color) 40%, black) !important; }
  .text-s50.dark { color: color-mix(in srgb, var(--color) 50%, black) !important; }
  /* ... continue for other saturation levels ... */
  
  /* Helper classes to set the base color */
  .bg-primary, .text-primary {
    --color: var(--primary);
    --color-rgb: 77, 136, 113; /* RGB values of your primary color */
  }
  
  .bg-secondary, .text-secondary {
    --color: var(--secondary);
    --color-rgb: R, G, B; /* Replace with RGB values of your secondary color */
  }
  
  .bg-tertiary, .text-tertiary {
    --color: var(--tertiary);
    --color-rgb: R, G, B; /* Replace with RGB values of your tertiary color */
  }

  /* Custom CSS to create container-half class */
.container.half {
    width: 100%; /* Default for extra small screens */
    max-width: 270px; /* Half of 540px for small screens */
}

@media (min-width: 576px) {
    .container.half {
        max-width: 270px; /* Half of 540px */
    }
}

@media (min-width: 768px) {
    .container.half {
        max-width: 360px; /* Half of 720px */
    }
}

@media (min-width: 992px) {
    .container.half {
        max-width: 480px; /* Half of 960px */
    }
}

@media (min-width: 1200px) {
    .container.half {
        max-width: 570px; /* Half of 1140px */
    }
}

@media (min-width: 1400px) {
    .container.half {
        max-width: 660px; /* Half of 1320px */
    }
}

/* @import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');

.font-playpen-sans {
    font-family: "Playpen Sans", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
} */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

.font-marcellus {
    font-family: "Marcellus", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Custom CSS to create container-half class */

.glightbox_video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.outer_circle {
    stroke-width: 3;
    stroke-dasharray: 410; 
    stroke-dashoffset: 0;
    stroke-linecap: square;
    transition: all .2s ease-out;
}

.glightbox_video:hover .outer_circle {
    stroke-dashoffset:410;
    transition: stroke .3s .2s ease-out, stroke-dashoffset .4s ease-out
}

.glightbox_video:hover 
.inner-circle {
    fill: #BF2428;
    transition:fill .2s .1s ease-out;

}

.glightbox_video:hover
.play{
    fill: white;
    transition:fill .2s .1s ease-out;
}    

.modal-dialog-centered {
    max-width: 100%;
}

.modal-content {
    width: 95%;
    max-width: 1000px;
    max-height: 90vh;
    margin: auto;
    overflow: hidden;
}

.modal-content iframe {
    aspect-ratio: 1440/1080;
    margin: 0;
    display: block;
}