@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Tilt+Neon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Boogaloo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Boogaloo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

body{
    overflow-x: hidden;
    scroll-behavior: smooth;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.navbar{
/* From https://css.glass */
background: rgba(68, 0, 255, 0.751);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10.1px);
-webkit-backdrop-filter: blur(10.1px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    width: 100%;
    height: 55px;
    padding: 10px;
    display: flex;
    justify-content: center;
    z-index: 100;
    align-items: center;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.253);
    -webkit-user-select: none; 
    -ms-user-select: none;
    user-select: none;
}
.link{
    display: flex;
    width: 33%;
    
    justify-content: center;
    align-items: center;
}
.link a{
    margin: auto;
    font-family: 'Fredoka One', cursive;
    font-weight: 900;
    font-size: 1.7vmax;
    color:#f4f4f3;
    text-shadow: black 2px 2px 2px;
}
.logo{
    width: 33%;
    display: flex;
    justify-content: center;
}
.logo img{
    width: 100%;
    max-width: 210px;

}
#top{
    height: calc(100vh - 55px);
    width: 100%;
    position: relative;
    -webkit-user-select: none; 
    -ms-user-select: none;
    user-select: none;
}
#pc_img{
    width: 100%;
    height: 100%;
    position: relative;
}
#pc_img::before{
    background-color: rgba(0, 0, 0, 0.45);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    
}
#pc_img img{
    width: 100%;
    height: 100%;
    image-rendering: crisp-edges;
    object-fit:cover;
    
}
.text{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    padding: 3vmax;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.09);
    border-radius: 16px;

    backdrop-filter: blur(1.9px);
    -webkit-backdrop-filter: blur(1.9px);
    z-index: 2;

}
.titlul{
    font-family: 'Fredoka One', cursive;
    font-size: 2.4vmax;
    font-weight: 900;
    text-shadow: black 4px 4px 4px;
    color: rgba(0, 148, 198, 1);
    animation: titlu 1s;
}
.text h1{
    padding: 10px;
}
.lista_oferte{
    padding: 20px;
    color:#e5eaf5;
    font-size: 2vmax;
    font-family: 'Boogaloo', cursive;
    text-shadow: black 3px 3px 3px;
    height: 100%;

}
.lista_oferte ul li{
    padding:.5vmax;
    
}
.lista_oferte ul li:nth-child(1){
    animation: l1 2s;
}
.lista_oferte ul li:nth-child(2){
    animation: l2 2.3s;
}
.lista_oferte ul li:nth-child(3){
    animation: l3 2.7s;
}
.lista_oferte ul li:nth-child(4){
    animation: l4 3s;
}
.lista_oferte ul li{
    animation: li 3.3s;
}
.banner{
    animation: banner 1s ease-in-out;
    background-image: url(image/blob.svg);
    background-position: center left;
    background-size: cover;
  
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    filter: drop-shadow(3px 3px 3px black);

}
.banner p{
    width: 60%;
    font-family: 'Boogaloo', cursive;
    font-size: 4vmax;
    color:#e5eaf5;
    text-shadow: black 2px 2px 2px;
    text-align: center;
}

