/* Design: html-design/magazine-details.html */
/* =========================================================
           MAGAZINE DETAILS PAGE
        ========================================================= */

        :root {
            --brand-gold: #f5a800;
            --brand-dark: #111111;
            --brand-gray: #777;
            --light-bg: #f7f7f7;
        }


        /* =========================================================
           PAGE BANNER
        ========================================================= */

        .magazine-page-banner {
            background: #f5f5f5;
            padding: 75px 0;
        }

        .magazine-page-banner h1 {
            margin-bottom: 12px;
            color: #111;
            font-size: 44px;
            font-weight: 700;
        }

        .magazine-page-banner .breadcrumb {
            font-size: 14px;
        }

        .magazine-page-banner .breadcrumb a {
            color: #777;
            text-decoration: none;
        }

        .magazine-page-banner .breadcrumb-item.active {
            color: #111;
        }


        /* =========================================================
           MAIN MAGAZINE DETAILS
        ========================================================= */

        .magazine-details-section {
            padding: 90px 0;
            background: #fff;
        }

        .magazine-cover-wrapper {
            position: relative;
            max-width: 480px;
            margin: auto;
        }

        .magazine-cover {
            width: 100%;
            display: block;
            border-radius: 12px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
            transition: all .4s ease;
        }

        .magazine-cover:hover {
            transform: translateY(-8px);
            box-shadow: 0 28px 60px rgba(0, 0, 0, .20);
        }


        /* =========================================================
           MAGAZINE INFO
        ========================================================= */

        .magazine-category {
            display: inline-block;
            margin-bottom: 12px;
            color: var(--brand-gold);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .magazine-title {
            margin-bottom: 15px;
            color: #111;
            font-size: 44px;
            line-height: 1.15;
            font-weight: 700;
        }

        .magazine-short-description {
            margin-bottom: 25px;
            color: #777;
            font-size: 16px;
            line-height: 1.8;
        }


        /* =========================================================
           META
        ========================================================= */

        .magazine-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 30px;
        }

        .magazine-meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 15px;
            background: #f7f7f7;
            border-radius: 8px;
            color: #555;
            font-size: 14px;
        }

        .magazine-meta-item i {
            color: var(--brand-gold);
        }


        /* =========================================================
           BUTTONS
        ========================================================= */

        .magazine-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .btn-magazine-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 13px 24px;
            border: 1px solid var(--brand-gold);
            border-radius: 6px;
            background: var(--brand-gold);
            color: #111;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all .3s ease;
        }

        .btn-magazine-primary:hover {
            background: #111;
            border-color: #111;
            color: #fff;
            transform: translateY(-2px);
        }

        .btn-magazine-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 13px 24px;
            border: 1px solid #111;
            border-radius: 6px;
            background: transparent;
            color: #111;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all .3s ease;
        }

        .btn-magazine-outline:hover {
            background: #111;
            color: #fff;
            transform: translateY(-2px);
        }


        /* =========================================================
           ABOUT THIS ISSUE
        ========================================================= */

        .issue-section {
            padding: 90px 0;
            background: #f7f7f7;
        }

        .section-small-title {
            display: inline-block;
            margin-bottom: 8px;
            color: var(--brand-gold);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
        }

        .section-main-title {
            margin-bottom: 15px;
            color: #111;
            font-size: 38px;
            font-weight: 700;
        }

        .section-description {
            max-width: 700px;
            color: #777;
            font-size: 15px;
            line-height: 1.8;
        }


        /* =========================================================
           HIGHLIGHT BOXES
        ========================================================= */

        .issue-info-card {
            height: 100%;
            padding: 30px 25px;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            transition: all .35s ease;
        }

        .issue-info-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, .09);
        }

        .issue-info-icon {
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            border-radius: 50%;
            background: rgba(245, 168, 0, .12);
            color: var(--brand-gold);
            font-size: 23px;
        }

        .issue-info-card h3 {
            margin-bottom: 10px;
            color: #111;
            font-size: 19px;
            font-weight: 600;
        }

        .issue-info-card p {
            margin-bottom: 0;
            color: #777;
            font-size: 14px;
            line-height: 1.7;
        }


        /* =========================================================
           INSIDE THIS ISSUE
        ========================================================= */

        .inside-section {
            padding: 90px 0;
            background: #fff;
        }

        .article-card {
            height: 100%;
            padding: 25px;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            transition: all .35s ease;
        }

        .article-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, .09);
        }

        .article-number {
            margin-bottom: 15px;
            color: var(--brand-gold);
            font-size: 28px;
            font-weight: 700;
        }

        .article-card h3 {
            margin-bottom: 10px;
            color: #111;
            font-size: 19px;
            font-weight: 600;
        }

        .article-card p {
            margin-bottom: 0;
            color: #777;
            font-size: 14px;
            line-height: 1.7;
        }


        /* =========================================================
           CTA SECTION
        ========================================================= */

        .magazine-cta-section {
            padding: 80px 0;
            background: #111;
        }

        .magazine-cta-section h2 {
            margin-bottom: 12px;
            color: #fff;
            font-size: 38px;
            font-weight: 700;
        }

        .magazine-cta-section p {
            max-width: 650px;
            margin: 0 auto 25px;
            color: #aaa;
            font-size: 15px;
            line-height: 1.7;
        }


        /* =========================================================
           RELATED MAGAZINES
        ========================================================= */

        .related-section {
            padding: 90px 0;
            background: #f7f7f7;
        }

        .related-card {
            overflow: hidden;
            height: 100%;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            transition: all .35s ease;
        }

        .related-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, .10);
        }

        .related-image {
            height: 350px;
            overflow: hidden;
            background: #eee;
        }

        .related-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .related-card:hover .related-image img {
            transform: scale(1.05);
        }

        .related-content {
            padding: 20px;
        }

        .related-content span {
            color: var(--brand-gold);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .related-content h3 {
            margin: 7px 0 15px;
            color: #111;
            font-size: 19px;
            font-weight: 600;
        }

        .related-link {
            color: #111;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
        }

        .related-link i {
            margin-left: 5px;
            color: var(--brand-gold);
            transition: margin .3s ease;
        }

        .related-link:hover i {
            margin-left: 9px;
        }


        /* =========================================================
           ADVERTISING / SPONSOR CTA
        ========================================================= */

        .business-cta-section {
            padding: 90px 0;
            background: #fff;
        }

        .business-cta-card {
            height: 100%;
            padding: 40px 30px;
            border-radius: 14px;
            background: #f7f7f7;
            border: 1px solid #eee;
        }

        .business-cta-card.dark {
            background: #111;
            border-color: #111;
        }

        .business-cta-card h3 {
            margin-bottom: 12px;
            color: #111;
            font-size: 25px;
            font-weight: 700;
        }

        .business-cta-card.dark h3 {
            color: #fff;
        }

        .business-cta-card p {
            margin-bottom: 22px;
            color: #777;
            font-size: 14px;
            line-height: 1.7;
        }

        .business-cta-card.dark p {
            color: #aaa;
        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 991.98px) {

            .magazine-details-section,
            .issue-section,
            .inside-section,
            .related-section,
            .business-cta-section {
                padding: 70px 0;
            }

            .magazine-title {
                font-size: 36px;
            }

            .magazine-page-banner h1 {
                font-size: 38px;
            }

            .section-main-title {
                font-size: 32px;
            }

            .related-image {
                height: 320px;
            }
        }


        @media (max-width: 767.98px) {

            .magazine-page-banner {
                padding: 55px 0;
            }

            .magazine-page-banner h1 {
                font-size: 32px;
            }

            .magazine-details-section {
                padding: 55px 0;
            }

            .magazine-cover-wrapper {
                max-width: 380px;
                margin-bottom: 40px;
            }

            .magazine-title {
                font-size: 32px;
            }

            .magazine-short-description {
                font-size: 15px;
            }

            .section-main-title {
                font-size: 29px;
            }

            .magazine-cta-section {
                padding: 60px 20px;
            }

            .magazine-cta-section h2 {
                font-size: 30px;
            }

            .related-image {
                height: 300px;
            }
        }


        @media (max-width: 575.98px) {

            .magazine-page-banner {
                padding: 45px 0;
            }

            .magazine-page-banner h1 {
                font-size: 28px;
            }

            .magazine-details-section,
            .issue-section,
            .inside-section,
            .related-section,
            .business-cta-section {
                padding: 50px 0;
            }

            .magazine-title {
                font-size: 28px;
            }

            .magazine-meta {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .magazine-meta-item {
                font-size: 12px;
                padding: 9px 10px;
            }

            .magazine-buttons {
                flex-direction: column;
            }

            .btn-magazine-primary,
            .btn-magazine-outline {
                width: 100%;
            }

            .section-main-title {
                font-size: 27px;
            }

            .related-image {
                height: 360px;
            }

            .business-cta-card {
                padding: 30px 22px;
            }
        }