/*====================================================
        WEEKLY LEARNING MAGAZINE
        Part 1
====================================================*/

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#edf2f7;

    font-family:Arial, Helvetica, sans-serif;

    color:#333;

}

/*====================================================
        MAIN CONTAINER
====================================================*/

.magazine-container{

    width:95%;

    max-width:1400px;

    margin:30px auto;

}

/*====================================================
        MAGAZINE HEADER
====================================================*/

.magazine-header{

    background:linear-gradient(135deg,#0d47a1,#1565c0);

    color:#fff;

    padding:25px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-radius:10px 10px 0 0;

    box-shadow:0 6px 15px rgba(0,0,0,.18);

}

.header-left h1{

    font-size:48px;

    font-weight:bold;

    margin-bottom:10px;

}

.header-left p{

    font-size:22px;

    color:#dbe8ff;

}

.header-right{

    text-align:right;

}

.episode{

    font-size:34px;

    font-weight:bold;

    color:#ffd54f;

    margin-bottom:10px;

}

.month{

    font-size:28px;

    margin-bottom:10px;

}

.issue-date{

    font-size:20px;

}

/*====================================================
        COVER IMAGE
====================================================*/

.cover-image{

    background:#ffffff;

    padding:10px;

    border-left:1px solid #ddd;

    border-right:1px solid #ddd;

}

.cover-image img{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:6px;

    display:block;

}

/*====================================================
        CHAPTER CARD
====================================================*/

.chapter-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#ffffff;

    padding:25px;

    margin-top:20px;

    border-radius:10px;

    box-shadow:0 4px 12px rgba(0,0,0,.10);

}

.chapter-left{

    display:flex;

    align-items:center;

    gap:20px;

    width:65%;

}

.subject-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#1565c0;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:50px;

    flex-shrink:0;

}

.chapter-left h2{

    color:#0d47a1;

    font-size:40px;

    margin-bottom:8px;

}

.chapter-left h1{

    color:#2e7d32;

    font-size:54px;

    font-weight:bold;

}

.chapter-right{

    width:30%;

    border-left:3px solid #ddd;

    padding-left:25px;

}

.chapter-right p{

    font-size:24px;

    margin:18px 0;

}

/*====================================================
        COMMON CARD STYLE
====================================================*/

.learn-card,
.content-card,
.fact-card,
.formula-card,
.revision-card{

    background:#ffffff;

    border-radius:10px;

    margin-top:25px;

    padding:25px;

    box-shadow:0 4px 12px rgba(0,0,0,.10);

}

/*====================================================
        SECTION HEADINGS
====================================================*/

.learn-card h2,
.content-card h2,
.fact-card h2,
.formula-card h2,
.revision-card h2{

    color:#0d47a1;

    font-size:34px;

    margin-bottom:20px;

    padding-bottom:10px;

    border-bottom:3px solid #1976d2;

}

/*====================================================
        HOVER EFFECT
====================================================*/

.chapter-card:hover,
.learn-card:hover,
.content-card:hover,
.fact-card:hover,
.formula-card:hover,
.revision-card:hover{

    transform:translateY(-4px);

    transition:.3s;

    box-shadow:0 10px 22px rgba(0,0,0,.18);

}
/*====================================================
        WHAT YOU'LL LEARN
====================================================*/

.learn-card{

    background:linear-gradient(135deg,#f8fff6,#edf8ef);

    border:1px solid #c8e6c9;

}

.learn-card h2{

    color:#1b5e20;

}

.learn-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:20px;

}

.learn-grid div{

    background:#ffffff;

    padding:18px;

    border-radius:8px;

    font-size:20px;

    font-weight:bold;

    border-left:6px solid #43a047;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.learn-grid div:hover{

    transform:translateX(6px);

    transition:.3s;

}

/*====================================================
        MAIN CONTENT
====================================================*/

.content-card{

    background:#ffffff;

    border:1px solid #dbe4ee;

}

.lesson-content{

    margin-top:20px;

    font-size:18px;

    line-height:2;

    text-align:justify;

    color:#333;

}

/*====================================================
        HEADINGS
====================================================*/