@keyframes titlu{
    0%{
        opacity: 0;
        transform: translateX(-20px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes l1{
    0%{
        opacity: 0;
        transform: translateX(-20px);
    }
    50%{
        opacity: 0;
        transform: translateX(-20px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes l2{
    0%{
        opacity: 0;
        transform: translateX(-20px);
    }
    50%{
        opacity: 0;
        transform: translateX(-20px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes l3{
    0%{
        opacity: 0;
        transform: translateX(-20px);
    }
    50%{
        opacity: 0;
        transform: translateX(-20px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes l4{
    0%{
        opacity: 0;
        transform: translateX(-20px);
    }
    50%{
        opacity: 0;
        transform: translateX(-20px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes li{
    0%{
        opacity: 0;
        transform: translateX(-20px);
    }
    50%{
        opacity: 0;
        transform: translateX(-20px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes banner{
    0%{
        opacity: 0;
        transform: translateX(20px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@media(max-width: 1100px) {
    .text{
        grid-template-columns: 1fr;
    }
    .text_per{
        width: 100%;
        display: grid;
        justify-content: center;
        align-items: center;
        
    }
    .titlul{
        text-align: center;
        font-size: 4vmax;
    }
    .lista_oferte ul li{
        list-style:none;
        margin: auto;
        font-size: 2.3vmax;
        padding: 4%;
        text-align: center;
        
    }
    .banner{
        display: none;
    }
    .navbar{
        display: none;
    }
    #top{
        height: 100vh;
    }
}
#upper{
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 20px;
    width: 50px;
    height: 50px;
    z-index: 100;
    background: #097449;
    border-radius: 10px;
    box-shadow: black 3px 3px 3px;
    display: none;
}
#upper img{
    width: 100%;
}
#upper.active{
    display: block;
}
.middle{
    height: 100vh;
    
    position: relative;
    align-items: center;
    justify-content: center;
    display: grid;
    background: #f4f4f3;;
}
.carcasa{
    width: 90%;
    z-index: 3;
    height: 80%;
    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    background: rgba(75, 96, 237, 0.15);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.contact{
    height: 100vh;
    background:#3b444b;
}
.titlu_carcasa{
    padding: 20px;
    text-align: center;
    font-size: 4vmax;
    font-family: 'Lilita One', cursive;
    font-weight: 900;
    color: crimson;
    text-shadow: black 3px 3px 3px;
    -webkit-user-select: none; 
    -ms-user-select: none;
    user-select: none;
}
.cards{
    width: 100%;
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    -webkit-user-select: none; 
    -ms-user-select: none;
    user-select: none;
}
.card{
    width: 47%;
    text-align: center;
    margin: auto;
    padding: 20px;
background: rgba(251, 251, 251, 0.6);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8.5px);
border-radius: 20px;
-webkit-backdrop-filter: blur(8.5px);
font-family: 'Josefin Sans', sans-serif;
font-size: 1.5vmax;
font-weight: 800;
box-shadow: black 3px 3px 3px;
-webkit-user-select: none; 
-ms-user-select: none;
user-select: none;
}
.all{
    scroll-behavior:smooth;
}
html{
    scroll-behavior: smooth;
}
.top  .text{
    display: none;
}
.top.show  .text{
    display: grid;
}

.card:nth-child(1){
    animation: card1 1s ease-in-out;
}
.card:nth-child(2){
    animation: card2 2s ease-in-out;
}
.card:nth-child(3){
    animation: card3 3s ease-in-out;
}
.card:nth-child(4){
    animation: card4 4s ease-in-out;
}
.middle .carcasa{
    opacity: 0;
    transition: 1s all;
}
.middle .titlu_carcasa{
    transform: translateY(-20px);
    opacity: 0;
    transition: 1s all;
    
}
.middle.show .titlu_carcasa{
    transform: translateY(0px);
    opacity: 1;
}
.middle.show .carcasa{
    opacity: 1;
}
@keyframes card1 {
     0%{
        opacity: 0;
        transform: translateX(-20px);
     }
     100%{
        opacity: 1;
        transform: translateX(0px);
     }
}
@keyframes card2 {
    0%{
       opacity: 0;
       transform: translateX(20px);
    }
    50%{
        opacity: 0;
        transform: translateX(20px);
     }
    100%{
       opacity: 1;
       transform: translateX(0px);
    }
}
@keyframes card3 {
    0%{
       opacity: 0;
       transform: translateX(-20px);
       
    }
    50%{
        opacity: 0;
        transform: translateX(-20px);
     }
    100%{
       opacity: 1;
       transform: translateX(0px);
    }
}
@keyframes card4 {
    0%{
       opacity: 0;
       transform: translateX(20px);
    }
    50%{
        opacity: 0;
        transform: translateX(20px);
     }
    100%{
       opacity: 1;
       transform: translateX(0px);
    }
}
.cards .card{
    display: none;
}
.cards.show .card{
    display: flex;
}
.contact{
   display: grid;
   grid-template-rows: 1fr 2fr; 
   padding: 2%;
   ;
}
.contact_titlu{
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Fredoka One', cursive;
    font-size: 4vmax;
    font-weight: 900;
    text-shadow: black 4px 4px 4px;
    color: rgba(0, 148, 198, 1);

}
.modalitati{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(247, 247, 247, 0.72);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 20px;
animation: mod 1s ease-in-out;
}
.map{
    padding: 20px;
}
.map iframe{
    border-radius: 10px;
    filter: drop-shadow(3px 3px 3px black);
}
.informati{
 
    display: grid;
    justify-content: center;
    align-items: center;

}
.informati h1{
    text-align: center;
    font-size: 3.5vmax;
    font-family: 'Lilita One', cursive;
    font-weight: 900;
    color:cornflowerblue;
    text-shadow: black 2px 2px 2px;
}
.informati ul{
    text-align: center;
    list-style: none;

}
.informati ul li{
    padding: 10px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2vmax;
}
.informati ul li a{
    color: #097449;
    text-decoration: none;
}
.final_button{
    border: none;
    padding: 10px;
    background:rgba(0, 148, 198, 1);
    border-radius: 10px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 900;
    margin: 10px;
}

.contact .modalitati{
    display: none;
}
.contact.show .modalitati{
    display: grid;
}
@keyframes mod{
    0%{
        opacity: 0;
        transform: translateY(-20px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
@media(max-width: 1000px){
    .cards{
        display: flex;
        flex-direction: column;
    }
    .card{
        width: 90%;
        font-size: 1.9vmax;
    }
  
    .llll{
        display: none;
    }
    .middle{
        background-image: url("image/blob.svg"),url(image/blob\ \(1\).svg);
        background-position: top, bottom;
        background-repeat: no-repeat,no-repeat ;

    }
    #upper.active{
        display: none;
    }
   .modalitati{
    grid-template-columns: none;
    grid-template-rows: 1fr 1fr;
   }
   .final_button{
    margin: 10%;
   }
   .contact{
    grid-template-rows: 0.7fr 2.3fr; 
 }
}