.name-hero {
margin-top:18px;
display:grid;
grid-template-columns: 1.4fr 1fr;
gap:20px;
align-items:start;
padding-bottom:20px;
border-bottom:1px solid #efeaf3;
margin-bottom:20px;
}
.nh-left {
min-width: 0;
}
.nh-right {
min-width: 0;
padding-top:20px;
}
.name-hero-h1 {
font-family:Caladea;
font-size:56px;
color:#75239E;
letter-spacing:-1px;
margin-top:0;
}
.name-detail-data {
margin:20px 0 70px;
padding-left:30px;
}
.name-hero-span {
font-weight:900;
font-size:11px;
letter-spacing:1px;
color:#333;
}
.jumpto {
display: block;
margin: 25px 0 0 0;
}
ul.nh-toc {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6px 16px;
}
.nh-toc a {
font-weight: 700;
font-size: 14px;
color: #6d3987;
text-decoration: none;
}
h2.nsection {font-size:27px; margin:0 0 5px 0;}
.breadcrumb {
font-size:14px;
color:#9a93a6;
margin-top:20px;
}
.breadcrumb-a {
color:#8f4baa;
}
.breadcrumb-span {
color:#9a93a6;
}
.name-hero-3 {
display:flex;
gap:28px;
flex-wrap:wrap;
margin-bottom:18px;
}
.name-hero-4 {
font-weight:700;
font-size:17px;
color:#2a2233;
margin-top:3px;
}
.name-hero-a {
display:flex;
align-items:center;
gap:9px;
font-weight:900;
font-size:15px;
color:#fff;
background:#ec1c8c;
padding:14px 26px;
border-radius:999px;
white-space:nowrap;
text-decoration: none;
width:fit-content;
transition: background-color 0.3s ease-in-out; 
}
.name-hero-a:hover {  color:#fff; background:#75239E;}
.meaning {
padding-bottom:15px;
border-bottom:1px solid #efeaf3;
margin-bottom:20px;
}
.meaning-2 {
display:grid;
grid-template-columns: 1.6fr 1fr;
gap:44px;
}
.meaning-3 {
color:#3f3849;
}
.meaning-3 p { margin-bottom:10px !important;}
.meaning-4 {
background:#f4ecf9;
border-radius:22px;
padding:30px;
align-self:flex-start;
}
.meaning-5 {
font-weight:900;
font-size:12px;
letter-spacing:1.2px;
color:#8f4baa;
margin-bottom:14px;
}
.meaning-6 {
display:flex;
flex-direction:column;
gap:14px;
}
.meaning-7 {
display:flex;
justify-content:space-between;
font-size:15px;
}
.meaning-span {
color:#6f6680;
}
.meaning-span-2 {
font-weight:700;
color:#2a2233;
}
.meaning-11 {
height:1px;
background:#e5d9ef;
margin:20px 0;
}
.categories {
font-weight:900;
font-size:11px;
letter-spacing:1px;
color:#333;
margin:30px 0 2px;
}
.catlist {
display:flex;
flex-wrap:wrap;
font-size:13px;
text-transform: uppercase;
gap:10px;
}
.meaning-a {
font-weight:700;
font-size:15px;
color:#6d3987;
}
.spellings {
}
.spellings-p {
}
.related-names {
margin-bottom:20px;
}
.also-likes{
}
.related-names-a {
display:flex;
align-items:center;
gap:8px;
font-weight:700;
color:#2a2233;
background:#fff;
border:1px solid #ece7f2;
padding:8px 18px 8px 10px;
border-radius:999px;
}
.related-names-span {
width:9px;
height:9px;
border-radius:999px;
}
.related-names-span.dot-girl {
background:#ec1c8c;
}
.related-names-span.dot-boy {
background:#008fd1;
}
.related-names-span.dot-neutral {
background:#0dcc5f;
}
.sound-alikes-a {
color:#8f4baa;
}
.sound-alikes-span {
font-weight:700;
color:#6d3987;
background:#f4ecf9;
border-radius:999px;
}
.stats {
border-top:1px solid #efeaf3;
padding-top:20px;
padding-bottom:20px;
}
.stats-p {
margin-bottom:26px;
}
.stats-strong {
color:#2a2233;
}
.stats-2 {
background:#f9f7fb;
border:1px solid #ece7f2;
border-radius:22px;
margin-top:20px;
}
.stats-svg {
width:100%;
height:auto;
display:block;
}
.songs {
border-top:1px solid #efeaf3;
padding-top:20px;
}
.songs-2 {
column-count:2;
column-gap:36px;
}
.songs-3 {
break-inside:avoid;
display:flex;
justify-content:space-between;
gap:14px;
padding:11px 0;
border-bottom:1px solid #f0e7f5;
font-size:15px;
}
.songs-span {
color:#2a2233;
font-weight:700;
}
.icon-spelling::before,
.icon-alsolike::before,
.icon-sound::before,
.icon-songs::before,
.icon-stats::before {
content: "";
display: inline-block;
width: 32px;
height: 32px;
margin-right: 12px;
vertical-align: -8px;
background-size: contain;
background-repeat: no-repeat;
}
h2.nsection.icon-spelling::before {
background-image: url(//babynames.com/wp-content/uploads/2026/07/icon-spelling.png);
}
h2.nsection.icon-alsolike::before {
background-image: url(//babynames.com/wp-content/uploads/2026/07/icon-like.png);
}
h2.nsection.icon-sound::before {
background-image: url(//babynames.com/wp-content/uploads/2026/07/icon-sound.png);
}
h2.nsection.icon-stats::before {
background-image: url(//babynames.com/wp-content/uploads/2026/07/icon-stats.png);
}
h2.nsection.icon-songs::before {
background-image: url(//babynames.com/wp-content/uploads/2026/07/icon-songs.png);
}
.chartdis {font-size:14px; font-style:italic; margin-left:20px;}
@media (max-width: 768px) {
.name-hero,
.meaning-2 {
grid-template-columns: 1fr;
}
.name-hero-h1 {font-size:45px;}
h2.nsection {font-size:20px;}
.name-detail-data {margin-left:0 !important;padding-left:0 !important;}
.name-hero-3 {
justify-content: center;
}
.name-hero-a {
margin: 0 auto;
}
.nh-right {
padding-top:0px;
}
.nh-left {
text-align: center;
}
.songs-2 {
column-count: 1;
max-width:90%;
margin:auto;
}
}