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

    .container{padding: 0 20px;}
    header .navbar .navbar-brand{width: 120px;}
    .banner{padding: 150px 0 40px 0;}
    .banner img{max-width: 90%;margin: auto;display: block;}

    .section-heading h2{font-size: 26px; line-height: 36px; padding-left: 20px;}
    .section-heading h2::before{width: 6px; height: 72px; left: 0; top: 5px;}

    .section-heading-2 {width: 340px; height: 80px;max-width: 96%;height: 110px;}
    .section-heading-2 h2{font-size: 24px;text-align: center;}

    .description {font-size: 18px;}
    .banner .banner-info h1{line-height: 1.3;font-size: 36px;}
    .bg-image{padding: 30px 0 30px 0;}

    .book-photo img{max-width: 80%;margin: auto;display: block;}
    .book-buynow-section h2{font-size: 32px;}
    .book-buynow-section p{font-size: 18px;}

    .epic-section{padding: 30px 0 30px 0;}

    .victory{margin-top: 0px; padding: 0 0 10px 0;}
    .victory .victory-description {padding: 40px 0 0 0px;}
    .victory .section-heading h2::before{height: 32px; top: 4px;}

    .character {padding: 30px 0 30px 0;}
    .character .character-listing{grid-template-columns: repeat(1,1fr);}
    .character .character-listing .character-item .character-img img{height: auto;}
    .character .character-listing .character-item .character-name-wrap{width: 100%; padding: 50px 28px 32px 28px;opacity: 1;visibility: visible;background-size: cover;}
    .character .character-listing .character-item .character-name-wrap span{font-size: 15px;padding: 8px 20px 10px 20px;}
    .character .character-listing .character-item .character-name-wrap p {font-size: 20px;}

    .character .character-listing .character-item{width: 96%;max-width: 300px;margin: auto;}
    .character .character-detail-wrap .character-detail-item .avtar{width: 103%;}
    .character .character-detail-wrap .character-detail-item::before{display: none;}
    .character .character-detail-wrap .character-detail-item .character-detail{border: 1px solid rgba(200, 200, 200, 0.3);border-radius: 8px;background: rgba(255, 255, 255, 0.06);backdrop-filter: blur(30px);}

    .character .character-detail-wrap .character-detail-item{display: block; margin-top: 40px;}
    .character .character-detail-wrap .character-detail-item .avtar img{width:100%;width: calc(100% + 10px);margin-left: -5px;}
    .character .character-detail-wrap .character-detail-item .character-detail{position: static; padding: 54px 16px 2px 18px; margin-top: -40px;}
    .character .character-detail-wrap .character-detail-item .character-detail .name-role{display: block;}
    .character .character-detail-wrap .character-detail-item .character-detail .name-role h3{font-size:22px;  margin-bottom: 12px;}
    .character .character-detail-wrap .character-detail-item .character-detail .name-role span{    font-size: 14px; padding: 4px 16px 6px 16px;}

    .discover {padding: 30px 0 30px 0;}
    .discover .discover-img {margin-top: 18px;}
    .discover .discover-img img{width: 100%;}
    .photo-gallery .section-heading-2{height: 80px;}

    .photo-gallery {padding: 30px 0 30px 0;}
    .gallery-tabs{gap: 8px;}
    .gallery-tabs .tab-content{margin-top: 0px;}
    .gallery-tabs .nav-pills .nav-item .nav-link{font-size: 18px; padding: 6px 28px; margin: 0 6px 12px 6px;}
    .gallery-tabs .tab-pane .gallery-row{flex-wrap: wrap;}

    .gallery-img{width: 110px;}

    .author-info{flex-wrap: wrap;gap: 20px;}
    .author-info img{width: 100px;height: 100px;}
}