/*Single Page*/
.single-page { background-color: var(--white); color: var(--black); }
.single-page .content { max-width: 710px; position: relative; }
.single-page .hero-single { min-height: 370px; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; margin-bottom: 100px; background-image: url("../img//overview/overview-hero.png"); background-repeat: no-repeat; background-size: cover; background-position: top; }
.single-page .hero-single .content { padding-top: 100px; }
.single-page .hero-single .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
.single-page .hero-single .img::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0000006e; }
.single-page .hero-single h1 { color: var(--white); font-size: 38px; font-weight: 600; padding-bottom: 15px; position: relative; z-index: 2; }
.single-page .hero-single .date { color: var(--white); font-size: 16px; font-family: "Inter", sans-serif; position: relative; z-index: 2; padding-bottom: 40px; }

.single-page .generic-page { padding: 0 40px 100px; }
.single-page .generic-page .btn-back { position: absolute; top: 20px; left: -175px; display: flex; align-items: center; color: var(--primary-blue); font-size: 16px; font-weight: 500; text-decoration: unset; transition: all 0.3s; }
.single-page .generic-page .btn-back:hover { text-decoration: none; color: var(--blue); }
.single-page .generic-page .btn-back i { text-decoration: none; font-size: 13px; margin-right: 8px; transition: all 0.1s; }
.single-page .generic-page .btn-back:hover i { transform: translateX(-3px); }

.single-page ::-webkit-scrollbar { width: 8px; height: 8px; }
.single-page ::-webkit-scrollbar-thumb { background-color: #CCC; }

/*Responsive*/
@media screen and (max-width: 1280px){
    
    /*Single Post*/
    .single-page .generic-page .btn-back { left: -140px; font-size: 15px; }

}

@media screen and (max-width: 1024px){

    /*Single Post*/
    .single-page .generic-page .btn-back { top: -60px; left: 0; }
    .single-page .generic-page { padding: 0 20px 100px; }

}

@media screen and (max-width: 768px){

    /*Single Post*/
    .single-page .hero-single { min-height: 280px; padding: 0 20px; }
    .single-page .hero-single h1 { font-size: 26px; }
    .single-page .hero-single .date { font-size: 12px; }

}