/*
#AFD4D9; /* teal
#C9AFD9; /* purple
#D9B4AF; /* red
#BFD9AF; /* green
*/

/*
--violet-ray:   #9B00FFFF; /* purple
--periwinkle:   #DCD6F7FF; /* Lt purple
--muted-olive:  #8CBA80FF; /* green
--cinnabar:     #EF3E36FF; /* Red
--periwinkle-2: #A6B1E1FF; /* lt blue
*/

header {
    color: #FFFFFF;
    background: #9B00FFFF; /* #C9AFD9; */
    padding: 20px 20px;
}

body {
    font-family: "Barlow", sans-serif;
	line-height: 1.8;

	padding: 40px 10px;
	color: #222;
	background: #DCD6F7FF; /* #f8f9fb; */
	max-width: 2000px;
}

h1, h2, h3 {
	line-height: 1.2;
    font-family: "Barlow", sans-serif;
}

h1 {
	font-size: 2.5rem;
	margin-bottom: 20px;
    font-weight: 700;
}

h2 {
	margin-top: 15px;
	font-size: 2rem;
	margin-bottom: 15px;
    font-weight: 500;
}

h3 {
	margin-bottom: 10px;
	font-size: 1.2rem;
	margin-bottom: 10px;
    font-weight: 500;
}


p {
  margin-bottom: 10px;
}

a {
  color: #2563eb;
  text-decoration: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 20px;

}

table th,
table td {
  border: 1px solid #000000;
  padding: 12px;
  text-align: left;
}

table th {
  background-color: #A6B1E1;
  font-weight: bold;
}
table td {
  background-color: #c3d5d8;
}


table.layout th,
table.layout  td {

    border: 0;
    background-color: transparent;
}


.barlow-light {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-medium {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-black {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.barlow-light-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.barlow-regular-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.barlow-medium-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.barlow-black-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: italic;
}



.container {
    max-width: 2000px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
}

nav {
    background: transparent;
    border-bottom: 10px solid #9B00FF;
    line-height: 1.1;
    padding: 0px;
  	font-size: 1rem;

    
}

nav a {
    margin-left: 3px;
    text-decoration: none;
    color: #0F172A;

}

a.menuitem {
	background: #FFF;
    padding: 5px 5px 0px 5px;
}

a.menuitem.this{
    color:#FFF;
  	background: #9B00FF;
}
a.menuitem:hover {
	background: #C670FF;
}

.banner {
    max-width: 800px;

}

.hero-text {
    max-width: 2000px;
    margin: auto;
    padding: 20px;
    color: #FFFFFF;
    background: #9B00FFFF; /* #C9AFD9; */
       font-family: "Barlow", sans-serif;

}

.button {
      display: inline-block;
      background: #27F549;
      color: 4927F5;
      padding: 14px 24px;
      font-weight: bold;
      border-radius: 6px;
      margin-top: 20px;
}

.section {
  padding: 30px 0;
  background: white;
  border-bottom: 1px solid #ddd;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1800px));
  gap: 30px;
  margin-top: 40px;
}

.card {
    background: #A6B1E1FF;  /* #AFD4D9; #f4f6f9; */
    padding: 30px;
    border-radius: 10px;
}

footer {
  background: #0f172a;
  color: white;
  padding: 20px 20px;
  text-align: center;
}



article {
    background: #AFD4D9;
    padding: 10px;
    
    border-radius: 10px;
    border: 1px solid #ddd;

    margin-top: 10px;
    margin-bottom: 10px;
}

.service {
    background: #AFD4D9;
    padding: 10px;

    border-radius: 10px;
    border: 1px solid #ddd;

    margin-top: 10px;
    margin-bottom: 10px;
}

/* CSS HEX */
--violet-ray:   #9b00ffff;
--periwinkle:   #dcd6f7ff;
--muted-olive:  #8cba80ff;
--cinnabar:     #ef3e36ff;
--periwinkle-2: #a6b1e1ff;

/* CSS HSL */
--violet-ray: hsla(276, 100%, 50%, 1);
--periwinkle: hsla(251, 67%, 90%, 1);
--muted-olive: hsla(108, 30%, 62%, 1);
--cinnabar: hsla(3, 85%, 57%, 1);
--periwinkle-2: hsla(229, 50%, 77%, 1);

/* SCSS HEX */
$violet-ray:    #9B00FFFF;
$periwinkle:    #DCD6F7FF;
$muted-olive:   #8CBA80FF;
$cinnabar:      #EF3E36FF;
$periwinkle-2:  #A6B1E1FF;

/* SCSS HSL */
$violet-ray: hsla(276, 100%, 50%, 1);
$periwinkle: hsla(251, 67%, 90%, 1);
$muted-olive: hsla(108, 30%, 62%, 1);
$cinnabar: hsla(3, 85%, 57%, 1);
$periwinkle-2: hsla(229, 50%, 77%, 1);

/* SCSS RGB */
$violet-ray: rgba(155, 0, 255, 1);
$periwinkle: rgba(220, 214, 247, 1);
$muted-olive: rgba(140, 186, 128, 1);
$cinnabar: rgba(239, 62, 54, 1);
$periwinkle-2: rgba(166, 177, 225, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #9b00ffff, #dcd6f7ff, #8cba80ff, #ef3e36ff, #a6b1e1ff);
$gradient-right: linear-gradient(90deg, #9b00ffff, #dcd6f7ff, #8cba80ff, #ef3e36ff, #a6b1e1ff);
$gradient-bottom: linear-gradient(180deg, #9b00ffff, #dcd6f7ff, #8cba80ff, #ef3e36ff, #a6b1e1ff);
$gradient-left: linear-gradient(270deg, #9b00ffff, #dcd6f7ff, #8cba80ff, #ef3e36ff, #a6b1e1ff);
$gradient-top-right: linear-gradient(45deg, #9b00ffff, #dcd6f7ff, #8cba80ff, #ef3e36ff, #a6b1e1ff);
$gradient-bottom-right: linear-gradient(135deg, #9b00ffff, #dcd6f7ff, #8cba80ff, #ef3e36ff, #a6b1e1ff);
$gradient-top-left: linear-gradient(225deg, #9b00ffff, #dcd6f7ff, #8cba80ff, #ef3e36ff, #a6b1e1ff);
$gradient-bottom-left: linear-gradient(315deg, #9b00ffff, #dcd6f7ff, #8cba80ff, #ef3e36ff, #a6b1e1ff);
$gradient-radial: radial-gradient(#9b00ffff, #dcd6f7ff, #8cba80ff, #ef3e36ff, #a6b1e1ff);