/* ==========================
      FUNDO DO SITE
========================== */

body{
    margin:0;
    background-image:url("mapa.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    font-family:"Cormorant Garamond", serif;
}


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

.banner{
    width:850px;
    height:230px;
    margin:40px auto;
    background-image:url("marrom.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    border-radius:120px;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 18px rgba(0,0,0,.35);

    position:relative;
    overflow:visible;
}

.titulo{
    text-align:center;
}

.titulo h1{
    margin:0;
    font-family:"Cinzel", serif;
    font-size:54px;
    color:#3b2415;
    letter-spacing:5px;
}

.titulo p{
    margin-top:12px;
    font-size:24px;
    color:#593b25;
}


/* ==========================
          LIVRO
========================== */
.livro{
    width:420px;   /* 👈 menor que antes */
    margin:40px auto;
    position:relative;
}

.livro img{
    width:100%;
    height:auto;
    display:block;
}

.livro a{
    position:absolute;
    display:block;
    width:45%;
    height:18%;
    text-decoration:none;
    color:#4b2b18;
    font-family:"Cinzel", serif;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    transition:.3s;
}

/* lado esquerdo */
.cap1{ top:15%; left:5%; }
.cap2{ top:35%; left:5%; }
.cap3{ top:55%; left:5%; }

/* lado direito */
.cap4{ top:15%; right:11%; }
.cap5{ top:35%; right:11%; }
.cap6{ top:55%; right:11%; }

/* ==========================
      BANNER BIBLIOTECA
========================== */

.banner-biblioteca{

    width:850px;

    height:230px;

    margin:40px auto;

   background:red;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    border-radius:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 18px rgba(0,0,0,.35);

}

/* ==========================================
      GRANDES CIVILIZAÇÕES
========================================== */

html{
    scroll-behavior:smooth;
}

body.civilizacoes{
    margin:0;
    background-image:url("antigo.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    font-family:"Cormorant Garamond", serif;
}

/* Banner */

.bannerCivilizacoes{

    width:900px;
    height:170px;

    margin:40px auto;

    background-image:url("marrom.jpg");

    background-size:cover;
    background-position:center;

    border-radius:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

}

.bannerCivilizacoes h1{

    font-family:"Cinzel", serif;

    color:#3b2415;

    font-size:58px;

    letter-spacing:4px;
position:relative;

    left:190px;   /* Move para a direita */
    top:-10px;   /* Sobe */

}


/* Área principal */

.exploracao{

    position:relative;

    width:1400px;

    height:850px;

    margin:20px auto;

}


/* Papel */

.papel{

    position:absolute;

    left:440px;

    top:-4px;

    width:530px;

}

.papel img{

    width:100%;

}


/* Texto do papel */

.textoPapel{

    position:absolute;

    top:30px;

    left:50px;

    right:60px;

    text-align:center;

    font-family:'Uncial Antiqua', cursive;

}

.textoPapel h2{

    color:#4a2d1b;

    font-size:28px;

    margin-bottom:60px;

}

.textoPapel a{

    display:block;

    margin:18px 0;

    color:#4a2d1b;

    text-decoration:none;

    font-size:20px;

    transition:.25s;

}

.textoPapel a:hover{

    color:#8c5d2c;

    transform:translateX(9px);

}


/* Arqueóloga */

.arqueologa{

    position:absolute;

    right:-50px;

    bottom:200px;

    width:520px;

}


/* Balão */

.balao{

    position:absolute;

    right:470px;

    top:120px;

    width:280px;

    padding:18px;

    background:#fffdf6;

    border:3px solid #6b4b2a;

    border-radius:20px;

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

    font-family:'Uncial Antiqua', cursive;

    color:#4b2d18;

    line-height:1.6;

}

.balao::after{

    content:"";

    position:absolute;

    right:-20px;

    top:120px;

    border-width:12px;

    border-style:solid;

    border-color:transparent transparent transparent #6b4b2a;

}

.balao::before{

    content:"";

    position:absolute;

    right:-16px;

    top:121px;

    border-width:11px;

    border-style:solid;

    border-color:transparent transparent transparent #fffdf6;

}


/* Seções */

.secaoCivilizacao{

    width:900px;

    margin:120px auto;

    background:rgba(255,249,236,.93);

    padding:45px;

    border-radius:20px;

    box-shadow:0 8px 18px rgba(0,0,0,.25);

}

.secaoCivilizacao h2{

    font-family:'Uncial Antiqua', cursive;

    color:#4b2d18;

    font-size:40px;

}

.secaoCivilizacao p{

    font-size:22px;

    line-height:1.8;

}

.voltar,
.proximo{

    display:inline-block;

    margin-top:25px;

    margin-right:20px;

    padding:12px 25px;

    border-radius:30px;

    background:#6b4b2a;

    color:white;

    text-decoration:none;

    transition:.3s;

}

.voltar:hover,
.proximo:hover{

    background:#9c6b37;

}
/* ==========================
        ALA DO EGITO
========================== */

.cabecalhoEgito{

    position:relative;

    width:100%;

    height:700px;

    background-image:url("egito.jpg");

    background-size:cover;

    background-position:center;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:60px;

}

.tumbaEgito{

    position:absolute;

    left:0;

    bottom:0;

    width:450px;

}

.pedraEgito{

    position:absolute;

    left:360px;

    top:90px;

    width:350px;

}
/* Globo antigo */

/* ==========================
      DECORAÇÕES
========================== */

.mundo{
  
    position:absolute;
    width:80px;

    left:-120px;

    top:20px;

    transform:rotate(-15deg);

    transition:.3s;

}

.pena{

    position:absolute;
    width:70px;

    right:-110px;

    top:30px;

    transform:rotate(15deg);

    transition:.3s;
}
}



body{
    background: red !important;
}