/* =========================================
   ECONOME DESIGN SYSTEM
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{

    --primary:#041E42;
    --secondary:#1E293B;

    --gold:#D4AF37;
    --gold-dark:#B89028;

    --background:#F8F5F0;
    --white:#FFFFFF;

    --text:#1E293B;
    --text-light:#64748B;

    --border:#E5E7EB;

    --success:#16A34A;
    --danger:#DC2626;

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

    --radius:16px;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

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

    line-height:1.7;

}

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

h1,h2,h3,h4,h5{

    font-family:'Playfair Display',serif;

    color:var(--primary);

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    max-width:100%;

    display:block;

}

button{

    cursor:pointer;

    border:none;

    font-family:inherit;

}

/* ==========================
   MATERIALS PAGE
========================== */

.mcontainer{

    max-width:1100px;

    width:92%;

    margin:40px auto;

}

.material-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    background:white;

    border-radius:12px;

    padding:18px 22px;

    margin-bottom:15px;

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

}

.material-left{

    flex:1;

}

.material-left h2{

    font-size:22px;

    color:#0F172A;

    margin-bottom:6px;

}

.exam-type{

    color:#D4AF37;

    font-size:14px;

    margin-bottom:8px;

}

.description{

    color:#64748B;

    font-size:15px;

    line-height:1.5;

    margin:0;

}

.material-right{

    flex-shrink:0;

}

.btn{

    display:inline-block;

    background:#F5E7B3;

    color:#0F172A;

    text-decoration:none;

    padding:10px 18px;

    border-radius:8px;

    font-weight:600;

    transition:.25s;

}

.btn:hover{

    background:#D4AF37;

    color:white;

}
@media(max-width:768px){

.material-card{

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

    padding:20px;

}
.material-left h2{

    word-break:break-word;

}

.material-right{

    width:100%;

}

.btn{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:44px;

    background:#F5E7B3;

    color:#0F172A;

    text-decoration:none;

    padding:12px 22px;

    border-radius:8px;

    font-weight:600;

    transition:.25s;

}
.material-card{

    transition:.25s;

}

.material-card:hover{

    transform:translateY(-4px);

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

}


}
@media(max-width:480px){

.mcontainer{

    width:95%;

}

.material-left h2{

    font-size:20px;

}

.description{

    font-size:14px;

}

}