:root {
    --def-color: #e3272b;
    --def-color-success: #4caf50;
    --def-color-hover: #be1f22;
    --section-card-bg: #eeeeef;
}

@font-face {
    font-family: roboto; font-weight: 100; font-style: normal; src: url(../fonts/Akhand\ W03\ Light.ttf) format(truetype),
}
@font-face {
    font-family: roboto; font-weight: 200; font-style: normal; src: url(../fonts/Akhand\ W03\ Semilight.ttf) format(truetype),
}
@font-face {
    font-family: roboto; font-weight: 400; font-style: normal; src: url(../fonts/Akhand\ W03\ Regular.ttf) format(truetype)
}
@font-face {
    font-family: roboto; font-weight: 500; font-style: normal; src: url(../fonts/Akhand\ W03\ Semibold.ttf) format(truetype)
}
@font-face {
    font-family: roboto; font-weight: 600; font-style: normal; src: url(../fonts/Akhand\ W03\ Bold.ttf) format(truetype)
}
@font-face {
    font-family: roboto; font-weight: 700; font-style: normal; src: url(../fonts/Akhand\ W03\ Extrabold.ttf) format(truetype)
}
@font-face {
    font-family: li;
    src: url(../fonts/Li\ Helal\ Gagan\ Unicode.ttf)
}

/* *********************
        Header
************************ */

.header { margin: 20px auto; /* width: 70%; min-height: 100px; */ }

/* ********************* Header left ************************ */

.left-header { position: relative; display: inline-block; }
.logo-container { position: relative; display: inline-block; height: 100%; }
.logo-container .logo { position: relative; display: inline-block; height: 90px; }

.social-links-container { position: relative; display: inline-block; vertical-align: bottom; }
.social-links-container ul.social-links {
    position: relative; display: block; padding: 0; margin: 0;
}
.social-links-container ul.social-links li { list-style: none; display: inline-block; }
.social-links-container ul.social-links li a {
    text-decoration: none; width: 25px; height: 25px; position: relative; display: flex; text-align: center;
    border-radius: 50%; background-color: #3a3b3a; color: #fff; font-size: 12px; justify-content: center;
    align-items: center;
}
.social-links-container ul.social-links li a.facebook-icon-link {
    top: 2.5px;
}
.social-links-container ul.social-links li a .fa-facebook.facebook-icon {
    bottom: -5px; position: relative; display: inline-block; font-size: 20px;
}

/* ********************* Header Right ************************ */

/* .right-header { min-height: 100px; } */
.right-header .navigation { padding: 0; margin: 0; text-align: center; }
.right-header .navigation li { list-style: none; display: inline-block; }
.right-header .navigation li a { text-decoration: none; margin: 3px 3px; }

/* ***********************************
        /End Header
        Top Section
************************************** */

.main-container { position: relative; display: block; width: 100%; }
.my-detail-container { font-size: 43px; }
.my-detail-container>div:nth-child(-n + 3) { line-height: 45px; }

.my-detail-container .i-am { font-weight: 100; }
.my-detail-container .i-am-porag-wahid { color: var(--def-color); font-weight: 700; font-size: 60px; }
.my-detail-container .i-am-author { font-weight: 100; font-size: 34px; }
.my-detail-container .i-am-photo { margin: 20px 0; }
.my-detail-container .i-am-photo img { width: 430px; }

/* ***********************************
        /End Top Section
        My Book
************************************** */

.my-books-container { display: flex; }
.my-books-container .col { width: 100%; }
.my-books-container .my-books { text-align: right; }
.my-books-container .my-books .my-book-img { position: relative; display: inline-block; width: 120px; height: 220px;
    overflow: hidden; margin-top: 70px; 
}
.my-books-container .my-books .my-book-img img { width: 100%; }
.my-books-container .my-books-see-more { width: 50%; }

.my-books-container .my-books .book-left-boll,
.my-books-container .my-books .book-right-boll { position: relative; display: inline-block; width: 250px; text-align: center; }

.my-books-container .my-books .book-left-boll::before { left: 0; }
.my-books-container .my-books .book-right-boll::before { right: 0; }

.my-books-container .my-books .book-left-boll::before,
.my-books-container .my-books .book-right-boll::before {
    content: ""; height: 135px; width: 135px; background-color: var(--def-color); position: absolute; border-radius: 100%;
}
.my-books-container .my-books-see-more-btn { top: 50%; }

.my-books-description>div { line-height: 20px; }
.my-books-description .my-books-genre { font-size: 22px; font-weight: 700 }
.my-books-description .my-books-published { color: var(--def-color); font-size: 22px; font-weight: 700 }
.my-books-description .my-books-publication { font-weight: 100; }

/* ***********************************
        /End My Book
        Individual Covers
************************************** */

.covers-container .cover-items .cover-title { padding-top: 50px; text-align: center; text-transform: uppercase; }
.covers-container .cover-items .big-covers img,
.covers-container .cover-items .small-covers img { width: 100%; }
.covers-container .cover-items .youtube-profile { display: inline-block; width: 40px; vertical-align: middle; }
.covers-container .cover-items .youtube-profile img { width: 100%; }

/* ***********************************
        /End Individual Covers
        Working Procedure
************************************** */

.working-procedure { width: 100%; }
.working-procedure .procedure-container { padding-bottom: 10px; }
.working-procedure .procedure-container img { width: 100%; }

/* ***********************************
        /End Working Procedure
        Contacts
************************************** */

.face-sticker-container { margin-top: 250px; padding-top: 130px; }
.face-sticker-container .face-sticker {
    position: absolute; width: 210px; top: -200px; transform: rotateZ(-7deg);
    left: calc(50% - 105px);
}

.contact-container { text-align: center; width: 50%; padding: 40px; margin: auto; }
.contact-container .input-container { background-color: #fff; display: flex; border-radius: 10px; margin-bottom: 10px; }
.contact-container .input-container label { font-weight: 700; padding: 5px 10px; }
.contact-container .input-container *:focus { outline: none; }

.contact-container .input-container input, .contact-container .input-container select,
.contact-container .input-container textarea { border: none; width: 100%; padding: 5px; border-radius: 10px; }


/* ********************* Footer ************************ */

footer { background-color: #eeeeef; padding: 5px; font-size: 12px; }

/* ********************* Go To Top ************************ */

.go-to-top {
    position: fixed; height: 40px; width: 40px; background-color: var(--def-color); bottom: 0%; right: 0%;
    border-radius: 50%; box-shadow: 0 0 10px #999; border: solid 1px var(--def-color-hover); color: #fff; display: flex;
    justify-content: center; align-items: center; margin: 25px;
}
.go-to-top svg { width: 18px; }
.go-to-top:hover { background-color: #fff; color: var(--def-color);
    transition-duration: 0.3s; cursor: pointer;
}

.youtube-btn { width: 100px; }

/* ********************* Timer ************************ */

.timer-container { position: relative; display: block; text-align: center; }
.timer-container .timer-loader { position: absolute; width: 80px; transform: translate(-40px, 0); }
.timer-container .timer-counter { position: absolute; width: 80px; height: 80px; transform: translate(52.5px, 0);
    display: flex; justify-content: center; align-items: center; font-size: 15px; opacity: 0;
    animation: counter ease-in 1s infinite;
}

@keyframes counter {
    50% { font-size: 20px; opacity: 1; }
    100% { font-size: 15px; opacity: 0; }
}