.portal-facebook{

padding:80px 20px;

background:linear-gradient(180deg,#030303,#0b0b0b);

position:relative;

overflow:hidden;

width:100%;

}

.portal-facebook {

box-sizing:border-box;

}

.portal-title{

text-align:center;

margin:0 auto 50px;

max-width:900px;

padding:0 15px;

}

.portal-title h2{

color:#d4b06a;

font-size:40px;

font-weight:700;

margin:18px 0;

letter-spacing:2px;

text-shadow:0 0 18px rgba(212,176,106,.25);

}

.portal-title p{

color:#bfbfbf;

font-size:17px;

margin:0;

}

.gold-line{

width:120px;

height:2px;

margin:0 auto;

background:linear-gradient(90deg,transparent,#d4b06a,transparent);

}

.portal-grid{

display:grid;

grid-template-columns:repeat(4,minmax(0,1fr));

gap:16px;

width:100%;

max-width:1800px;

margin:0 auto;

}

.portal-card{

position:relative;

width:100%;

overflow:hidden;

border-radius:16px;

background:#0b0b0b;

border:1px solid rgba(212,176,106,.12);

transition:.35s;

}

.portal-card-top{

height:3px;

background:linear-gradient(90deg,#0f5faa,#d4b06a,#0f5faa);

}

.portal-card:hover{

transform:translateY(-8px);

border-color:#d4b06a;

box-shadow:

0 0 25px rgba(212,176,106,.25),

0 0 45px rgba(15,95,170,.15);

}

.fb-wrap{

width:100%;

overflow:hidden;

border-radius:0 0 16px 16px;

background:#fff;

}

.portal-card iframe{

display:block;

width:100% !important;

max-width:100% !important;

height:620px !important;

border:0;

background:#fff;

}

.portal-overlay{

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:flex-end;

padding:18px;

background:none;

opacity:1;

pointer-events:none;

}


.portal-button{

padding:10px 18px;

border-radius:30px;

background:linear-gradient(135deg,#0f5faa,#d4b06a);

color:#fff;

font-weight:600;

font-size:13px;

box-shadow:0 0 18px rgba(212,176,106,.4);

}

@media(max-width:1200px){

.portal-grid{

grid-template-columns:repeat(2,minmax(0,1fr));

gap:20px;

}

.portal-title h2{

font-size:32px;

}

.portal-card iframe{

height:620px !important;

}

}

@media(max-width:768px){

.portal-facebook{

padding:60px 15px;

}

.portal-title{

margin-bottom:35px;

}

.portal-title h2{

font-size:28px;

}

.portal-title p{

font-size:15px;

}

.portal-grid{

grid-template-columns:1fr;

gap:20px;

}

.portal-card{

max-width:100%;

}

}