.lesson-content h1{

    color:#0d47a1;

    font-size:40px;

    margin:30px 0 15px;

}

.lesson-content h2{

    color:#1565c0;

    font-size:32px;

    margin:28px 0 15px;

}

.lesson-content h3{

    color:#2e7d32;

    font-size:26px;

    margin:25px 0 12px;

}

.lesson-content h4{

    color:#6a1b9a;

    font-size:22px;

    margin:20px 0 10px;

}

/*====================================================
        PARAGRAPH
====================================================*/

.lesson-content p{

    margin-bottom:20px;

}

/*====================================================
        IMAGES
====================================================*/

.lesson-content img{

    display:block;

    max-width:100%;

    height:auto;

    margin:25px auto;

    border-radius:8px;

    box-shadow:0 6px 15px rgba(0,0,0,.18);

}

/*====================================================
        TABLE
====================================================*/

.lesson-content table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}

.lesson-content table,
.lesson-content th,
.lesson-content td{

    border:1px solid #ccc;

}

.lesson-content th{

    background:#1565c0;

    color:white;

    padding:14px;

    text-align:center;

}

.lesson-content td{

    padding:12px;

}

.lesson-content tr:nth-child(even){

    background:#f8f9fa;

}

/*====================================================
        LIST
====================================================*/

.lesson-content ul{

    margin-left:30px;

    margin-bottom:20px;

}

.lesson-content ol{

    margin-left:30px;

    margin-bottom:20px;

}

.lesson-content li{

    margin:10px 0;

}

/*====================================================
        BLOCKQUOTE
====================================================*/

.lesson-content blockquote{

    background:#fff8dc;

    border-left:6px solid orange;

    padding:20px;

    margin:25px 0;

    font-style:italic;

    border-radius:6px;

}

/*====================================================
        CODE
====================================================*/

.lesson-content pre{

    background:#263238;

    color:#fff;

    padding:18px;

    border-radius:8px;

    overflow:auto;

}

.lesson-content code{

    color:#ffd54f;

}

/*====================================================
        FORMULA BOX
====================================================*/

.formula-highlight{

    background:#e8f5e9;

    border:2px dashed #43a047;

    border-radius:8px;

    padding:20px;

    margin:25px 0;

    text-align:center;

    font-size:28px;

    font-weight:bold;

}

/*====================================================
        IMPORTANT NOTE
====================================================*/

.note-box{

    background:#ffebee;

    border-left:6px solid #d32f2f;

    padding:20px;

    border-radius:8px;

    margin:25px 0;

}

.note-box h3{

    margin-top:0;

    color:#c62828;

}

/*====================================================
        EXAM TIP
====================================================*/

.tip-box{

    background:#fff8dc;

    border-left:6px solid #ff9800;

    padding:20px;

    border-radius:8px;

    margin:25px 0;

}

.tip-box h3{

    margin-top:0;

    color:#ef6c00;

}

/*====================================================
        VIDEO
====================================================*/

.lesson-content iframe{

    width:100%;

    height:500px;

    border:none;

    border-radius:8px;

    margin:25px 0;

}

/*====================================================
        HORIZONTAL LINE
====================================================*/

.lesson-content hr{

    border:none;

    border-top:2px solid #ddd;

    margin:35px 0;

}

/*====================================================
        MOBILE
====================================================*/

@media(max-width:768px){

.learn-grid{

    grid-template-columns:1fr;

}

.lesson-content{

    font-size:16px;

}

.lesson-content h1{

    font-size:30px;

}

.lesson-content h2{

    font-size:26px;

}

.lesson-content iframe{

    height:250px;

}

}
/*====================================================
        DID YOU KNOW
====================================================*/

.fact-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    background:linear-gradient(135deg,#fff8e1,#ffecb3);

    border-left:8px solid #ff9800;

}

.fact-left{

    width:80%;

}

.fact-left h2{

    color:#ef6c00;

}

.fact-left p{

    font-size:18px;

    line-height:1.8;

}

.fact-right{

    width:20%;

    text-align:center;

    font-size:90px;

}

/*====================================================
        FORMULA CARD
====================================================*/

