:root{
/*=============PRIMARY COLOR AND BORDER============*/
--active-color: #3384f3;
--text-color: #1d1d1f; /*heading color and body text color*/
--white-color: #FFFFFF;
--border-color: #c4c4c8;

/*=============PRIMARY BG COLOR============*/
--primary-bg: #FFFFFF;
--secondary-bg: #F5F5F7;
--tertiary-bg: #F3F4F6;

/*=============CARD COLOR============*/
--card-border: #c4c4c8;
--card-border-active: #86868B80;
--card-bg: #FFFFFF;
--card-bg-active: #F3F4F6;

}

body{
font-family: 'Inter', system-ui, sans-serif;
}

/*============layout break==========*/
.oi-babynames-content {display: flex;justify-content: space-between;}
.oi-babynames-contentleft {padding-right: 20px;width: 660px;}
.oi-babynames-contentright {padding-left: 30px;width: 330px;}

/*=======RIGHT AD=============*/
.oi-adblock {
background: #f2f5f5;
margin-bottom: 48px;
}

.oi-adtext {
color: #292929;
font-size: 10px;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.1px;
text-transform: uppercase;
padding: 12px 6px;
text-align: center;
}

.oi-adimg {
margin: 0 auto;
max-width: 300px;
height: 250px;
text-align: center;
}

/*========MAIN HEADING=======*/
.oi-main-babyname-heading{
font-weight: 700;
font-size: 36px;
color: var(--text-color);
margin-bottom: 24px;
}

/*========BABYNAMES SUBHEADING=======*/
.oi-babynames-subheading h2{
font-size: 24px;
font-weight: 700;
color: var(--text-color);
margin-bottom: 24px;
}

/*======BABYNAMES SECTION=======*/
.oi-babyname-section{
margin-bottom: 48px;
}

/*======CARD EFFECT=======*/
.card-effect{
border: 1px solid var(--card-border);
background-color: var(--card-bg);
box-shadow: 0 1px 2px 0 #0000000D;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
/* transition: all .7s cubic-bezier(.28,.11,.32,1); */
transition: all .7s ease-in-out;
}

.card-effect:hover{
border-color: var(--card-border-active);
transform: scale(0.96);
background-color: var(--card-bg-active);
box-shadow: 
0 10px 15px -3px #0000001A, 
0 4px 6px -4px #0000001A; 
}


/*========BABY NAMES NAV LINK=======*/
.oi-babynames-navigation {
margin: 24px 0 32px 0;
}

/*====MAINNAV CONTAINER====*/
.mainnav-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}

