*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all linear 1.5s;
}
body{
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: black;
}
.containar{
    width: 100%;
    height: 400vh;
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-direction: column; 
}
.box{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
header{
    width: 100%;
    height: 10%;
    border: 3px groove gold;
    display: flex;
    justify-content: center;
    align-items: center ;
    background: black;
}
.ul{
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#but{
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px groove white;
    background: linear-gradient(to right bottom,gold, transparent,rgba(133, 115, 75, 0.646));
    color: gold;
    font-family: cursive;
    animation: anun 2.5s linear infinite;
    list-style-type: none;
    box-shadow: 0px 0px 15px 1px gold;
    cursor: pointer;
}
@keyframes anun {
    0%,100%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
        color:white;
        box-shadow: 0px 0px 15px 1px white;
        border: 1px groove gold;
    }

}
main{
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('1.jpg');
    background-size: cover;
    background-position: 100% 30%;
    background-repeat: no-repeat;
    flex-direction: column;
}
aside{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
}
input{
    width: 400px;
    height: 40px;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.386);
    border: none;
    box-shadow: 0px  0px 25px 3px wheat;
    color: wheat;
    font-style: italic;
    font-family: cursive;
    text-shadow: 0px 0px 15px wheat;
    font-size: 27px;
    text-align: center;
}
#result{
    width: 400px;
    height: 40px;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.386);
    border: none;
    box-shadow: 0px  0px 25px 3px wheat;
    color: rgb(255, 136, 0);
    font-style: italic;
    font-family: cursive;
    text-shadow: 0px 0px 15px wheat;
    font-size: 27px;
    animation: anun1 2.5s linear infinite;
    text-align: center;
}
@keyframes anun1 {
    0%,100%{
        transform: scale(1.1);
    }
    50%{
        transform: scale(1);
    }
}   
.p{
    font-size: 40px;
    color: wheat;
    text-shadow: 0px 0px 15px wheat;
    position: absolute;
    top: 530px;
    left:  32%;
    animation: anun2 4s linear infinite;
}
.pc{
    font-size: 40px;
    color: wheat;
    text-shadow: 0px 0px 15px wheat;
    position: absolute;
    top: 470px;
    left:  40%;
    font-style: italic;
}
@keyframes anun2 {
    0%,100%{
        transform: scale(1.2) rotate(180deg);
    }
    50%{
        transform: scale(1) rotate(180deg);
        text-shadow: 0px 0px 15px red;
    } 
}
.s1{
    top: 640px;
}

section{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
nav{
    margin-top: 100px;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: transparent;
}
.slider{
    width: 500px;
    height: 300px;
    border: 1px solid;
    background-image: url("2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 1.5s ease-in-out;
}
.button1{
    background-color: rgba(0, 0, 0, 0.647);
    color: tan;
    font-size: 25px;
    font-family: cursive;
    padding: 7px 15px;
    border-radius: 25px;
    border: 4px groove tan;
    cursor: pointer;
    position: absolute;
    /* animation: anun 3s infinite linear; */
}
#left{
    left: 350px;
    top: 350px;
}
#right{
    top: 350px;
    right: 350px;
} 

/* 2rd tox */
.box2{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url('img1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -100% -100%;
    transition: 1.5s all ease-in-out;
}
.box2:hover{
    background-position: 100% 100%; 
}
.px{
    width: 70%;
    height: 20%;
}
.span{
    color: white;
    position: relative;
    z-index: -10;
    font-size: 50px;
    font-weight: 100;
    font-style: italic;
    text-shadow: 0px 0px 5px whitesmoke;
    left: 40%;
    top: -70px;
    animation: span 4s infinite linear;
}
@keyframes span {
    0%,100%{
        font-size: 50px;
    }
    50%{
        text-shadow: 0px 0px 25px whitesmoke ;
        font-size: 45px;
    }
}
.center{
    width: 70%;
    height: 70%;
}
.box2_top{
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box2_line{
    width: 25%;
    height: 100%;
    border-radius: 55px 15px 55px 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(to right bottom,#111a2b,transparent,#5f507b,#547cb7);
    animation: k 4s linear infinite;
}
@keyframes k {
    0%,100%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
        box-shadow: 0px 0px 25px 3px #ccd1d9;
    }
}
h2{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    padding-top: 15px;
    font-style: italic;
    font-size: 31px;
    text-shadow: 0px 0px 5px whitesmoke;
    font-weight: bold;
}
.box2_p{
    font-weight: 100;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    padding-top: 15px;
    font-style: italic;
    font-size: 12px;
    color: #ccd1d9;

}
.box2_but{
   padding: 7px 15px;
   border: 3px  groove whitesmoke;
   border-radius: 7px;
   background: transparent; 
   color: #111a2b;
   font-size: 25px;
   text-shadow: 0px 0px 5px whitesmoke;
   box-shadow: 0px 0px 25px #547cb7;
   cursor: pointer;
}

/* 3_rd */

.box3{
    width: 100%;
    height: 100vh;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.box3_slider{
    width: 100%;
    height: 100%;
    margin-left: -3000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav{
    width: 95%;
    height: 95%;
    perspective: 1000px;
    background: black;
}
.items{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0px 0px 150px 10px rgb(252, 6, 6);
    animation: nav 3s linear infinite;
    background: rgba(44, 18, 18, 0.1);
}
@keyframes nav {
    50%{
        background: rgba(0, 0, 255, 0.1);
        box-shadow: inset 0px 0px 150px 10px blue; 
    }
}

.headers{
    width: 8.9%;
    height: 100%;
    transform: rotateY(0deg);
    cursor: pointer;
    white-space: nowrap;
    filter: contrast(120%) brightness(150%);
}
.a1{
    background-position: 5% 100%;
    background-size: cover;
    background-image: url("1.jpeg");
}
.a2{
    background-position: 14% 100%;
    background-size: cover;
    background-image: url("1.jpeg");
}
.a3{
    background-position: 22.7% 100%;
    background-size: cover;
    background-image: url("1.jpeg");
}
.a4{
    background-position: 31.3% 100%;
    background-size: cover;
    background-image: url('1.jpeg');
}
.a5{
    background-position: 39.8% 100%;
    background-size: cover;
    background-image: url('1.jpeg');
}
.a6{
    background-position: 48.3% 100%;
    background-size: cover;
    background-image: url('1.jpeg');
}
.a7{
    background-position: 56.5% 100%;
    background-size: cover;
    background-image: url('1.jpeg');
}
.a8{
    background-position: 65.2% 100%;
    background-size: cover;
    background-image: url('1.jpeg');
}
.a9{
    background-position: 73.6% 100%;
    background-size: cover;
    background-image: url('1.jpeg');
}
.a10{
    background-position: 84% 100%;
    background-size: cover;
    background-image: url('1.jpeg');
}
.a11{
    background-position: 92.4% 100%;
    background-size: cover;
    background-image: url('1.jpeg');
}
.a12{
    background-position: 100% 100%;
    background-size: cover;
    background-image: url('1.jpeg');
}

/* 4-rd */
.box4{
    width: 100%;
    height: 100vh;
    border: 1px solid;
    background-image: url('10.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}
.box4_center{
    width: 80%;
    height: 60%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    transform-style: preserve-3d;
}
.box4_item{
    width: 33.3%;
    height: 100%;
    border: 1px solid white;
    text-align: center;
    opacity: 0;
    transform: rotateY(180deg);
    font-size: 21px;
    font-family: cursive;
    font-style: italic;
    font-weight: 100;
    color: white;
    padding-top: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 0px 0px black;
}