html,body{height:100%;margin:0}

body{
background:url('images/bg.jpg') repeat;
font-family:'Cormorant Garamond','Lora',serif;
font-size:16px;line-height:1.9;font-weight:400!important;
color:#4f5f49;text-align:center;overflow-x:hidden;letter-spacing:.3px;
}

#header{
background:url('images/head.jpg') no-repeat left top,url('images/bg1.jpg') repeat-x;
height:654px;margin-top:-5px;position:relative;
}

.content{
width:67%;margin:-70px 0 50px 40px;padding:38px;
text-align:justify;font-size:19px;line-height:2;color:#55644f;
background:rgba(255,252,245,.58);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,245,215,.8);
border-left:4px solid rgba(214,188,120,.75);
border-radius:26px;
box-shadow:0 10px 40px rgba(160,180,150,.12),0 0 40px rgba(255,240,210,.18),inset 0 0 1px rgba(255,255,255,.8);
position:relative;overflow:hidden;
}

.content::before{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 40%),
radial-gradient(circle at top right,rgba(223,235,210,.35),transparent 35%);
pointer-events:none;
}

.content a{
color:#9b7d38;text-decoration:none;position:relative;
transition:.3s;
}

.content a::after{
content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
background:linear-gradient(90deg,transparent,rgba(212,184,110,.9),transparent);
opacity:.5;transition:.3s;
}

.content a:hover{color:#c6a452;text-shadow:0 0 10px rgba(255,220,150,.35)}
.content a:hover::after{opacity:1;height:2px}

.content b,.content strong{color:#6a7a5d;font-weight:600;letter-spacing:.5px}
.content i,.content em{color:#7f9277;font-style:italic;opacity:.95}

h1{
margin:70px 0 35px 40px;padding:24px 42px;
font-size:36px;letter-spacing:8px;text-transform:uppercase;
color:#75856a;
background:linear-gradient(135deg,rgba(255,252,245,.72),rgba(241,247,235,.45));
backdrop-filter:blur(12px);
border:1px solid rgba(255,245,220,.8);
border-left:5px solid rgba(214,188,120,.65);
border-radius:24px;
box-shadow:0 8px 35px rgba(180,190,170,.12),inset 0 0 30px rgba(255,255,255,.35);
position:relative;
}

h1::after{
content:"";position:absolute;left:32px;bottom:12px;width:70%;height:1px;
background:linear-gradient(90deg,transparent,rgba(215,190,120,.9),transparent);
}

.contentx{
margin:0 0 50px 40px;padding:42px;
font-size:18px;text-align:justify;color:#5f6c57;
background:rgba(255,250,242,.62);
backdrop-filter:blur(14px);
border:1px solid rgba(255,245,220,.75);
border-radius:22px;opacity:0.7;
box-shadow:0 10px 35px rgba(180,190,170,.12);
}

.contentx input,.contentx textarea,.contentx select{
width:40%;max-width:360px;
padding:14px;margin:12px 0;
background:rgba(255,255,250,.7);
color:#5a6754;
border:1px solid rgba(214,188,120,.28);
border-radius:14px;
font-family:inherit;
transition:.3s;
}

.contentx input:focus,.contentx textarea:focus,.contentx select:focus{
outline:none;
border-color:rgba(214,188,120,.5);
box-shadow:0 0 18px rgba(255,225,170,.18);
}

.contentx button{
padding:12px 28px;
background:linear-gradient(135deg,#eef4e6,#e0ead6);
color:#7b886e;
border:1px solid rgba(214,188,120,.28);
border-radius:999px;
font-family:inherit;letter-spacing:1px;
cursor:pointer;
transition:.3s;
}

.contentx button:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(210,190,140,.16);
}

blockquote{
margin:50px 0 50px 40px;padding:44px 54px;
width:70%;max-width:760px;
background:rgba(255,252,246,.58);
backdrop-filter:blur(16px);
color:#607058;
border:1px solid rgba(255,245,220,.8);
border-left:4px solid rgba(214,188,120,.6);
border-radius:24px;
font-style:italic;text-align:left;
box-shadow:0 10px 35px rgba(180,190,170,.1);
position:relative;
}

blockquote::before,blockquote::after{
content:"❦";position:absolute;font-size:30px;color:rgba(214,188,120,.35);
}

blockquote::before{top:-14px;left:20px}
blockquote::after{bottom:-14px;right:20px}

#side-nav{
position:fixed;top:270px;right:50px;
z-index:9999;
display:flex;flex-direction:column;align-items:center;
}

.nav-toggle{
width:150px;height:150px;border:none;border-radius:50%;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:radial-gradient(circle at top,rgba(255,255,255,.96),rgba(238,245,231,.94) 45%,rgba(215,228,205,.92));
box-shadow:0 0 35px rgba(255,230,180,.25),0 10px 25px rgba(120,140,110,.12),inset 0 0 25px rgba(255,255,255,.7);
transition:.3s;
}

.nav-toggle:hover{transform:scale(1.05)}

.nav-toggle span{font-size:32px;color:#7f8d74}

.nav-links{
margin-top:18px;width:240px;
display:flex;flex-direction:column;gap:8px;
padding:14px;
border-radius:26px;
background:rgba(255,252,246,.84);
backdrop-filter:blur(18px);
border:1px solid rgba(255,245,220,.9);
box-shadow:0 15px 45px rgba(140,160,130,.16),0 0 40px rgba(255,235,190,.16);
opacity:0;visibility:hidden;pointer-events:none;
transform:translateY(-10px) scale(.96);
transition:.28s;
}

.nav-links.active{
opacity:1;visibility:visible;pointer-events:auto;
transform:translateY(0) scale(1);
}

.nav-links a{
padding:15px 18px;
text-decoration:none;
color:#73836a;
font-size:17px;font-weight:500;
border-radius:16px;
transition:.25s;
}

.nav-links a:hover{
background:rgba(255,240,205,.38);
color:#aa8a46;
transform:translateX(-2px);
}

#footer{
background:linear-gradient(to top,#dce6d6,#edf3e8);
color:#7a8870;
padding:80px 30px;margin-top:100px;
border-top:1px solid rgba(214,188,120,.18);
}

#footer a{color:#a98943}

.footer-credit{
margin-top:12px;font-size:13px;letter-spacing:1px;opacity:.7;
}