/* prevent red background on portfolio page */

section.portfolio{
background:#ebebeb;
}
:root{

--accent:#2e6b46;

--card:#ffffff;

--shadow:rgba(0,0,0,0.08);

--hoverShadow:rgba(0,0,0,0.2);

--boxText:#2b2b2b;

--hoverText:#ffffff;

}


body{

background:#ebebeb;
font-family:Arial, Helvetica, sans-serif;
color:#2b2b2b;

}

.portfolio{

max-width:1200px;

margin:10px auto;

padding:0 80px;

text-align:center;

/* center content vertically */

min-height:calc(100vh - 160px);

display:flex;

flex-direction:column;

justify-content:center;

}

.portfolio h1{

font-size:48px;
margin-bottom:20px;

}


.portfolio-text{

color:#555;
margin-bottom:10px;

}



/* BUTTONS */

.portfolio-buttons{

display:flex;
justify-content:center;
gap:20px;
margin-bottom:40px;
margin-top:30px;
}


.portfolio-btn{

background:var(--card);
padding:12px 22px;
border-radius:6px;
text-decoration:none;
color:var(--boxText);

box-shadow:0 6px 20px var(--shadow);

transition:.3s;

cursor:pointer;

}


.portfolio-btn:hover{

background:var(--accent);
color:var(--hoverText);

transform:scale(1.08);

box-shadow:0 30px 60px var(--hoverShadow);

}



/* FLIPBOOK */

.flipbook-wrapper{

width:110%;

height:1050px;

margin-top:80px;

margin-left:-5%;

background:white;

border-radius:12px;

box-shadow:0 30px 90px rgba(0,0,0,0.18);

overflow:hidden;

}

.flipbook-frame{

width:100%;
height:100%;

/* enlarge viewer */
max-width:1400px;

border:none;

}

























































/* MOBILE */

@media(max-width:900px){

.portfolio{

padding:0 40px;
margin: 50px auto;
}

.flipbook-wrapper{

height:200px;

}

.portfolio-buttons{

flex-direction:column;

}

}
/* DISABLE TEXT SELECTION */

.portfolio,
.portfolio *{

user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;

cursor:default;


}
.portfolio{
max-width:1100px;
margin:170px auto 200px auto;
min-height:calc(1vh - 140px);
padding:40px 40px;
text-align:center;
}

body{
display:flex;
flex-direction:column;
min-height:100vh;
}

.portfolio{
flex:1;
}
/* =========================
   MOBILE POPUP
========================= */

#flipbookPopup{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.45);

display:flex;
align-items:center;
justify-content:center;

z-index:9999;

}

/* POPUP CARD */

.popup-box{

background:white;

width:85%;
max-width:340px;

padding:25px;

border-radius:12px;

text-align:center;

box-shadow:0 20px 50px rgba(0,0,0,0.25);

animation:popupFade .35s ease;

}

.popup-box h3{
margin-bottom:12px;
}

.popup-box p{
font-size:14px;
line-height:1.6;
color:#555;
margin-bottom:20px;
}

/* BUTTON */

.popup-box button{

background:#2e6b46;

color:white;

border:none;

padding:10px 22px;

border-radius:6px;

font-size:14px;

cursor:pointer;

transition:.25s;

}

.popup-box button:hover{
transform:scale(1.05);
}

/* ANIMATION */

@keyframes popupFade{

from{
transform:scale(.85);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}

/* HIDE POPUP ON DESKTOP */

@media(min-width:900px){

#flipbookPopup{
display:none;
}

}
#portfolioPopup{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.45);

display:none;

align-items:center;
justify-content:center;

z-index:9999;

}

.popup-box{

background:white;

padding:25px;

border-radius:10px;

max-width:320px;

text-align:center;

box-shadow:0 20px 40px rgba(0,0,0,0.25);

}

.popup-box p{
font-size:14px;
line-height:1.6;
margin-bottom:20px;
}

.popup-box button{

background:#2e6b46;

color:white;

border:none;

padding:10px 20px;

border-radius:6px;

cursor:pointer;

}

@media (max-width:370px){

.portfolio{
padding-left:30px;
padding-right:13px;
}

}