@import "https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap";

* {
box-sizing:border-box;
padding:0;
margin:0;
list-style:none;
font-family:"Geologica";
color:#000;
text-decoration:none
}

body {
background-color:#ededed
}

.navbar {
display:flex;
text-align:center;
align-items:center;
background-color:#fff;
justify-content:space-between;
border-bottom-right-radius:60px;
border-bottom-left-radius:60px;
box-shadow:5px 10px 10px #00000028;
margin-left:100px;
margin-right:100px;
padding:15px;
height:100px;
border-bottom:2px solid #000;
border-left:2px solid #000;
top:0;
z-index:999;
border-right:2px solid #000
}

.navbar-container {
display:flex;
text-align:center;
align-items:center;
width:100%;
justify-content:space-between
}

@media (max-width:800px) {
.navbar {
margin-left:0;
margin-right:0
}
}

.navbar img {
width:250px;
margin-top:15px;
margin-left:0;
transition:all .2s
}

.navbar img:hover {
transform:scale(0.97)
}

.navbar ul {
display:flex
}

.navbar ul li {
padding:15px;
cursor:pointer;
transition:all .2s
}

.navbar ul li a {
transition:all .2s
}

.navbar ul li a:hover {
color:#ffc400
}

#ContactBtn {
background-color:#ffc400;
border-radius:300px;
border:2px solid;
transition:all .2s
}

#ContactBtn:hover {
background-color:#fff;
color:#000
}

main {
min-height:calc(100vh - 100px);
display:flex;
width:100%;
justify-content:center;
align-items:center;
text-align:left;
justify-content:space-around
}

@media(max-width:800px) {
main {
flex-direction:column;
gap:6vh;
justify-content:center;
text-align:center
}
}

main h2 {
font-size:3.3vh;
max-width:35vh
}

main p {
font-size:2vh;
max-width:50vh
}

.slide-up {
animation:slideUp .5s ease-out forwards;
opacity:0
}

@keyframes slideUp {
0% {
transform:translateY(40px);
opacity:0
}

100% {
transform:translateY(0);
opacity:1
}
}

#pdf-list {
height:30vh;
width:25rem;
overflow:auto;
background-color:#e4e4e4;
white-space:nowrap;
border-radius:20px
}

@media(max-width:880px) {
#pdf-list {
width:100%
}
}

#pdf-list li {
background-color:#ddd;
margin:10px;
padding:10px;
text-align:left;
height:70px;
display:flex;
justify-content:center;
align-items:center;
border-radius:10px
}

#search {
border-radius:100px;
border:1px solid #000
}

form {
display:flex;
flex-direction:column;
width:500px;
height:300px;
gap:30px
}

form label {
display:flex;
flex-direction:column;
width:500px
}

form input {
height:60px;
border-radius:5px;
border:1px solid #000;
padding:10px
}

form textarea {
height:120px;
border-radius:5px;
border:1px solid #000;
padding:10px
}

form button {
padding:10px;
height:60px;
border-radius:5px;
border:1px solid #000;
background-color:#ffc400;
transition:all .2s;
cursor:pointer
}

form button:hover {
padding:10px;
height:60px;
border-radius:5px;
border:1px solid #000;
background-color:#fff
}

@media (max-width:880px) {
form button {
width:20rem
}

form label {
width:20rem
}

#contacte-nos-h2 {
font-size:35px
}

form {
display:flex;
justify-content:center;
align-items:center
}
}

.navbar-toggle {
background:transparent;
padding:10px;
border:none;
cursor:pointer;
display:none
}

.bar {
display:block;
width:25px;
height:3px;
margin:5px auto;
background:#000;
transition:all .3s ease-in-out
}

@media (max-width:800px) {
.navbar {
backdrop-filter:none
}

.navbar-container .navbar-menu {
display:none;
flex-direction:column;
align-items:left;
gap:1.7rem!important;
position:absolute;
height:90vh;
width:100%;
top:0;
left:0;
background-color:#fff;
padding:5rem 1.5rem;
z-index:998;
border-bottom-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom:2px solid #000;
border-left:2px solid #000;
border-right:2px solid #000;
transition:all .3 ease-in-out
}

.navbar-container .navbar-menu.active {
display:flex
}

.navbar-toggle {
display:block;
z-index:999
}

.navbar-toggle.active .bar:nth-child(2) {
opacity:0
}

.navbar-toggle.active .bar:nth-child(1) {
transform:translateY(8px) rotate(45deg)
}

.navbar-toggle.active .bar:nth-child(3) {
transform:translateY(-8px) rotate(-45deg)
}
}

.navbar-container .navbar-menu.active {
display:flex
}

.error404 {
width:100%;
display:flex;
justify-content:space-around;
text-align:center;
justify-content:center;
gap:32vh;
align-items:center
}

.error404 img {
width:300px
}

.text404 {
display:flex;
text-align: center;
text-align:center;
flex-direction:column
}

@media (max-width:800px) {
.error404 {
flex-direction:column;
gap:30px
}

.error404 h2 {
font-size:50px
}

.error404 h4 {
font-size:30px;
font-weight:400
}

.error404 h5 {
font-size:15px;
font-weight:300
}

.slide-up h2 {
font-size:5vh;
text-align:left
}

#emaildiv {
width:320px
}

#title-main-page {
font-size:1.9rem;
margin-top:15rem;
margin-bottom:15rem;
font-weight:100
}
}

.error404 h5 {
font-weight:300
}

.error h4 {
font-weight:400
}

#emaildiv {
height:450px;
border-radius:20px;
border:1px solid #000;
width:350px;
display:flex;
align-items:center;
justify-content:center;
background-color:#fff;
box-shadow:3px 6px 6px #00000028
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    display: none;
}

/* Firefox */
html {
    scrollbar-width: none;
}

/* IE / old Edge */
body {
    -ms-overflow-style: none;
}