@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
:root {
  --primary: #18376F;
  --accent:  #7789A9;
  --bg:      #FAFBFA;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Patrick Hand', cursive;
    background: var(--bg);
    color: var(--primary);
    line-height: 1.6;
    max-width: 900px;
    margin: auto;
    padding: 1rem;
}

#services ul {
  list-style-type: square;
  margin-left: 1.2rem;
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.branding { display: flex; align-items: center; }
.branding h1 { margin-right: 1rem; }
.logo { height: 48px; }
header nav a { margin-right: 1rem; text-decoration: none; color: var(--primary); }
header nav a:hover { text-decoration: underline; }
h1, h2, h3 {
    border-bottom: 2px dashed var(--accent);
    padding-bottom: 0.25rem;
    margin-bottom: 1rem;
}
.card {
    border: 2px dashed var(--accent);
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
}
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px dashed var(--accent);
    text-decoration: none;
    color: var(--accent);
    border-radius: 4px;
}
.btn:hover { background: var(--accent); color: #fff; }
/* Portfolio logo grid */
#portfolio .portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
#portfolio .portfolio-item { flex: 0 1 120px; text-align: center; }
#portfolio .portfolio-item { text-align: left; }
#portfolio .portfolio-item ul { margin-left: 1.2rem; list-style-type: square;}
#portfolio .portfolio-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: grayscale(100%);
  transition: filter .3s ease;
}
#portfolio .portfolio-item img:hover { filter: grayscale(0%); }
/* Team grid */
#team .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
#team .team-member p { font-style: italic; color: var(--accent); }

/* global section spacing */
.site-section       { margin-bottom: 3rem; }
/* extra gap between portfolio companies */
#portfolio .portfolio-item { margin-bottom: 2rem; }


/* --- portfolio header layout --- */
#portfolio .portfolio-item .portfolio-header{
  display:flex;
  justify-content:space-between;   /* name left, logo pushed right */
  align-items:center;
  margin-bottom:.5rem;             /* a little gap before the text */
}
#portfolio .portfolio-item .portfolio-header h3{ margin:0; }
#portfolio .portfolio-item .portfolio-header img{
  max-width:100px;                  /* tame giant logos */
  height:auto;
  margin-left:1rem;
}

/* --- full-width dashed line for each company header --- */
#portfolio .portfolio-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;            /* keep vertical gap */
  padding-bottom:.25rem;         /* space before the line */
  border-bottom:1px dashed var(--accent);

}

/* remove the dashed line that was on all <h3> tags */
#portfolio .portfolio-header h3{
  margin:0;
  border:none;                   /* override global h3 rule */
}


/* global section spacing */
.site-section { margin-bottom: 3rem; }

/* extra gap between portfolio companies */
#portfolio .portfolio-item { margin-bottom: 2rem; }


}

.about-photo{
  max-width:120px;
  border-radius:50%;
  float:right;
  margin-left:1rem;
  margin-bottom:.5rem;
}