.hed{
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: transparent;
  background: linear-gradient(to right, red, rgb(71, 6, 6),cyan);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 2rem;

}

.banner{
    top: 1.5%;
    font-size: 15px;
    width: 100%;
    height: 10vh;
    text-align: center;
    color:rgb(38, 231, 151);
    z-index: 3;
     background: url('images/IMG_20231210_143507.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    position: relative;
     width: 100%;
    height: 125vh;
    text-align: center;
    overflow: hidden;
    position: relative;
    }
.banner .slider{
    position: absolute;
    width: 350px;px;
    height:330px;
    top: 20%;
    left: calc(50% - 125px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: autoRun 50s linear infinite;
    z-index: 2
} 
.photo-detail {
    width:340px;
    height: 55px;
    color: #ffffff; 
    font-size: 13px; 
    font-family: 'franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-align: center; 
    background: linear-gradient(135deg, #ff6b6b, #00bfa6);
    padding: 6px; 
    border-radius: 6px; 
    margin-top: 2.5px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
} 
@keyframes autoRun{
    from{
        transform: perspective(5000px) rotateX(-1deg) rotateY(0deg);
    }to{
        transform: perspective(5000px) rotateX(-1deg) rotateY(360deg);
    }
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(850px);
}  
.banner .slider .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}  
.banner .content{
    width: 75%;
    font-size: 2px ;
    position: absolute;
    top: 85%;
    left:29%;
    transform: translate(-20%, -20%);
    z-index: 3;
    text-align: center;
    color: #d76a6a9d;
    text-shadow: 0 10px 20px #96dcff;
}
.banner .content h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 44px;
    line-height: 59.1px;
    word-spacing: 4px;
    color: #000000;
    position: relative;
}

.banner .content .author{
    font-family: Poppins;
    text-align: right;
    max-width: 2px;
}

@media screen and (max-width: 1023px) {
    .banner .slider{
        width: 160px;
        height: 220px;
        left: calc(50% - 80px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(300px);
    }
}

.site-header, .site-footer { background:#222; color:#fff; padding:2rem 0; }

.container { max-width:1100px; margin:0 auto; padding:0 1rem; display:flex; align-items:center; justify-content:space-between; }
.site-header .logo { font-weight:700; text-decoration:none; color:#fff; }
.main-nav a { color:#ddd; margin-left:1rem; text-decoration:none; }
.nav-toggle { display:none; background:none; border:0; color:#fff; font-size:1.25rem; }
@media (max-width:700px){
  .main-nav { display:none; }
  .nav-toggle { display:block; }
  .main-nav.open { display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem; }
}
.site-footer p {  margin:0; font-size:1rem; opacity:.95; }
/* Wider footer container so footer content stretches more on large screens */
.site-footer .container { max-width:2200px; padding-left:3rem; padding-right:3rem; }
/* Make footer area slightly taller for prominence */
.site-footer { padding-top:2rem; padding-bottom:2rem; }
@media (max-width:700px){ .site-footer .container { padding-left:1rem; padding-right:1rem; } }