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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Montserrat',sans-serif;
    background:#faf7f3;
    color:#4d372d;
    overflow-x:hidden;
    animation:fadeIn 1s ease;
}

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

/* HERO */

.hero{

    position:relative;

    width:100%;

    overflow:hidden;

}

.hero img{

    display:block;

    width:100%;

    height:auto;

}

.streaming{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

    z-index:100;

}

.streaming h2{

    color:#ffffff;

    font-size:22px;

    letter-spacing:4px;

    margin-bottom:22px;

    text-shadow:0 2px 10px rgba(0,0,0,.8);

}

.streaming-links{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.streaming-links a{

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

    text-decoration:none;

    padding:14px 24px;

    border-radius:999px;

    background:rgba(179,111,77,.82);

    backdrop-filter:blur(12px);

    transition:.3s;

}

.streaming-links a:hover{

    background:#8f6144;

    transform:translateY(-2px);

}

/* CONTENT */

.infos{
    max-width:1400px;
    margin:70px auto;
    padding:0 40px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.box{
    text-align:center;
    padding:0 25px;
}

.box:not(:last-child){
    border-right:1px solid #dfcdbd;
}

.box>i{
    font-size:34px;
    color:#a66f4d;
    margin-bottom:18px;
}

.box h3{
    font-family:"Cormorant Garamond",serif;
    font-size:34px;
    font-weight:500;
    color:#704c39;
}

.divider{
    width:120px;
    height:1px;
    background:#d8b9a1;
    margin:20px auto 30px;
    position:relative;
}

.divider::after{
    content:"♡";
    position:absolute;
    left:50%;
    top:-12px;
    transform:translateX(-50%);
    background:#faf7f3;
    color:#b37d5c;
    padding:0 8px;
}

.box img{
    width:240px;
    border-radius:6px;
    margin-bottom:22px;
}

.box p{
    line-height:1.9;
    margin-bottom:28px;
}

.box ul{
    list-style:none;
}

.box li{
    margin:18px 0;
}

.box li a{
    color:#704c39;
    text-decoration:none;
    transition:.3s;
}

.box li a:hover{
    color:#b37d5c;
}

.box li i{
    width:28px;
}

.box>a{
    display:inline-block;
    padding:14px 34px;
    background:#b37d5c;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    transition:.3s;
}

.box>a:hover{
    background:#8f6144;
}

/* FOOTER */

footer{
    text-align:center;
    padding:40px 20px;
    color:#6c564b;
}

footer a{
    color:#6c564b;
    text-decoration:none;
}

footer a:hover{
    color:#b37d5c;
}

footer span{
    margin:0 12px;
    color:#ccb5a3;
}

/* RESPONSIVE */

@media (max-width:1100px){

.hero{
    height:400px;
}

.infos{
    grid-template-columns:repeat(2,1fr);
}

.box{
    border:none !important;
}

}

@media (max-width:700px){

.hero{
    height:250px;
}

.hero-overlay{
    justify-content:center;
    padding:20px;
}

.streaming{
    justify-content:center;
}

.streaming h2{
    text-align:center;
}

.infos{
    grid-template-columns:1fr;
    padding:0 20px;
}

.box img{
    width:210px;
}

}