:root {
	
	--diagonal-section-offset: 50px;
	
	--background: #f9f9f9;
	--bulma-body-background-color: var(--background);
	
	/* Text */
  --text: #333333;
  --text-weight: 400;
  --heading-weight: 600;
  --strong-weight: 700;
  
  /* Footer background and text */
  --footer-background: #f9f9f9;
  --footer-text: #333333;
  
  /* Border and card background */
  --border: #e0e0e0;
  --card-background: white;
  
  /* Dropdowns */
	--dropdown-background: #ffffff;
	--dropdown-hover-bg: #f5f5f5;
}

#top-section {
	border-top: 1rem solid;
	border-image: linear-gradient(to right, #0056b3 25%, #FCA311 50%, #77966D 75%) 5;
}
.footer {
	border-bottom: 1rem solid;
	border-image: linear-gradient(to right, #0056b3 25%, #FCA311 50%, #77966D 75%) 5;
}
.footer p, .footer li {
	font-size: 75%;
}
.footer ul {
	list-style: none;
	margin-inline-start: 0;
}
.footer ul li {
	display: inline;
	padding-left: 0.5rem;
}
.footer ul li:first-child {
	padding-left: 0;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, h1, h2, h3, .title, .subtitle {
	font-family: 'Poppins', sans-serif;
  color: var(--text);
  font-weight: var(--heading-weight);
}
.subtitle {
  font-weight: var(--text-weight);
}

body, p, a, strong {
  font-family: "Libre Franklin", sans-serif;
  font-optical-sizing: auto;
  color: var(--text);
  font-weight: var(--text-weight);
}
a {
	color: #0056b3;
}
strong {
  font-weight: var(--strong-weight);
}

.footer {
  background-color: var(--footer-background);
  color: var(--footer-text);
}
footer img {
	margin-bottom:2rem;
}

 
.card {
  background-color: var(--card-background);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  Subtle shadow 
  margin-bottom: 20px;
}

.card-content {
  color: var(--text);
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.dropdown-content {
  background-color: var(--dropdown-background);
}

.dropdown-item:hover {
  background-color: var(--dropdown-hover-bg);
}


.content table thead td, .content table thead th, .content table th {
	color: #333;
}

/* -------------------------------- 

File#: _1_diagonal-section
Title: Diagonal Section
Descr: Section with diagonal edges
Usage: codyhouse.co/license

-------------------------------- */


/* -------------------------------- 

Component 

-------------------------------- */

.diagonal-section .content {
	padding-top:3rem;
	padding-bottom:4rem;
}
.diagonal-section-bottom .content {
	padding-bottom:4rem;
}
.diagonal-section-top .content {
	padding-top:3rem;
}

.diagonal-section,
.diagonal-section-top,
.diagonal-section-bottom {
  position: relative;
  z-index: 1;
  background-color: hsl(240, 4%, 90%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@supports ((-webkit-clip-path: inset(50%)) or (clip-path: inset(50%))) {
  .diagonal-section, .diagonal-section-top.diagonal-section-bottom {
    padding-top: calc(var(--diagonal-section-offset)/2);
    padding-bottom: calc(var(--diagonal-section-offset)/2);
    -webkit-clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
            clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
  }

  .diagonal-section--flip-x {
    -webkit-clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
            clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
  }

  .diagonal-section-top {
    padding-top: calc(var(--diagonal-section-offset)/2);
    -webkit-clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% 100%);
  }

  .diagonal-section-top--flip-x {
    -webkit-clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% 100%);
  }

  .diagonal-section-top--flip-x.diagonal-section-bottom {
    -webkit-clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
            clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
  }

  .diagonal-section-bottom {
    padding-bottom: calc(var(--diagonal-section-offset)/2);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
  }

  .diagonal-section-bottom--flip-x {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
  }

  .diagonal-section-bottom--flip-x.diagonal-section-top {
    -webkit-clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
            clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
  }

  .diagonal-section-top--flip-x.diagonal-section-bottom--flip-x {
    -webkit-clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
            clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
  }
}

.diagonal-section-blue {
	background: #0056b3;
}
.diagonal-section-blue p, .diagonal-section-blue .subtitle, .diagonal-section-blue .title {
	color: #f9f9f9;
}
.diagonal-section-orange {
	background: #FCA311;
}
.diagonal-section-asparagus {
	background: #77966D;
}
.diagonal-section-asparagus p, .diagonal-section-asparagus .subtitle, .diagonal-section-asparagus .title, .diagonal-section-asparagus strong {
	color: #f9f9f9;
}

/*
 Custom Bulma Color Variables 
:root {
   Primary color scheme 
  --primary: #0056b3;
  --primary-invert: white;

   Success and links 
  --success: #28a745;
  --success-invert: white;
  --link: #0056b3;
  --link-hover: #003f8a;

   Text and background colors 
  --text: #333333;  Dark grey for readability 
  --text: #666666;  Lighter grey for subtitles 
  --background: #f9f9f9;

   Border and card background 
  --border: #e0e0e0;
  --card-background: white;

   Footer background and text 
  --footer-background: #222222;
  --footer-text: #ffffff;
  
   Dropdowns 
	--dropdown-background: #ffffff;  Fix dropdown color 
	--dropdown-hover-bg: #f5f5f5;
  
  --button-hover-bg: #004085;
  
  
}

body {
  background-color: var(--background);
}

 Typography 
body, p, a, strong {
  font-family: 'Lato', sans-serif;
  color: var(--text);  Ensure text is readable 
}

h1, h2, h3, .title, .subtitle {
  font-family: 'Poppins', sans-serif;
  color: var(--text);  Darker text for titles 
}

 Buttons 
.button.is-primary {
  background-color: var(--primary);
  color: var(--primary-invert);
  border: none;
  border-radius: 4px;  Rounded corners 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  Add a light shadow 
}

.button.is-success {
  background-color: var(--success);
  color: var(--success-invert);
}

.button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);  Slight hover effect 
}

 Cards 
.card {
  background-color: var(--card-background);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  Subtle shadow 
  margin-bottom: 20px;
}

.card-content {
  color: var(--text);
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.dropdown-content {
  background-color: var(--dropdown-background);
}

.dropdown-item:hover {
  background-color: var(--dropdown-hover-bg);
}

 Footer 
.footer {
  background-color: var(--footer-background);
  color: var(--footer-text);
}

.footer a, .footer p, .footer strong {
  color: var(--footer-text);
}

.footer a:hover {
  color: var(--primary-invert);
}

 Responsive Adjustments 
@media (max-width: 768px) {
  .card {
    margin-bottom: 10px;
  }
} */