/* variables  */

@font-face {
    font-family: 'normal';
    src: url('../assets/fonts/Karla-Regular.ttf') format('truetype');
  }

  @font-face {
    font-family: 'bold';
    src: url('../assets/fonts/Karla-Bold.ttf') format('truetype'); 
  }

  @font-face {
    font-family: 'extrabold';
    src: url('../assets/fonts/Karla-ExtraBold.ttf') format('truetype'); 
}


body {
    width: 100%; 
    margin: 0; 
    height: 100%; 
    background: white; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; 
    display: inline-flex
}

/* headings and fonts */

h1 {
    width: 100%; 
    color: #111111; 
    font-size: 64px; 
    font-family: 'extrabold'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: auto; 
}

h2 {
    width: 100%; 
    color: #111111; 
    font-size: 40px; 
    font-family: 'extrabold'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: auto; 
}

h3 {
    width: 100%; 
    color: #111111; 
    font-size: 32px; 
    font-family: 'bold'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: auto; 

}

h4 {
    width: 100%; 
    color: #111111; 
    font-size: 24px; 
    font-family: 'bold'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: auto; 
}

h6 {
    width: 100%; 
    color: #111111; 
    font-size: 16px; 
    font-family: 'normal'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: auto; 

}

.xl-paragraph {
    color: #111111; 
    font-size: 36px; 
    font-family: 'normal'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: auto; 

}

.l-paragraph {
    color: #111111; 
    font-size: 24px; 
    font-family: 'normal'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: 30px; 

}

.m-paragraph{
    color: #111111; 
    font-size: 18px; 
    font-family: 'normal'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: 24px; 

}

.s-paragraph {
    color: #111111; 
    font-size: 12px; 
    font-family: 'normal'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: 18px; 

}

.emoji-bullet {
    font-size: 24px; 
    margin:0;
}

.bold {
    font-family:'bold'; 
}

.text-link {
    color: #315DB2; 
    text-decoration: underline; 
}

.text-link:visited {
    color: #315DB2;
}

.text-link:hover {
    cursor: pointer; 
    color: #274A8E; 
    text-decoration: underline; 
    
}

.hero-caption {
    color: #696969; 
    font-size: 18px; 
    font-family: 'normal'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: auto; 
}

.caption {
    color: #696969; 
    font-size: 16px; 
    font-family: 'normal'; 
    word-wrap: break-word; 
    margin: 0; 
    line-height: auto; 
}

/* header nav */

#header {
    width: 100%;
    margin: 0; 
    box-sizing: border-box; 
    padding-left: 24px; 
    padding-right: 24px; 
    padding-top: 16px; 
    padding-bottom: 16px;
    justify-content: flex-start; 
    align-items: center; 
    display: inline-flex
}

/* sections of content */

section {
    max-width: 1264px; 
    padding-top: 48px; 
    padding-bottom: 48px; 
    padding-left: 32px; 
    padding-right: 32px; 
}

.tight-section {
    max-width: 960px; 
}

.side-by-side {
    justify-content: left; 
    align-items: center; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 40px; 
}

.side-by-side .left-side {
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    display: inline-flex;
}

.side-by-side .right-side {
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    display: inline-flex; 
}

.side-by-side .unfixed {
    flex: 1 1 0; 
}

.case-study-hero {
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 40px; 
    display: inline-flex;

}

.case-study-section {
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 40px; 
    display: flex;

}

.content-block {
    width: 100%; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 40px; 
    display: inline-flex;
}

/* lists */ 

.vertical-list {
    /* width: 100%;  */
    height: 100%; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 24px; 
    display: inline-flex; 
}

.horizontal-list {
    /* width: 100%;  */
    height: 100%; 
    justify-content: flex-start;
    align-items: flex-start; 
    gap: 24px; 
    display: inline-flex
}

.li-no-decor {
    list-style-type: none;
}


/* emoji + text combos */ 

.horizontal-emoji-content {
    justify-content: flex-start; 
    align-items: center; 
    gap: 8px; 
    display: inline-flex
}

.stacked-content {
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 8px; 
    display: inline-flex
}

/* images and their captions */

.img-caption-combo {
    width: 100%; 
    height: 100%; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 12px; 
    display: inline-flex
}

.hero-img {
    width:100%; 
    height: auto; 
}



/* buttons */

button {
    border: 2px #111111 solid; 
    font-family: 'normal'; 
    cursor: pointer;
    background-color: white; 
}

a button{
    color: #111111; 
    text-decoration: none; 
}

button:hover {
    background-color: #315DB2; 
    border: 2px #315DB2 solid; 
}

a button:hover{
    color: white; 
    text-decoration: none; 
}

button:active {
    color: white; 
    background-color: #274A8E; 
    border: 2px #274A8E solid; 
} 

button.main-cta {
    padding-left: 24px; 
    padding-right: 24px; 
    padding-top: 16px; 
    padding-bottom: 16px; 
    font-size: 24px; 
}

button.case-study-cta {
    padding-left: 16px; 
    padding-right: 16px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    font-size: 16px; 
}

/* footer */
#footer {
    width: 100%;
    margin: 0px; 
    box-sizing: border-box; 
    padding-left: 40px; 
    padding-right: 40px;
    padding-bottom: 40px; 
    padding-top: 120px;  
    background: white; 
}

footer {
    justify-content: space-between; 
    align-items: flex-start; 
    display: inline-flex;
    width: 100%; 
}