/* =====================================
   DISCOVER BLOG CATEGORIES
   MAIN
===================================== */

.dbc-section{
    width:100%;
    padding:7px 0 70px 0;
    background:#fff;
}

.dbc-container{
    width:1200px;
    max-width:calc(100% - 40px);
    margin:auto;
}

.dbc-heading{
    text-align: center;
    margin: 0 auto 50px;
    max-width: 700px;
}

.dbc-heading h2{
    font-size: 48px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
    letter-spacing: -1px;
}

.dbc-heading h2::after{
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: #0d3b66;
    margin: 15px auto 0;
    border-radius: 50px;
}

.dbc-heading p{
    font-size: 18px;
    color: #6b7280;
    margin: 0;
    line-height: 1.7;
}


/* =====================================
LAYOUT
===================================== */

.dbc-layout{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:40px;

    align-items:start;

}


/* =====================================
SIDEBAR
===================================== */

.dbc-sidebar{

    position:sticky;

    top:100px;

}


.dbc-category-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.dbc-category{

    width:100%;

    border:1px solid #03396c;

    background:#fff;

    padding:18px 20px;

    text-align:left;

    border-radius:10px;

    cursor:pointer;

    font-size:15px;

    font-weight:400;

    color:black;

    transition:.3s;
     font-family: "roboto";

}


.dbc-category:hover{

    border-color:#03396c;

    color:black;

    transform:translateX(3px);

}


.dbc-category.active{
    background: linear-gradient(135deg, #0a4f96 0%, #03396c 50%, #022b52 100%);
    color: #fff;
    border: 2px solid #fff;
    border-left: 5px solid #fff;

    box-shadow:
        0 6px 18px rgba(3, 57, 108, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.35);

    text-shadow: 0 1px 2px rgba(0,0,0,0.2);

    transform: translateX(2px);
    transition: all 0.25s ease;
}


/* =====================================
RIGHT AREA
===================================== */

.dbc-right{

    width:100%;

}


/* =====================================
GRID
===================================== */

.dbc-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}


/* =====================================
BLOG CARD
===================================== */

.dbc-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:14px;

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:0 4px 15px rgba(0,0,0,.04);

    display:flex;

    flex-direction:column;

    height:100%;

}

.dbc-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 35px rgba(0,0,0,.10);

}


/* =====================================
IMAGE
===================================== */

.dbc-image{

    display:block;

    overflow:hidden;

    aspect-ratio:16/9;

    background:#f6f6f6;

}

.dbc-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

    display:block;

}

.dbc-card:hover .dbc-image img{

    transform:scale(1.06);

}


/* =====================================
CARD CONTENT
===================================== */

.dbc-content{

    padding:20px;

    display:flex;

    flex-direction:column;

    flex:1;

}


/* =====================================
CATEGORY
===================================== */

.dbc-category{

    display:inline-block;

    font-size:12px;

    font-weight:700;

    color:black;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:10px;

}
.dbc-card-category{
    display:inline-block;

    font-size:11px;

    font-weight:400;

    color:#494949;

   

    letter-spacing:.5px;

    margin-bottom:10px;
}

/* =====================================
TITLE
===================================== */

.dbc-content h3{

    margin:0 0 14px;

    font-size:21px;

    line-height:1.45;

    font-weight:700;

}

.dbc-content h3 a{

    color:#111;

    text-decoration:none;

    transition:.3s;

}




/* =====================================
META
===================================== */

.dbc-meta{

    margin-top:auto;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    color:#777;

    font-size:13px;

}

.dbc-meta span{

    display:flex;

    align-items:center;

}


/* =====================================
EMPTY STATE
===================================== */

.dbc-empty{

    grid-column:1/-1;

    padding:60px 20px;

    text-align:center;

    border:1px dashed #ddd;

    border-radius:12px;

    font-size:18px;

    color:#777;

}


