/* PAGE BACKGROUND FIX */

.investment-categories-page{
background:#0f2c38;
color:white;
}

/* ================= HERO ================= */

.contact-hero {
    height: 45vh;
    background: linear-gradient(
        rgba(10,30,39,0.85),
        rgba(10,30,39,0.85)
    ),
    url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c')
    center/cover no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-overlay h1 {
    font-family: 'Avenir', sans-serif;
    font-size: 48px;
    color: var(--gold);
    letter-spacing: 1px;
}

.hero-overlay p {
    margin-top: 15px;
    font-size: 16px;
    opacity: 0.9;
}

.breadcrumb a{
color:var(--gold);
font-weight:500;
text-decoration:none;
}

.breadcrumb span{
color:white;
opacity:0.7;
}

.breadcrumb .current{
color:white;
}

/* SECTION */

.portfolio-registry{
padding:90px 0;
background:#0f2c38;
}


/* TITLE */

.section-title{

text-align:center;

color:var(--gold);

margin-bottom:40px;

font-size:28px;

}


/* TABLE */

.registry-table{

background:rgba(15,44,56,0.75);

border:1px solid rgba(225,200,133,0.15);

border-radius:12px;

overflow:hidden;

backdrop-filter:blur(10px);

}

/* HEADER */

.registry-header{

display:grid;

grid-template-columns:80px 2fr 1fr 1fr;

padding:20px 30px;

background:rgba(225,200,133,0.10);

color:var(--gold);

font-weight:600;

position:sticky;
top:0;
z-index:5;

}


/* ROW */

.registry-row{

display:grid;

grid-template-columns:80px 2fr 1fr 1fr;

align-items:center;

padding:22px 30px;

border-top:1px solid rgba(255,255,255,0.06);

background:rgba(255,255,255,0.02);

transition:.25s;

}

.registry-row:hover{
background:rgba(225,200,133,0.05);
}


/* COMPANY */

.company{

display:flex;

align-items:center;

gap:15px;

}

.company img{

width:85px;
height:65px;

object-fit:contain;

background:white;

padding:6px;

border-radius:10px;

box-shadow:0 4px 12px rgba(0,0,0,0.35);

}

/* TAGS */
.type{

display:inline-block;

padding:6px 14px;

border-radius:18px;

font-size:13px;

white-space:nowrap;

width:auto;

}

.registry-row .type{

justify-self:start;

}

.type.traded{

background:rgba(0,200,120,0.15);
color:#25d98b;

}

.type.portfolio{

background:rgba(225,200,133,0.18);
color:#e1c885;

}

.type.interest{

background:rgba(0,140,255,0.15);
color:#5fb4ff;

}
/* RESPONSIVE */

@media(max-width:900px){

.registry-header{

display:none;

}

.registry-row{

grid-template-columns:1fr;

gap:10px;

}

.company{

margin-top:5px;

}

}

.portfolio-controls{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

gap:20px;

flex-wrap:wrap;

}

#portfolioSearch{

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.1);

padding:12px 18px;

border-radius:25px;

color:white;

outline:none;

width:260px;

}

#portfolioSearch::placeholder{
color:rgba(255,255,255,0.6);
}


.portfolio-filters button{

background:rgba(255,255,255,0.05);

border:none;

color:white;

padding:10px 20px;

border-radius:25px;

cursor:pointer;

transition:.3s;

}

.portfolio-filters button:hover{

background:rgba(225,200,133,0.2);

}

.portfolio-filters button.active{

background:var(--gold);

color:#0f2c38;

}


.registry-row{

opacity:0;

transform:translateY(20px);

animation:rowFade .6s forwards;

}

@keyframes rowFade{

to{

opacity:1;
transform:translateY(0);

}

}


@media(max-width:900px){

.registry-row{

grid-template-columns:1fr;

gap:12px;

padding:25px;

}

.registry-header{
display:none;
}

.company{
margin-top:5px;
}

}



/*CTA*/
.portfolio-cta{

padding:50px 0;

text-align:center;

}

.portfolio-cta h2{

color:var(--gold);

margin-bottom:15px;

}

.portfolio-cta p{

opacity:.85;

margin-bottom:30px;

max-width:600px;

margin-left:auto;
margin-right:auto;

}

.cta-btn{

background:var(--gold);

color:#0f2c38;

padding:14px 34px;

border-radius:30px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.cta-btn:hover{

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(0,0,0,.3);

}


.portfolio-controls{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:40px;

}

.portfolio-controls select{

background:rgba(15,43,56,0.95);

border:1px solid rgba(225,200,133,0.2);

color:white;

padding:10px 18px;

border-radius:25px;

outline:none;

cursor:pointer;

appearance:none;

-webkit-appearance:none;

-moz-appearance:none;

backdrop-filter:blur(8px);

}

/* dropdown menu */

.portfolio-controls select option{

background:#0f2c38;

color:white;

}

.portfolio-controls select{

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23e1c885' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 14px center;

background-size:10px;

padding-right:35px;

}

.registry-row{

transition:all .35s ease;

}

.registry-row:hover{

background:rgba(255,255,255,0.04);

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,0.35);

}

.company img{

transition:transform .3s ease;

}

.registry-row:hover .company img{

transform:scale(1.1);

}