.formula-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    background:linear-gradient(135deg,#e8f5e9,#c8e6c9);

    border-left:8px solid #43a047;

}

.formula-card div:first-child{

    width:60%;

    text-align:center;

}

.formula-card div:last-child{

    width:40%;

}

.formula-card h2{

    color:#1b5e20;

}

.formula-card h1{

    font-size:70px;

    color:#d50000;

    margin-top:20px;

    letter-spacing:3px;

}

.formula-card p{

    font-size:22px;

    margin:18px 0;

}

/*====================================================
        QUICK REVISION
====================================================*/

.revision-card{

    background:linear-gradient(135deg,#f3e5f5,#ede7f6);

    border-left:8px solid #7b1fa2;

}

.revision-card h2{

    color:#6a1b9a;

}

.revision-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    margin-top:25px;

}

.revision-grid ol{

    padding-left:30px;

}

.revision-grid li{

    font-size:18px;

    margin:15px 0;

}

/*====================================================
        SUMMARY
====================================================*/

.summary-box{

    background:#e8f5e9;

    border-left:8px solid #2e7d32;

    border-radius:8px;

    padding:25px;

    margin-top:25px;

}

.summary-box h2{

    color:#1b5e20;

}

.summary-box p{

    line-height:1.8;

}

/*====================================================
        KEY POINTS
====================================================*/

.key-points{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:20px;

}

.key-points div{

    background:#ffffff;

    border-left:5px solid #1565c0;

    padding:15px;

    border-radius:8px;

    font-weight:bold;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

/*====================================================
        QUOTE BOX
====================================================*/

.quote-box{

    background:#ede7f6;

    border-left:6px solid #673ab7;

    border-radius:8px;

    padding:25px;

    margin-top:25px;

    font-style:italic;

    font-size:20px;

    text-align:center;

}

/*====================================================
        FACT BOXES
====================================================*/

.fact-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:30px;

}

.fact-item{

    background:#ffffff;

    text-align:center;

    padding:25px;

    border-radius:8px;

    box-shadow:0 4px 10px rgba(0,0,0,.10);

}

.fact-item h3{

    color:#1565c0;

    margin-bottom:12px;

}

.fact-item p{

    font-size:17px;

}

/*====================================================
        CARD HOVER
====================================================*/

.fact-card:hover,
.formula-card:hover,
.revision-card:hover,
.summary-box:hover,
.fact-item:hover{

    transform:translateY(-5px);

    transition:.3s;

    box-shadow:0 10px 20px rgba(0,0,0,.18);

}

/*====================================================
        ICON STYLE
====================================================*/

.big-icon{

    font-size:60px;

    color:#1565c0;

    margin-bottom:10px;

}

/*====================================================
        MOBILE
====================================================*/

@media(max-width:768px){

.fact-card,
.formula-card{

    flex-direction:column;

    text-align:center;

}

.fact-left,
.fact-right{

    width:100%;

}

.formula-card div:first-child,
.formula-card div:last-child{

    width:100%;

}

.formula-card h1{

    font-size:48px;

}

.revision-grid{

    grid-template-columns:1fr;

}

.key-points{

    grid-template-columns:1fr;

}

.fact-grid{

    grid-template-columns:1fr;

}

}
/*====================================================
        MAGAZINE RIBBON
====================================================*/

.magazine-ribbon{

    background:linear-gradient(90deg,#ff9800,#ff5722);

    color:#fff;

    padding:10px 30px;

    border-radius:10px 10px 0 0;

    font-size:16px;

    font-weight:bold;

    letter-spacing:2px;

    text-transform:uppercase;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

}

/*====================================================
        EPISODE BADGE
====================================================*/

.episode-badge{

    display:inline-block;

    background:#ffd54f;

    color:#000;

    padding:8px 20px;

    border-radius:50px;

    font-weight:bold;

    font-size:15px;

    margin-bottom:15px;

}

/*====================================================
        PAGE NUMBER
====================================================*/

.page-number{

    text-align:right;

    color:#888;

    font-size:14px;

    margin-top:20px;

    font-style:italic;

}

/*====================================================
        BOOKMARK
====================================================*/

.bookmark{

    position:fixed;

    top:180px;

    right:15px;

    background:#d32f2f;

    color:#fff;

    padding:12px;

    border-radius:8px 8px 0 0;

    writing-mode:vertical-rl;

    text-orientation:mixed;

    font-weight:bold;

    z-index:999;

}

/* ==========================================
   MAGAZINE NAVIGATION
========================================== */

.magazine-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 30px auto;
    padding: 15px;
}

