header{
    display: flex;
    flex-direction: column;
    align-items: center;
    position:absolute;
    top:0;
    padding:10px;
    width:100%;
    z-index:100;
}
header #logo{
    height:50px;
    margin-bottom:15px;
}
header .nav{
    display:flex;
    justify-content: space-between;
    width:100%;
}
header .header_link{
    padding:0 2vw;
    color:#fff;
    text-decoration: none;
}

#fcp_container{
    height:100vh;
    text-align:center;
    display:flex;
    justify-content: center;
    align-items: center;
    background-image: url('./../assets/images/hijabi.png');
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
}

#fcp_container *{
    position:relative;
    z-index:2;
}

.btn{
    display:inline-block;
    padding:7px 20px;
    background:#fff;
    border-radius:5px;
    margin-top:5vh;
    text-decoration: none;
    color:#000;
}
.btn:hover{
    transform:scale(1.2);
}

h1{
    font-size:55px;
    color:#fff;
}
h1 + div{
    font-size:25px;
    color:#fff;
}
/* h1 + div:before{
    content:url('./../assets/images/line.png');
    width:50px;
    height:20px;
    object-fit: contain;
    position:absolute;
    right:-10px;
    bottom:-3px;
} */

.overlay{
    height:100%;
    background: linear-gradient(#000,transparent);
    position:absolute !important;
    width:100%;
    z-index:1;
}


#recent-articles{
    padding:30px 15px;
    max-width:900px;
    margin:auto;
}

.header-img_container{
    width:100px;
}
.header-img_container img{
    height:25px;
    cursor:pointer;
    
}
.header-img_container img:hover{
    height:25px;
    transform:scale(1.2);
}
.header-img_container.right{
    text-align:right;
}
.header-img_container.right img{
    margin-left:10px;
}

#recent-articles{
    max-width:unset;
}
#recent-articles h2{
    max-width: 900px;
    margin:auto;
}
.recent-articles_container{
    display:grid;
    grid-template-columns:19.5% 19.5% 19.5% 19.5% 19.5%;
}
.recent-articles_container .col{
    margin:0 1%;
}
.recent-articles_container img{
    width:100%;
    margin:10px 0.25%;
    border-radius:10px;
    /* transform: translateY(attr(data-total)"%"); */
    /* top: calc( attr(data-total %) * -1); */
}

.small-prices_container{
    display:inline-block;
    position:relative;
}

.line{
    z-index:1;
    width:150px;
    height:20px;
    object-fit: contain;
    right:-40px;
    bottom:-10px;
    position:absolute !important;
}

.to_recent_articles{
    text-align:center;
    position:absolute !important;
    bottom:3vh;
}
.to_recent_articles > div{
    display:inline-block;
}
.to_recent_articles > div > div{
    display:grid;
    grid-template-columns: 100%;
}
.to_recent_articles > div > div span{
    color:#fff;
}
.to_recent_articles > div > div img{
    width:100%;
    height:20px;
    object-fit: contain;
    object-position: center;
    padding-top:5px;
}

@media screen and (max-width:700px){
    h1{
        font-size:30px;
    }
    h1 + div{
        font-size:18px;
    }

    .recent-articles_container{
        grid-template-columns:49.5% 49.5%;
    }
    #col2,#col3,#col4{
        display:none;
    }
    .overlay + div{
        padding:15px;
    }
    .line{
        width:80px;
        right:-20px;
    }
}

@media screen and (min-width:700px) and (max-width:1200px){
    .recent-articles_container{
        grid-template-columns:24.5% 24.5% 24.5% 24.5%;
    }
    #col4{
        display:none;
    }
}