*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:white;

    font-family:'Optima', sans-serif;

    overflow-x:hidden;

}

.download-note{

    width: 80%;

    max-width: 900px;

    margin: 30px auto;

    text-align: center;

    line-height: 1.6;

}

/* =========================

   HEADER

========================= */

.top-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    padding:20px 3vw;

    flex-wrap:wrap;

    background:white;

}

/* =========================

   EXCLAIM IMAGE

========================= */

.left-header img{

    width:clamp(180px, 20vw, 340px);

}

/* =========================

   PINS

========================= */

.pins{

    display:flex;

    align-items:center;

    gap:8px;

}


.pins img{

    width:clamp(75px, 9vw, 145px);

    height:auto;

    object-fit:contain;

    transition:0.3s;

}

/* ABOUT pin slightly smaller */

.pins a:first-child img{

    width:clamp(68px, 8.2vw, 132px);

}

/* HOME red pin slightly bigger */

.pins a:nth-child(3) img{

    width:clamp(82px, 10vw, 158px);

}
.pins a:nth-child(2){

    margin-right:-4px;

}

.pins img:hover{

    transform:scale(1.06);

}

/* =========================

   LOGO

========================= */

.logo img{

    width:clamp(350px, 36vw, 470px);

    height:auto;

}

/* =========================

   YELLOW CURVED SECTION

========================= */

.definition-box{

    width:88%;

    margin:30px auto 50px auto;

    background:#9FE2EA;

    padding:15px;

    border-radius:50px;

    text-align:center;

    box-shadow:0px 5px 15px rgba(0,0,0,0.08);

}

.definition-box h2{

    margin-bottom:15px;

    font-size:clamp(26px, 3vw, 42px);

}

.definition-box p{

    font-size:clamp(15px, 1.5vw, 19px);

    line-height:1.6;

    max-width:900px;

    margin:auto;

}

/* =========================

   VOLUMES SECTION

========================= */

.volumes-section{

    display:grid;

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

    gap:22px;

    width:92%;

    margin:auto;

    margin-top:20px;

}

/* =========================

   VOLUME CARDS

========================= */



.volume-card{

    background:white;

    border-radius:25px;

    overflow:hidden;

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

    text-align:center;

    transition:0.3s;

}

.volume-card:hover{

    transform:translateY(-5px);

}

/* WIDER IMAGE RATIO FOR TEXT */

.volume-card img{

    width:100%;

    aspect-ratio:1.45 / 2;

    object-fit:contain;

    background:white;

    display:block;

    padding:8px;

}

/* =========================

   VOLUME TEXT

========================= */

.volume-info{

    padding:18px;

}

.volume-info h2{

    font-size:clamp(24px, 2vw, 34px);

    margin-bottom:10px;

}

.volume-info p{

    font-size:16px;

    margin-bottom:18px;

}

/* =========================

   BUTTON

========================= */

.volume-info button{

    padding:12px 22px;

    border:none;

    border-radius:30px;

    background:black;

    color:white;

    cursor:pointer;

    transition:0.3s;

    font-size:16px;

}

.volume-info button:hover{

    background:#444;

}

/* =========================

   FOOTER

========================= */

footer{

    margin-top:80px;

    padding:40px 20px;

    background:#FF7B47;

}


/* =========================

   ABOUT PAGE

========================= */

.simple-header{

    text-align:center;

    padding:30px;

}

.simple-header img{

    width:min(90%, 550px);

}

.about-content{

    width:80%;

    margin:auto;

    text-align:center;

    padding:50px;

}

.about-content h1{

    margin-bottom:20px;

}

.about-content p{

    font-size:20px;

    line-height:1.6;

}

/* =========================

   BACK BUTTON

========================= */

.back-button{

    display:inline-block;

    margin-top:30px;

    padding:12px 24px;

    background:black;

    color:white;

    text-decoration:none;

    border-radius:30px;

}

/* =========================

   VOLUMES PAGE

========================= */

.volumes-page{

    width:76%;

    margin:30px auto 80px auto;

    display:flex;

    flex-direction:column;

    gap:45px;

}

/* =========================

   EACH ROW

========================= */

.volume-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:stretch;

    gap:0;

}

/* =========================

   COLOR BLOCK

========================= */

.color-block {

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    width:100%;

    min-height:100%;

}

.color-block img {

    width:90%;

    height:auto;

    max-width:90%;

    max-height:90%;

    object-fit:contain;

    border:clamp(3px, 0.5vw, 8px) solid currentColor;

    box-sizing:border-box;

}

/* COLORS */


.yellow-block {

    color: #FFD84D;
    background: #FFD84D;

}

.red-block {

    color: #E63946;
    background: #E63946;

}

.blue-block {

    color: #457B9D;
    background: #457B9D;

}

.green-block {

    color: #2A9D8F;
    background: #2A9D8F;

}

.pink-block {

    color: #F4A6C1;
    background: #F4A6C1;

}
/* =========================

   VOLUME COVER SIDE

========================= */

.volume-cover{

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:0 35px 35px 0;

    overflow:hidden;

    padding:15px 55px 15px 15px;

}

/* =========================

   VOLUME IMAGES

========================= */

.volume-cover img{

    width:100%;

    max-width:320px;

    aspect-ratio:1.45 / 2;

    object-fit:contain;

    cursor:pointer;

    transition:0.35s ease;

}

/* HOVER EFFECT */

.volume-cover img:hover{

    transform:scale(1.05);

}


/* Match image borders to original block colors */

.yellow-block img {

    border-color: #FFD84D; /* yellow block color */
    background: #FFD84D;

}

.red-block img {

    border-color: #E63946; /* red block color */
    background: #E63946;
}

/* =========================

   MOBILE / SMALLER SCREENS

========================= */

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

    .volumes-page{

        width:92%;

        gap:30px;

    }

    /* KEEP SIDE BY SIDE */

    .volume-row{

        grid-template-columns:1fr 1fr;

    }

    .color-block{

        margin-left:15px;
    
        border-radius:25px 0 0 25px;
    
    }

    .volume-cover{

        border-radius:0 25px 25px 0;

        padding:12px 25px 12px 12px;

    }

    .volume-cover img{

        max-width:210px;

    }

}

/* =========================

   MOBILE LAYOUT

========================= */

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

    .top-header{

        flex-direction:column;

        gap:10px;

    }

    .pins{

        gap:8px;

    }

    .definition-box{

        width:92%;

        padding:30px 20px;

        border-radius:35px;

    }

    .volumes-section{

        grid-template-columns:1fr;

    }

    .volume-grid{

        grid-template-columns:1fr;

    }

    .volume-card img{

        width:100%;

        max-width:420px;

        margin:auto;

    }

    .volume-grid img{

        width:100%;

        max-width:420px;

        margin:auto;

    }

    .volume-info h2{

        font-size:28px;

    }


}

.video-container video {

    width:100%;

    height:auto;

    display:block;

}