.magazine-buttons a {
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.25s ease;
    border: 2px solid transparent;
}

/* Previous */

.previous-btn {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #1565c0 !important;
}

.previous-btn:hover {
    background: #1565c0;
    color: white;
    transform: translateX(-3px);
}


/* Continue Learning */

.continue-btn {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #2e7d32 !important;
}

.continue-btn:hover {
    background: #2e7d32;
    color: white;
    transform: translateY(-2px);
}


/* Test */

.test-btn {
    background: #fff3e0;
    color: #ef6c00;
    border-color: #ef6c00 !important;
}

.test-btn:hover {
    background: #ef6c00;
    color: white;
    transform: translateY(-2px);
}


/* Archive */

.archive-btn {
    background: #f3e5f5;
    color: #7b1fa2;
    border-color: #7b1fa2 !important;
}

.archive-btn:hover {
    background: #7b1fa2;
    color: white;
    transform: translateY(-2px);
}


/* Next */

.next-btn {
    background: #e8f5e9;
    color: #388e3c;
    border-color: #388e3c !important;
}

.next-btn:hover {
    background: #388e3c;
    color: white;
    transform: translateX(3px);
}


/* Disabled */

.magazine-buttons a.disabled {
    background: #eeeeee;
    color: #999999;
    border-color: #cccccc !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}


/* Mobile */

@media (max-width: 700px) {

    .magazine-buttons {
        flex-direction: column;
        width: 100%;
    }

    .magazine-buttons a {
        width: 90%;
        text-align: center;
    }

}

/*====================================================
        DOWNLOAD BUTTON
====================================================*/

.download-btn{

    display:inline-block;

    background:#00897b;

    color:#fff;

    padding:12px 25px;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

    margin:20px 0;

}

.download-btn:hover{

    background:#00695c;

}

/*====================================================
        PRINT BUTTON
====================================================*/

.print-btn{

    display:inline-block;

    background:#455a64;

    color:#fff;

    padding:12px 25px;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

    margin-left:10px;

}

.print-btn:hover{

    background:#263238;

}

/*====================================================
        FADE ANIMATION
====================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.magazine-header,
.chapter-card,
.learn-card,
.content-card,
.fact-card,
.formula-card,
.revision-card{

    animation:fadeUp .6s ease;

}

/*====================================================
        IMAGE HOVER
====================================================*/

.cover-image img:hover{

    transform:scale(1.02);

    transition:.4s;

}

/*====================================================
        SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:#1565c0;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0d47a1;

}

.back-home-btn{
    display:inline-block;
    background:#0d47a1;
    color:#fff;
    padding:10px 20px;
    text-decoration:none;
    border-radius:6px;
    font-weight:bold;
    transition:0.3s;
}

.back-home-btn:hover{
    background:#08306b;
}
/*====================================================
        SELECTION
====================================================*/

::selection{

    background:#1565c0;

    color:#fff;

}

.weekly-footer{

    margin-top:20px;
    padding:12px 15px;
    background:#f5f5f5;
    border-top:1px solid #ddd;
    text-align:right;
    font-size:15px;
    color:#444;
    font-style:italic;

}

.weekly-footer strong{

    color:#0d47a1;

}

/*====================================================
        PRINT
====================================================*/

@media print{

nav,
header,
footer,
.magazine-buttons,
.bookmark{

    display:none;

}

body{

    background:#fff;

}

.magazine-container{

    width:100%;

    margin:0;

}

}

/*====================================================
        MOBILE
====================================================*/

@media(max-width:768px){

.magazine-buttons{

    flex-direction:column;

}

.bookmark{

    display:none;

}

.header-left h1{

    font-size:30px;

}

.chapter-left h1{

    font-size:32px;

}

.chapter-left h2{

    font-size:24px;

}

}