.logo { max-width: 120px; height: auto; }

body { font-size:18px; }
/* Background Colors */
.bg-purple { background-color: #662786; }
.bg-ltpurple { background-color: #f5ebf9; }

.bg-blue { background-color: #56C2E6;  }
.bg-magnolia { background-color: #FAF5FA;  }
.bg-redpigment { background-color: #F32424;  }
.bg-readable{ background-color: #707070;  }
.bg-meds { background-color: #B02418;   }
.bg-tanner-pur { background-color: #605CC8;  }
.bg-ghostwhite { background-color: #F7F7FC;  }
.bg-medwhite { background-color: #fff;   }
.bg-eerie{ background-color: #141414;  }
.bg-medsactive { background-color:#F5F5F5;}
.bg-inactivegray { background-color:#ccc; }
.bg-dimgray { background-color:#707070; }
.bg-alice-blue { background-color:#E8F6FD; }
.bg-maya-blue { background-color:#6DC4F2; }
.bg-star-command { background-color:#1C7DB2; }
.bg-indigo { background-color:#0E3F59; }
.bg-rich-blk { background-color:#061B26; }

.bg-colors, .bg-blue, .bg-magnolia, .bg-redpigment, .bg-readable, .bg-meds, .bg-medwhite, .bg-eerie, .bg-medsactive, .bg-inactivegray, .bg-dimgray, .bg-trans-primary, .bg-trans-secondary, .bt-trans-bg1, .bg-tanner-pur, .bg-ghostwhite, .bg-alice-blue, .bg-maya-blue, .bg-star-command, .bg-indigo, .bg-rich-blk 
 { height:90px; }


.bg-trans-primary { background-color:#511291; } 
.bg-trans-secondary { background-color:#2AFC98; } 
.bg-trans-bg1 { background-color:#B2A8B8; }
.bg-trans-bg2 { background-color:#D7D2DA; }
.bg-trans-white {background-color:#FCFAFA;}
.bg-trans-text { background-color:#040403; }

.bg-gradient-primary-to-secondary { background: rgb(102, 39, 134); background: linear-gradient(51deg, rgba(102, 39, 134, 1) 21%, rgba(7, 190, 184, 1) 100%); }

/* Text Colors */
.text-purple { color: #662786; }
.text-shadow { text-shadow: 3px 1px #2C113A; }
.text-gradient { background: rgb(102, 39, 134); background: linear-gradient(51deg, rgba(102, 39, 134, 1) 21%, rgba(7, 190, 184, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-notes { font-size: 11px; line-height: 13px; text-transform: uppercase; }

/* Breadcrumbs */
.breadcrumb-item a { color: #662786;  }
.breadcrumb-item a:hover { color: #056b68; }

.breadcrumb-item.active { color: #056b68; }

.open-sans {   font-family: "Open Sans", serif;}
.avenir { font-family: 'Avenir LT Pro', sans-serif; }
.lato { font-family: "Lato", sans-serif; }

/* Buttons */
.btn-primary-purple { background-color: #662786; color: #f5ebf9; }
.btn-primary-purple:hover { background-color: #056b68; color: #e6fefd; }
.btn-primary-ltpurple { background-color: #f5ebf9; color: #662786; }
.btn-primary-ltpurple:hover, .btn-outline-ltpurple:hover { background-color: #e6fefd; color: #056b68; }
.btn-outline-ltpurple { border: 1px solid #e6fefd; color: #f5ebf9; }

/* Icon */
.icon { width: 40px; height: 40px; background-color: #eee; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 39px; font-weight: 900; }

/* Card Hover Effects */
.card.card-hover:hover { background-color: #e6fefd; color: #056b68; border-radius: 16px; }
.card.card-hover:hover .icon { background-color: #056b68; }
.card.card-hover:hover .icon img { filter: invert(1); }

/* Headings */
.large-heading { color: #000; opacity: 0.05; line-height: 1;  }
.medium-heading { font-size: 5rem; color: #000; opacity: 0.05; line-height: 1; margin-bottom: -4.7rem; }
.small-heading { margin: 0; }
.xsmall-heading { font-size: 2.75rem; line-height: 1.3; margin: 0; }

/* Titles On Individual Portfolios*/
.large-title { font-size: 34px; line-height: 41px; }
.title-1 { font-size: 28px; line-height: 34px; }
.title-2 { font-size: 22px; line-height: 28px; }
.title-3 { font-size: 20px; line-height: 25px; }
.headline-semi { font-size: 17px; line-height: 22px; font-weight: 600; }
.body-text { font-size: 17px; line-height: 22px; }
.call-out { font-size: 16px; line-height: 21px; }
.note-footnote { font-size: 13px; line-height: 18px; }
.display-title { font-size:72px; line-height: 120%; }
.symphony-h1 { font-size:64px; line-height: 120%; }
.symphony-h2 { font-size:56px; line-height: 120%; }
.symphony-h3 { font-size:48px; line-height: 120%; }
.symphony-h4 { font-size:32px; line-height: 120%; }
.symphony-h5 { font-size:24px; line-height: 120%; }
.symphony-body { font-size:16px; line-height: 150%; }

/* Feature */
.feature { display: inline-flex; align-items: center; justify-content: center; height: 3rem; width: 3rem; font-size: 1.5rem; }

/* Font Families */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5,.h5, h6, .h6 { font-family: "Roboto Condensed", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }

.btn { font-family: "Roboto Condensed", serif; font-optical-sizing: auto; font-weight:400; font-style: normal; }
body { font-family: "Roboto", serif; font-weight: 400; font-size: normal;}
.dynalight-regular { font-family: "Dynalight", serif; font-weight: 400; font-style: normal; }  

/* Sticky Top */
.sticky-top { position: -webkit-sticky; position: sticky; top: 150px; z-index: 10; }

/* Profile */
.profile { position: relative; height: 75vw; width: 75vw; border-radius: 5vw; margin-top: 5vw; max-height: 40rem; max-width: 40rem; }
.profile .profile-img { height: 80vw; max-height: 45rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }


/* Media Queries */
@media (max-width: 575px) { 
    .display-8 { font-size:4rem; }
    .display-6 { font-size:3rem; }
    .large-heading { font-size: 4rem; margin-bottom: -3.75rem; }
    .small-heading { font-size:3rem; line-height: 1.3; }
}

@media (min-width: 576px) { 
    .profile { height: 60vw; width: 60vw; }
    .profile .profile-img { height: 65vw; }
   .small-heading { font-size: 4rem; line-height: 1.3; }

}

@media (min-width: 576px) and (max-width: 991px) { 
    .display-8 { font-size: 6rem; }
    .display-6 { font-size: 4rem; }
    .large-heading { font-size: 7rem; margin-bottom: -6.5rem; }
 
}

@media (min-width: 768px) { 
    .profile { height: 50vw; width: 50vw; }
    .profile .profile-img { height: 55vw; }
 }

@media (min-width: 992px) { 
    .profile { height: 40vw; width: 40vw; }
    .profile .profile-img { height: 45vw; }
    .profile .dots-1, .profile .dots-2, .profile .dots-3, .profile .dots-4 { width: 1.5vw; }
    .display-8 { font-size: 8rem; }
    .display-6 { font-size: 6rem; }
    .large-heading { font-size: 8rem; margin-bottom: -6.5rem; }
 

}

@media (min-width: 1200px) { 
    .profile { height: 35vw; width: 35vw; } 
    .profile .profile-img { height: 40vw; } 
}

/* Font Awesome */
.fa-* { font-weight: 900; font-family: "Font Awesome 6 Brands"; }

/* Display Sizes */
.w-22 { width: 22%; }
.w-33 { width: 33%; }

/* Project Hover effect for shadow */
.hover-bg-color { transition: background-color 0.3s ease; }
.hover-bg-color:hover { background-color: #f5ebf9; }