/* =====================================
LOADER
===================================== */

.dbc-loader{

    display:none;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:40px 0;

}

.dbc-loader.active{

    display:flex;

}

.dbc-loader span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#e61b23;

    animation:dbcBounce 1s infinite;

}

.dbc-loader span:nth-child(2){

    animation-delay:.15s;

}

.dbc-loader span:nth-child(3){

    animation-delay:.30s;

}

@keyframes dbcBounce{

    0%,80%,100%{

        transform:scale(.5);

        opacity:.4;

    }

    40%{

        transform:scale(1);

        opacity:1;

    }

}

/* =====================================
MOBILE DROPDOWN
===================================== */

.dbc-mobile-wrapper{
    display: none;
    margin-bottom: 25px;
    position: relative;
}
/*gemini*/
/* =====================================
CUSTOM MOBILE DROPDOWN
===================================== */


@media(max-width:767px) {
    .dbc-mobile-wrapper {
        display: block !important;
    }
}

.dbc-custom-dropdown {
    position: relative !important;
    width: 100% !important;
}

.dbc-dropdown-toggle {
    width: 100% !important;
    height: 50px !important;
    padding: 0 16px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Default state: Menu completely hidden */
.dbc-dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    z-index: 99999 !important;
    list-style: none !important;
    /*padding: 0 !important;*/
    margin: 0 !important;
  padding-left: 0;

}

/* Open state: Shows menu right below button */
.dbc-custom-dropdown.open .dbc-dropdown-menu {
    display: block !important;
}

.dbc-dropdown-item {
   width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 18px !important; /* Left & Right spacing here */
    font-size: 14px !important;
    color: #333 !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f2f2f2 !important;
    list-style-type: none !important;
    text-align: left !important;
}

.dbc-dropdown-item:last-child {
    border-bottom: none !important;
}

.dbc-dropdown-item:hover,
.dbc-dropdown-item.active {
    background: #ebf2ff !important;
    color: black !important;
    font-weight: 500 !important;
}
  .dbc-heading h2{
        font-size: 34px;
    }

    .dbc-heading p{
        font-size: 16px;
    }
/*gemini*/

#dbc-mobile-category{
    width:100%;
    height:55px;
    padding:0 18px;
    border:1px solid #e5e5e5;
    border-radius:12px;
    background:#fff;
    font-size:15px;
    font-weight:600;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
}

#dbc-mobile-category:focus{
    border-color:#e61b23;
}


/* =====================================
TABLET
===================================== */

@media(max-width:1024px){

    .dbc-container{
        max-width:calc(100% - 30px);
    }

    .dbc-layout{
        grid-template-columns:220px 1fr;
        gap:25px;
    }

    .dbc-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }

    .dbc-heading h2{
        font-size:34px;
    }

    .dbc-content h3{
        font-size:19px;
    }

}


/* =====================================
MOBILE
===================================== */

@media(max-width:767px){

    .dbc-section{
        padding:10px 0 50px 0;
    }

    .dbc-container{
        max-width:calc(100% - 24px);
    }

    .dbc-heading{
        margin-bottom:25px;
    }

    .dbc-heading h2{
        font-size:28px;
        line-height:1.3;
    }

    .dbc-layout{
        display:block;
    }

    .dbc-sidebar{
        display:none;
    }

    .dbc-mobile-wrapper{
        display:block;
    }

    .dbc-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .dbc-card{
        border-radius:12px;
    }

    .dbc-content{
        padding:18px;
    }

    .dbc-content h3{
        font-size:18px;
    }

}


/* =====================================
SMALL MOBILE
===================================== */

@media(max-width:480px){

    .dbc-heading h2{
        font-size:24px;
    }

    .dbc-content{
        padding:16px;
    }

    .dbc-content h3{
        font-size:17px;
    }

    .dbc-meta{
        font-size:12px;
    }

}







/* Post Card Category */











/**/
/**/





