*{
    color: aliceblue;
}
body{
    margin: 0%;
    padding: 0%;
    overflow-x: hidden;
}
.main{
    height: 100vh;
    width: 100%;
    display: block;
}
.header{
    position: sticky;
    background-color: rgba(240, 248, 255, 0.342);
    position: relative;
    height: 42px;
    z-index: 9;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    justify-content: center;
    align-items: center;
    border-bottom: black 0.1px solid;
}
.header .icon img{
    width:100%;
    height: 40px;
    padding: 2px;
}
.search{
    display: flex;
    align-content: center;
    justify-content: center;
}
.search form{
    border: black 1px solid;
    width: max-content;
    padding: 0px 2%;
    border-radius: 20px;
}
.search form input{
    color: aliceblue;
    background-color: inherit;
}
.search input{
    border-style:none;
}
.search input::placeholder{
    color: aliceblue;
}
.dropdown{
    display: inline;
}
.dropdown button{
    background-color: inherit;
    border: none;
}.dropdown button:hover{
    background-color: inherit;
    border: none;
}
.dropdown-toggle{
    color: whitesmoke;
}
.dropdown-toggle:hover{
    color: whitesmoke;
}
/* .drop{
    border: black 0.1px solid;
    position: absolute;
    right: 1%;
    width: max-content;
    margin: 20%;
    background-color: aliceblue;
} */


.menu a{
    text-decoration: none;
    color: initial;
}
.menu ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    margin: 0%;
    padding: 0%;
}
.menu .li1:hover{
    border-bottom: black solid;  
}
.menu .li2:hover{
    border-bottom: black solid;  
}
.menu .li3:hover{
    border-bottom: black solid;  
}
.menu{
    position: relative;
}
.menu button{
    background-color: inherit;
    border: none;
}
.menu .login{
    position: absolute;
    border: solid;
    top: 41px;
    right:5%;
    padding: 10px;
}
.login{
    display: none;
}
.login.active{
    display: block;
}
.login label{
    display: block;
}
.login input{
    width: 100%;
    color: black;
}
.login button{
    background-color: inherit;
    border-style: none;
    border-bottom:whitesmoke 0.1px solid;
    margin-bottom:1px;
}
/* <------------------------------------------------------------------------------------------------------------------> */
.body .img img{
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100vh;
    z-index: 1;
}
.body .black-screen{
    height: 100vh;
    position: absolute;
    top: 0%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.137);
    z-index: 2;
}
.body .text{
    position: absolute;
    z-index:8;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
}
h1{
    font-family: "UnifrakturMaguntia", cursive;
    font-weight: 900;
    font-style: normal;
    margin: auto;
    width: max-content;
    font-size: 400%;
    text-shadow: 2px 2px 5px black;
}
.body p{
    font-family: "Charm", cursive;
    font-weight: 700;
    font-style: normal;
    text-shadow: 2px 2px 5px black;
}

/* <------------------------------------------------------------------------------------------------------> */
.second *{
    color: black;
}

h2{
    font-family: "UnifrakturMaguntia", cursive;
    font-weight: 900;
    font-style: normal
}
/*
@keyframes journy {
    0%{left:-60%;}
    100%{
        left:50%;
        transform: translate(-50%);
    }
} */
.main1, .main2{
    background-color: black;
    padding: 1%;
}
.main1{
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin:  0%;
}
.main2{
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin: 2.5% 0%;
}
.second .main1 .small{
    
    width: 90%;
    box-shadow: 0px 0px 10px white;
}
.second .small{
    box-shadow: 0px 0px 10px white;
}
.second .large{
    width: 95%;
}
.second img{
    width: 100%;
    height: 100%;
}
.large *{
    color: aliceblue;
}
.second strong{
    font-family: "UnifrakturMaguntia", cursive;
    font-weight: 300;
    font-style: normal
}
.second{
    font-family: "Charm", cursive;
    font-weight: 300;
    font-style: normal;
}
/* <-------------------------------------------------------------------------------------------------> */
.third{
 margin: 0 2% 0% 2%;
}
.third *{
 color: black;
}
.third .slide{
display: grid;
grid-template-rows: 1fr 1fr;
box-shadow: 0px 0px 5px black;
margin: 2px;
cursor: pointer;
}
.slide img{
    height: 100%;
}
.third strong{
    font-family: "UnifrakturMaguntia", cursive;
    font-weight: 300;
    font-style: normal
}
.third .slide p{
    font-family: "Charm", cursive;
    font-weight: 300;
    font-style: normal;
}
/* <-----------------------------------------------------------------------------------------> */
.black{
    padding-top:1% ;
    background-color: black;
}
.Bold{
    color:aliceblue;
}
.slider{
    background-color: black;
    margin: 1% 10%;
}
.two_box{
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    
}
.img_box img{
    box-shadow: 0px 0px 5px black;
    border-radius: 50%;
    aspect-ratio: 3/3;
}
.img_box{
    padding: 2%;
    height: 100%;
}
.holder{
    margin-top:5% ;
    background-color: black;
    padding-bottom:1%;
}
/* <------------------------------------------------------------------------------------------------> */
.end{
    margin: 5% 0%;
}
.end p,.end h4,.end button{
    color: black;
}
.center{
    width: max-content;
    margin: auto;
}
.footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: black;
}
.footer .f1{
    display: grid;
    grid-template-rows:1fr 1fr 1fr;
    height: 100%;
    width: 100%;
} 
.footer .f1 img{
    height: 60%;
    width: 80%;
}
.footer .f1 .img{
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer .f1 p{
    margin: 0;
    padding: 0 5%;
}
.footer i{
    color: aliceblue;
    padding: 0 2%;
}
.footer .icon p{
    padding: 0;
}
dd{
    font-size:80%;
}
.print p{
    font-size: 80%;
}