/*====MAINNAV CONTAINER - MAINNAV LINK====*/
.mainnav-link {
white-space: nowrap;
border-radius: 9999px;
padding: 10px 12px;
font-size: 14px;
font-weight: 500;
color: var(--text-color);
background-image: linear-gradient(180deg, #FFFFFF66, #FFFFFF00);
/* background-image: linear-gradient(180deg, #FFFFFF2E, #FFFFFF00); */
/* transition: all .7s cubic-bezier(.28,.11,.32,1); */
transition: all .7s ease-in-out;
}


/*====MAINNAV CONTAINER - MAINNAV LINK ACTIVE====*/
.mainnav-link-active {
background-color: var(--active-color) !important;
color: var(--white-color) !important;
background-image: linear-gradient(180deg, #FFFFFF66, #FFFFFF00);
}

.mainnav-link:not(.mainnav-link-active):hover{
transform: scale(1.02);
background-color: var(--secondary-bg);
}

/*====MAINNAV CONTAINER - MAINNAV BTN====*/
.mainnav-btn{
border-radius: 9999px;
padding: 10px 12px;
font-size: 14px;
font-weight: 500;
color: var(--text-color);
background: transparent;
background-image: linear-gradient(180deg, #FFFFFF66, #FFFFFF00);
/* transition: all .7s cubic-bezier(.28,.11,.32,1); */
transition: all .7s ease-in-out;
border: none;
display: flex;
align-items: center;
cursor: pointer;
}

.mainnav-btn img{
width: 18px;
height: 18px;
}

/*====MAINNAV CONTAINER - MAIN NAV BTN ACTIVE====*/
.mainnav-btn-active {
background-color: var(--active-color) !important;
color: var(--white-color) !important;
background-image: linear-gradient(180deg, #FFFFFF66, #FFFFFF00);
}

.mainnav-btn:not(.mainnav-btn-active):hover{
transform: scale(1.02);
background-color: var(--secondary-bg);
}

/*====SUBNAV CONTAINER====*/
.subnav-container{
position: relative;
}

/*====SUBNAV DROPDOWN====*/
.subnav-dropdown{
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
width: 192px; 
padding-top: 4px;
padding-bottom: 4px;
background-color: var(--primary-bg);
backdrop-filter: blur(8px);
border-radius: 14px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
z-index: 10;
display: none;
}

/*====SUBNAV LINK====*/
.subnav-link {
display: block;
padding: 8px 16px;
font-size: 14px;
color: var(--text-color);
text-decoration: none;
transition: all 0.2s ease;
}

/*====DROPDOWN ARROW====*/
.dropdown-arrow{
display: inline-block;
width: 7px;
height: 7px;
border-right: 1px solid var(--text-color);
border-bottom: 1px solid var(--text-color);
transform: rotate(45deg);
margin-left: 8px;
margin-bottom: 2px;
}

.subnav-link:hover {
background-color: var(--secondary-bg);
}

.subnav-dropdown.show-dropdown {
display: block;
}

.mainnav-btn-active .dropdown-arrow {
/* transform: rotate(-135deg);
margin-top: 6px; */
border-color: var(--primary-bg);
}

/*========BREADCRUMBS=======*/

.oi-babynames-breadcrumb{
margin-bottom: 15px;
color: var(--text-color);
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}

.oi-babynames-breadcrumb a{
color: var(--text-color);
}

.oi-babynames-breadcrumb a:hover{
color: #374151;
}

.oi-babynames-breadcrumb span:last-child{
color: var(--active-color);
font-size: 16px;
}

/*========INTRO CRAD=======*/
.intro-card{
padding: 24px;
border: 1px solid var(--card-border);
border-radius: 16px;
background-color: var(--card-bg);
box-shadow: 0 1px 2px 0 #0000000D;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
/* transition: all .7s cubic-bezier(.28,.11,.32,1); */
transition: all .7s ease-in-out;
}

.intro-card .description{
font-size: 16px;
font-weight: 400;
color: var(--text-color);
line-height: 26px;
}

.intro-card:hover {
transform: scale(1.01);
border-color: var(--card-border-active); 
background-color: var(--card-bg-active); 
box-shadow:
0 10px 15px -3px #0000001A,
0 4px 6px -4px #0000001A;
}

/*
.intro-card:hover .gradient-overlay {
background-image: linear-gradient(to top, transparent, transparent);
}*/

.intro-card:hover {background-color: var(--primary-bg); }

.intro-card .content-container {
position: relative;
overflow: hidden;
height: 8rem;
}

/*====set containet height as 100%====*/
.intro-card .content-container-height{
height: 100%;
}

.intro-card .content-container .paragraph{
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--text-color);
margin-bottom: 16px;
}

.intro-card .content-container .paragraph:last-child{
margin-bottom: 0px;
}

/*=====gradient overlay in intro card=====*/
.gradient-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6rem;
background-image: linear-gradient(to top, #fff, transparent);
}

/*====grandient overlay n intro card while expand=====*/
.gradient-overlay-remove{
display: none;
}

/*=====READ MORE BTN IN INTRO CARD=====*/
.read-more-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 8px;
transition: color 150ms ease-in-out;
cursor: pointer;
}

.read-more-btn button{
background: transparent;
border: none;
font-size: 16px;
color: var(--active-color);
font-weight: 500;
cursor: pointer;
text-transform: capitalize;
}

.read-more-btn:hover {
color: var(--active-color);
}

.read-more-btn .icon-chevron-down {
margin-left: 4px; 
}

/*========POPULAR CATEGORIES - CATEGORY CARD CONTAINER=======*/
.category-card-container{
display: flex;
flex-wrap: wrap;
gap: 20px 12px;
justify-content: space-between;
}

.category-card-container .category-card{
width: 200px;
height: 80px;
padding: 16px;
border-radius: 16px;
display: grid;
place-content: center;
}

.category-card-container .category-card p{
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--text-color);
}


/*========NAME SWITCH BUTTON=======*/
.name-switch {
margin-bottom: 32px; 
}

.name-switch-btns {
display: inline-flex;
align-items: center;
background-color: var(--secondary-bg);
border: 1px solid var(--border-color);
border-radius: 9999px;
padding: 6px;
}

.name-switch-btn {
padding: 10px 22px;
font-size: 16px;
font-weight: 500;
border-radius: 9999px;
transition: all 0.5s ease;
background: none;
border: none;
cursor: pointer;
}

.name-switch-btn__default a{
color: var(--text-color);
}

.name-switch-btn__default:hover {
transform: scale(1.02);
}

.name-switch-btn__active{
background-color: var(--active-color);
color: var(--white-color);
box-shadow: 0 1px 2px #0000000D;
transform: scale(1.02);
}

/*========BROWSE BABY NAMES CONTAINER=======*/
.browse-baby-names-container{
border-radius: 16px;
padding: 24px;
}


/*========BROWSE BABY NAMES CONTAINER - LETTER BTN CONTAINER=======*/
.browse-baby-names-container .letter-btn-container{
display: flex;
gap: 15px;
flex-wrap: wrap;
}

.browse-baby-names-container .letter-btn-container .letter-btn{
font-size: 16px;
font-weight: 500;
display: flex;
height: 44px;
width: 44px;
align-items: center;
justify-content: center;
border-radius:100%;
border: 1px solid var(--border-color);
color: var(--text-color);
background: transparent;
background-image: linear-gradient(180deg,#fffc,#fff6);
/* transition: all .7s cubic-bezier(.28,.11,.32,1); */
transition: all .7s ease-in-out;
cursor: pointer;
}

.letter-btn-active{
transform: scale(1.05) !important;
border-color: var(--active-color) !important;
background-color: var(--active-color) !important;
background-image: none !important;
color: var(--white-color) !important;; 
}

.browse-baby-names-container .letter-btn-container .letter-btn:hover{
transform: scale(1.05);
border-color: var(--active-color);
background-color: var(--active-color);
color: var(--white-color);
}

/*========BABYNAMES RESULT CONTAINER=======*/
.babynames-result-container{
display: none;
}

.babynames-result-container-show{
margin-top: 25px;
display: block;
}

.babynames-result-container h3{
font-size: 20px;
font-weight: 400;
color: var(--text-color);
margin-bottom: 20px;
}

.babynames-result-container .result-block{
background: #f9fafb;
text-align: center;
padding: 18px;
border-radius: 8px;
color: var(--text-color);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}

.babynames-by-alphabet h2{
font-size: 24px;
font-weight: 700;
color: var(--text-color);
margin-bottom: 24px;
}

/*========NAME CARD=======*/
.name-card {
padding: 16px;
border-radius: 16px;
margin-bottom: 18px;
}

.name-card:last-child{
margin-bottom: 0px;
}


.name-card__title{
font-size: 20px; 
font-weight: 400;   
color: var(--text-color);
margin-bottom: 10px;
}

.name-card__meaning{
font-size: 16px; 
color: var(--text-color);
margin-bottom: 10px;
}

.name-card__tags{
display: flex;
gap: 8px;
}

.tag{
font-size: 14px;
padding: 6px 10px;
border-radius: 50px;
background-color: var(--tertiary-bg); 
font-weight: 400;
}


/*========BABYNAMES FAQ CONTAINER=======*/
.babynames-faq-container{
padding: 24px;
border-radius: 16px;
}

/*=====================ACCORDION CONTAINER=======================*/
.accordion-container {
width: 100%;
height: auto;
}

/*==============ACCORDION CONTAINER - ACCORDION ITEM==================*/
.accordion-container .accordion-item{
padding: 16px 0px;
border-bottom: 1px solid var(--border-color);
}

.accordion-container .accordion-item:first-child{
padding-top: 0px;
}

.accordion-container .accordion-item:last-child{
padding-bottom: 0px;
border: none;
}

/*==============ACCORDION ITEM - ACCORDION HEADER==================*/

.accordion-container .accordion-item .accordion-header{
display: flex;
align-items: flex-start;
justify-content: space-between;
cursor: pointer;
transition: 0.3s ease;
}

.accordion-container .accordion-item .accordion-header p{
font-size: 16px;
font-weight: 400;
line-height: 17.6px;
letter-spacing: 0.01em;
text-align: left;
color: var(--text-color);
}

.accordion-arrow{
margin-top: 2px;
transition: transform 0.3s ease;
}


/*==============ACCORDION ITEM - ACCORDION BODY==================*/
.accordion-container .accordion-item .accordion-body{
font-family: Arial;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.01em;
text-align: left;
color: var(--text-color);
padding-top: 8px;
display: none;
overflow: hidden;
/* animation: slideDown .7s cubic-bezier(.28,.11,.32,1); */
animation: slideDown .7s ease-in-out;
}

@keyframes slideDown {
0% {
transform: translateY(-10px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}

/*===========RELATED PAGES CONTAINER - RELATED PAGE LINKS===========*/

.related-page-links{
padding: 24px;
border-radius: 16px;
}


.related-page-links .link{
padding: 16px;
margin-bottom: 25px;
border-radius: 8px;
border: 1px solid #F3F4F6;
transition: all 0.2s ease-in-out;
cursor: pointer;
}

.related-page-links .link:hover {
background-color: #f9fafb; 
}

.related-page-links .link:last-child{
margin-bottom: 0px;
}

.related-page-links .link h3{
font-size: 20px;
margin-bottom: 8px;
color: var(--text-color);
line-height: 1.25rem;
font-weight: 400;
}

.related-page-links .link p{
font-size: 16px;
line-height: 1.25rem;
font-weight: 400;
color: var(--text-color);
}

/*========BABY NAMES RIGHT BLOCK=======*/
.oi-babynames-right-block{
border-radius: 16px;
}

.oi-babynames-right-block .oi-babynames-rightheading{
background: var(--secondary-bg);
padding: 12px 16px;
border-bottom: 1px solid var(--border-color);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
overflow: hidden;line-height: 36px;
}

.oi-babynames-right-block .list-block{
padding: 12px 16px;
}

.oi-babynames-right-block .list-block .list{
padding: 10px 0px;
}

.oi-babynames-right-block .list-block .list p a{
font-size: 16px;
font-weight: 500px;
line-height: 24px;
color: var(--text-color);
transition: color .15s cubic-bezier(.4,0,.2,1);
}

.oi-babynames-right-block .list-block .list p a:hover{
color: var(--active-color);
}



/* ========baby details page tab*/

.oi-babyname-table table {border-collapse: collapse;width: 100%;}
.oi-babyname-table table th:first-child {border-radius: 16px 0 0 0;width: 50%;}
.oi-babyname-table table th:nth-child(2) {border-radius: 0 16px 0 0;}
.oi-babyname-table table th {position: relative;padding: 15px 15px;border-bottom: 1px solid #d6d6d6;border-radius: 16px 16px 0 0;text-align: left;background: #f6f6f6;color: var(--text-color);}
.oi-babyname-table table td {position: relative;padding: 15px 15px;border-bottom: 1px solid #d6d6d6;color: var(--text-color);}
.oi-babyname-table table tr:last-child td {border-bottom: 0 none;}
.oi-babyname-table table td a {color: var(--text-color);}
.oi-babyname-table-container {max-height: 293px;overflow-y: auto;}
.oi-babyname-table-container tbody {max-height: 250px;overflow-y: auto;}
.oi-babyname-table-container table thead th   {position: sticky;top: 0;z-index: 1;}