/* ==================================
   LUMEN SANUS - LUDA
================================== */


:root{

    --paper:#f8f2e7;
    --ink:#2b2118;
    --gold:#b08a52;
    --brown:#66503b;
    --line:rgba(176,138,82,.35);

}


*{

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

}



body{


    background:

    linear-gradient(
        180deg,
        #fffaf2,
        var(--paper)
    );


    color:var(--ink);

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

}




h1,h2{

    font-family:
    "Cormorant Garamond",
    serif;

}




/* GLAVNI KONTEJNER */


.symbol-page{


    width:90%;

    max-width:1200px;

    margin:150px auto 80px;


}






/* NASLOV */


.page-title{


    text-align:center;

    font-size:70px;

    color:var(--gold);

    letter-spacing:6px;


}



.subtitle{


    text-align:center;

    font-size:25px;

    color:var(--brown);

    margin-bottom:70px;


}






/* ==========================
   SLIKA LEVO + UVOD DESNO
========================== */


.luda-intro{


    display:grid;

    grid-template-columns:

    380px 1fr;


    gap:60px;

    align-items:center;


}






/* SLIKA */


.luda-image{


    background:#ead7ad;

    padding:18px;


    border:

    1px solid var(--gold);


    box-shadow:

    0 25px 60px rgba(50,30,10,.25);


}




.luda-image img{


    width:100%;


    height:520px;


    object-fit:cover;


    display:block;


}






/* UVOD */


.luda-text{


    background:

    rgba(255,250,240,.8);


    padding:45px;


    border:

    1px solid var(--line);


    box-shadow:

    0 20px 50px rgba(60,40,20,.12);


}





.luda-text h2{


    font-size:45px;

    color:var(--gold);

    margin-bottom:25px;


}




.luda-text blockquote{


    font-family:
    "Cormorant Garamond",
    serif;


    font-size:30px;


    font-style:italic;


    color:var(--brown);


    line-height:1.5;


    margin-bottom:30px;


}




.luda-text p{

    font-family:"Cormorant Garamond", serif;

    font-size:22px;

    line-height:2;

    color:#352619;

    margin-bottom:25px;

    text-align:justify;

}







/* ==========================
   DONJE KARTICE
========================== */


.two-cards{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:40px;


    margin-top:70px;


}



.symbol-card{

    background:#fffaf0;

    padding:45px;

    margin-bottom:60px;

    border:
    1px solid var(--line);

    box-shadow:
    0 20px 50px rgba(60,40,20,.12);

}


.symbol-card h2{


    color:var(--gold);


    font-size:38px;


    margin-bottom:25px;


}



.symbol-card p{

    font-family:"Cormorant Garamond", serif;

    font-size:23px;

    line-height:1.9;

    letter-spacing:.3px;

    color:#3a2b1d;

    margin-bottom:25px;

    text-align:justify;

}







/* ZLATNA KARTICA */


.gold{


    background:

    linear-gradient(

    135deg,

    #fff8e8,

    #e6c98b

    );


}






/* PITANJA */


.questions{


    margin-top:80px;

    text-align:center;


}



.questions h2{


    color:var(--gold);

    font-size:45px;


}





.flip-area{


    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:40px;


}




.flip-card{


    width:220px;

    height:220px;


    perspective:1000px;


}




.front,
.back{


    width:100%;

    height:100%;


    position:absolute;


    display:flex;


    align-items:center;

    justify-content:center;


    padding:25px;


    border-radius:10px;


    border:

    1px solid var(--gold);


    backface-visibility:hidden;


}





.front{


    background:#d8b36a;


    color:white;

    font-size:50px;


}




.back{


    background:#fffaf0;


    transform:rotateY(180deg);


    font-size:18px;


}





.flip-card{


    position:relative;

    transition:.8s;

    transform-style:preserve-3d;


}



.flip-card:hover{


    transform:rotateY(180deg);


}







/* KRAJ */


.lumen-end{


    margin-top:80px;


    padding:60px;


    text-align:center;


    border-top:

    2px solid var(--gold);


}



.lumen-end h2{


    color:var(--gold);

    font-size:50px;


}



.lumen-end p {
    max-width: 700px;
    margin: 30px auto 0;
    font-size: 21px;
    line-height: 1.9;
    color: #b08a52;
    font-weight: 300;
    letter-spacing: 1px;
}





/* MOBILNI */


@media(max-width:900px){


.luda-intro{


    grid-template-columns:1fr;


}



.luda-image{


    width:300px;

    margin:auto;


}



.luda-image img{


    height:400px;


}



.two-cards{


    grid-template-columns:1fr;


}


.flip-area{


    flex-direction:column;

    align-items:center;


}


}


blockquote{

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:34px;

    font-style:italic;

    line-height:1.6;

    color:#66503b;

    text-align:center;

    padding:35px 45px;

    margin:30px 0 40px;


    position:relative;

}


/* ukrasne zvezdice / navodnici */

blockquote::before{

    content:"“";

    font-size:90px;

    color:#b08a52;

    position:absolute;

    top:-35px;

    left:10px;

    opacity:.5;

}



blockquote::after{

    content:"”";

    font-size:90px;

    color:#b08a52;

    position:absolute;

    bottom:-60px;

    right:10px;

    opacity:.5;

}
.lumen-end h2 {
    color: var(--gold);
    font-size: 50px;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    letter-spacing: 2px;
}

.lumen-end p {
    max-width: 700px;
    margin: 30px auto 0;
    font-size: 21px;
    line-height: 1.9;
    font-family:
    "Cormorant Garamond",
    serif;


  


    font-style:italic;


    color:var(--brown);


    line-height:1.5;


    margin-bottom:30px;


    font-weight: 300;
    letter-spacing: 1px;
}