*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins',sans-serif;
    background:#0f0f0f;
    color:white;

}

.history{

    padding:80px 8%;

}

.container{

    max-width:1100px;
    margin:auto;
    text-align:center;

}

h1{

    font-size:58px;
    color:#d4af37;
    margin-bottom:20px;

}

.subtitle{

    font-size:22px;
    color:#cccccc;
    margin-bottom:50px;

}
/* .history-img{
    width:100%;
    max-width:700px;
    border-radius:20px;
    border:3px solid #d4af37;
    box-shadow:0 10px 25px rgba(0,0,0,.4);
} */
.history-image{

    margin-bottom:50px;

}

.image-placeholder{

    width:100%;
    max-width:700px;
    height:400px;

    margin:auto;

    background:#2d2d2d;

    border:3px dashed #d4af37;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#d4af37;

    font-size:28px;

    font-weight:600;

}

.history-content{

    background:#1c1c1c;

    border:2px solid #d4af37;

    border-radius:20px;

    padding:50px;

    text-align:left;

    box-shadow:0 10px 30px rgba(0,0,0,.4);

}

.history-content h2{

    color:#d4af37;

    margin-top:30px;

    margin-bottom:15px;

    font-size:30px;

}

.history-content h2:first-child{

    margin-top:0;

}

.history-content p{

    color:#dddddd;

    font-size:18px;

    line-height:1.9;

}

.back-btn{

    display:inline-block;

    margin-top:50px;

    padding:15px 40px;

    background:#d4af37;

    color:#111;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    border-radius:40px;

    transition:.3s;

}

.back-btn:hover{

    background:#f5c542;

    transform:translateY(-5px);

}

footer{

    background:#181818;

    padding:40px;

    text-align:center;

    margin-top:80px;

    border-top:2px solid #d4af37;

}

footer h3{

    color:#d4af37;

    margin-bottom:10px;

    font-size:30px;

}

footer p{

    color:#cccccc;

    font-size:18px;

}

/* Responsive */

@media(max-width:768px){

    h1{

        font-size:40px;

    }

    .subtitle{

        font-size:18px;

    }

    .history-content{

        padding:30px;

    }

    .history-content h2{

        font-size:24px;

    }

    .history-content p{

        font-size:16px;

    }

    .image-placeholder{

        height:250px;

        font-size:22px;

    }

}

@media(max-width:420px){

    .history{
        padding:60px 5%;
    }

    h1{
        font-size:30px;
    }

    .history-content{
        padding:20px;
    }

    .history-content h2{
        font-size:20px;
    }

    .back-btn{
        padding:14px 30px;
        font-size:16px;
    }

}