body{
    margin: 0;
    text-decoration: none;
}
@font-face {
    font-family: IRANYekan;
    src: url(fonts/BYekan/BYekan+\ Bold.ttf);
}
@font-face {
    font-family: B-Mitra;
    src: url(fonts/B-Mitra/B\ Mitra\ Bold_0.ttf);
    /* src: url(fonts/B-Mitra/B\ Mitra_0.ttf); */
}
@font-face {
    font-family: B-Lotus;
    src: url(fonts/B-Lotus/B\ Lotus\ Bold_0.ttf);
    /* src: url(fonts/B-Lotus/B\ Lotus_0.ttf); */
}
.top-header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    margin: auto;
    margin-bottom: 3%;
    background-color: whitesmoke;
}
.contact{
    width: 30%;
    height: 50px;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4% ;
    margin-right: 4% ;
}
.contact a{
    color: gray;
    font-size: 20px;
    font-family: B-Mitra;
    text-decoration: none;
    margin-left: 3%;
    padding: 1%;
    border-left: 1px solid lightgray
}
.contact i{
    color: gray;
    margin-left: 10px;

}
.contact-1{
    /* background-color: green; */
    width: 30%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-left: 2%; */
}
.contact-1 a{
    color: gray;
    font-size: 20px;
    font-family: B-Lotus;
    text-decoration: none;
    margin-left: 4%;
    padding: 1%;
    border-left: 1px solid lightgray;
}
.contact-1 i{
    color: gray;
    margin-left: 10px;

}
.bottom-header{
    /* background-color: red; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: auto;
    height: 50px;
    margin-bottom: 3%;
}
.logo{
    width: 15%;
    height: 50px;
    /* background-color: green; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 6%;
    margin-left: 2%;
}
.nav{
    width: 65%;
    height: 50px;
    /* background-color: blue; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.nav a{
    text-decoration: none;
    color: black;
    font-size: 20px;
    margin-left: 3%;
    font-family: B-mitra;
    position: relative;
    overflow: hidden;
    /* transition: 2s; */
}
.nav a::after{
    content: "";
    width: 100%;
    border: 1px solid green;
    /* height: 1px; */
    position: absolute;
    left: 100%;
    bottom: 0;
    transition: 1.5s;
}
.nav a:hover::after{
    left: 0;
}
.nav a::before{
    content: "";
    width: 100%;
    border: 1px solid green;
    /* height: 1px; */
    position: absolute;
    right: 100%;
    bottom: 0;
    transition: 1.5s;
}
.nav a:hover::before{
    right: 0;
}
.nav a:hover{
    color: darkgreen;
}
.nav i{
    font-size: 15px;
}
#test{
    color: green;
}
.icons{
    width: 15%;
    height: 50px;
    /* background-color: yellowgreen; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 6%;
}
.icons a{
    margin-right: 15%;
}
.icons i:hover{
    color: green;
}
.icons  i{
    font-size: 20px;
    color: black;
    margin-right: 3%;
}
.cover{
    background-image: url(online-img/background.png);
    background-color: lightblue;
    height: 600px;
    width: 100%;
    margin: auto;
    position: relative;
    margin-bottom: 5%;
}
@keyframes move{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(-50px);
    }
}
.aks-1{
    /* background-color: red; */
    width: 20%;
    height: 150px;
    position: absolute;
    top: 25%;
    left: 10%;
    animation-name: move;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.aks-2{
    /* background-color: red; */
    width: 20%;
    height: 150px;
    position: absolute;
    top: 20%;
    bottom: 10%;
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.aks-3{
    /* background-color: red; */
    width: 20%;
    height: 150px;
    position: absolute;
    top: 60%;
    bottom: 30%;
    right: 40%;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.text{
    /* background-color: red; */
    position: absolute;
    top: 30%;
    left: 40%;
    width: 40%;
    height: 250px;
    margin-right: 30%;
}
.text p{
    margin-right: 10%;
    font-family: B-mitra;
}
.text h1{
    margin-right: 10%;
    font-family: IRANYekan;
}
.text a{
    margin-right: 10%;
    display: inline-block;
    color: black;
    margin-left: 10%;
    border-radius: 40px;
    text-decoration: none;
    width: 15% ;
    height: 30px;
    border: 5px solid white;
    background-color: green;
    text-align: center;
    padding: 5px;
    font-size: 20px;
    font-family: B-mitra;
}
.text a:hover{
    background-color: purple;
}
.we a{
    margin-right: 10%;
    display: inline-block;
    color: black;
    margin-left: 1%;
    border-radius: 40px;
    width: 20% ;
    height: 30px;
    padding: 10px;
    border: 5px solid white;
    background-color: red;
    text-align: center; 
}
.three{
    width: 100%;
    margin: auto;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    flex-direction: row-reverse;
    margin-bottom: 5%;
}
.products-1:hover{
    transform: translateY(-10px);
    transition: 0.ss;
}
.products-2:hover{
    transform: translateY(-10px);
    transition: 0.ss;
}
.products-3:hover{
    transform: translateY(-10px);
    transition: 0.ss;
}
.products-1{
    width: 28%;
    height: 130px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px; 
    transition: 0.5s;
    background-color: wheat;
}
.products-2{
    width: 28%;
    height: 130px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius:5px;
    transition: 0.5s;
    background-color: wheat;
}
.products-3{
    width: 28%;
    height: 130px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px; 
    transition: 0.5s;
    background-color: wheat;
}
.pic{
    width: 45%;
    height: 130px;
}
.content{
    width: 55%;
    height: 130px;
}
.products-1 h2{
    margin-right: 7%;
    font-size: 20px;
    font-family: B-mitra;
}
.products-1 a{
    margin-right: 7%;
    font-size: 20px;
    text-decoration: none;
    color: gray;
}
.products-1 p{
    margin-right: 7%;
    font-size: 20px;
    color: gray;
}
.products-2 h2{
    margin-right: 7%;
    font-size: 20px;
    font-family: B-Mitra;
}
.products-2 a{
    margin-right: 7%;
    font-size: 20px;
    text-decoration: none;
    color: gray;
}
.products-2 p{
    margin-right: 7%;
    font-size: 20px;
    color: gray;
}
.products-3 h2{
    margin-right: 7%;
    font-size: 20px;
    font-family: B-Mitra;
}
.products-3 a{
    margin-right: 7%;
    font-size: 20px;
    text-decoration: none;
    color: gray;
}
.products-3 p{
    margin-right: 7%;
    font-size: 20px;
    color: gray;
}
.selection{
    background-color:  whitesmoke;
    width: 100%;
    height: 700px;
    margin: auto;
    position: relative;
    margin-bottom: 5%;
}
@keyframes bottom{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-50px);
    }
    100%{
        transform: translateY(-100px);
    }

 

}
.img{
    position: absolute;
    bottom: 0%;
    left: 10%;
    width: 50%;
    height: 350px;
    /* background-color: red; */
    animation-name: bottom;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    margin-left: 5%;
}
.img-7{
    position: absolute;
    top: 90%;
    /* right: 15%; */
    width: 99%;
    height: 100px;
    text-align: center;
}
.img-1{
    position: absolute;
    top: 0%;
    right: 5%;
    width: 20%;
    height: 300px;
}
.img-2{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 20%;
    height: 300px;
}
.img-3{
    position: absolute;
    top: 75%;
    right: 10%;
    width: 20%;
    height: 300px;
}
.img-4{
    position: absolute;
    top: 75%;
    left: 0%;
    width: 20%;
    height: 300px;
}
.img-5{
    position: absolute;
    top: 20%;
    right: 20%;
    width: 20%;
    height: 300px;
}
.img-6{
    position: absolute;
    top: 40%;
    right:70%;
    width: 20%;
    height: 300px;
}
.maten{
    /* background-color: red; */
    position: absolute;
    top: 10%;
    left: 30%;
    width: 40%;
    height: 250px;
    margin-right: 30%;
}
.maten p{
    margin-right: 10%;
    font-family: IRANYekan;
}
.maten h3{
    margin-right: 10%;
    font-family: B-Mitra;
    font-size: 30px;
    text-align: center;
}
.four{
     /* background-color: green; */
     position: absolute;
     top: 30%;
     left: 8%;
     width: 90%;
     height: 400px;
     margin-right: 5%;
     /* border: 1px solid gray; */
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 1%;
     flex-wrap: wrap;
     align-content: space-evenly;
     margin-bottom: 5%;
}
.tea{
    width: 30%;
    height: 150px;
    background-color: white;
    border-radius: 10px;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    margin-right: 7%;
    /* margin-left: 2%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tea:hover{
    border: 1px solid green;
    /* background-color: blue; */
}
.collection{
    background-color: green;
    border-radius: 50%;
    width: 20%;
    height: 65px;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-right: 5%;
    border: 4px solid gray;
}
.tittle{
    /* background-color: white; */
    width: 70%;
    height: 150px;
    display:flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
}
.tittle p{
    margin-right: 5%;
    font-family: IRANYekan;
    font-size: 12px;
    color: lightgray;
}
.tittle h4{
    margin-right: 5%;
    font-family: IRANYekan;
    font-size: 17px;
    color: lightgray;
}
.best-sale{
    width: 100%;
    margin: auto;
    height: 280px;
    text-align: center;
    /* display: flex;
    justify-content: center;
    align-items: flex-start; */
    position: relative;
}
.best-sale a{
    display: inline-block;
    text-decoration: none;
    margin-left: 0%;
}
.best-sale h5{
    font-size: 20px;
    font-family: IRANYekan;
}
.best-sale p{
    font-size: 18px;
    font-family: IRANYekan;
}
.best-sale span{
    display: inline-block;
    text-decoration: none;
    font-family: IRANYekan;
    font-size: 18px;
}
.best-sale a:hover{
    color: lightgreen;
}
.flower{
    position: absolute;
    top: 30%;
    right: 2%;
}
.fruits{
     /* background-color: green; */
     width: 85%;
     height: 600px;
     /* margin-right: 5%; */
     /* border: 1px solid gray; */
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin: auto;
     flex-wrap: wrap;
     align-content: space-evenly;
     margin-bottom: 5%;
}
.banana{
    width: 24%;
    height: 280px;
    /* background-color: red; */
    text-align: center;
    border-radius: 10px;
    border: 2px solid lightgray;
    position: relative;
}
.banana:hover{
    filter: brightness(95%);
}
.visible{
    position: absolute;
    right: 1%;
    /* background-color: lightgray; */
    width: 15%;
    bottom: 0%;
    height: 100px;
    transition: 2s;
}
.tree{
    position: absolute;
    left: 0%;
    /* background-color: red; */
    width: 15%;
    bottom: 0%;
    height: 31px;
    text-align: left;
    margin-right: 5%;
    
}
.corner{
    width: 60%;
    height: 80px;
    text-align: left;

}
.corner i{
    color: green;
    font-size: 30px;
}
.visible:hover{
    visibility: visible;
    transform: translateX(-20px);
}
.heart-1{
    background-color:  green;
    border-radius: 50%;
    width: 85%;
    height: 30px;
    text-align: center;
    display: inline-block;
    margin-bottom: 5%;
}
.heart-1 i{
    font-size: 18px;
    color: white;
    margin-top: 20%;
}
.heart-2{
    background-color:  green;
    border-radius: 50%;
    width: 85%;
    height: 30px;
    text-align: center;
    display: inline-block;
    margin-bottom: 5%;
}
.heart-2 i{
    font-size: 18px;
    color: white;
    margin-top: 20%;
}
.heart-3{
    background-color:  green;
    border-radius: 50%;
    width: 85%;
    height: 30px;
    text-align: center;
    display: inline-block;
}
.heart-3 i{
    font-size: 18px;
    color: white;
    margin-top: 20%;
}
.heart-1:hover{
    background-color: deeppink;
}
.heart-2:hover{
    background-color: deeppink;
}
.heart-3:hover{
    background-color: deeppink;
}
.banana p{
    background-color: green;
    position: absolute;
    bottom: 80%;
    left: 1%;
    width: 20%;
    height: 25px;
    font-size: 20px;
    padding: 5px;
    border-radius: 10px;
    color: white;
}
#unique{
    background-color: red;
    width: 15%;
}
.banana a{
    display: block;
    text-decoration: none;
    color: black;
    font-size: 18px;
    font-family: IRANYekan;
}
.banana img{
    border-radius: 10px;
}
.banana h6{
    font-size: 12px;
    font-family: IRANYekan;
    color: green;
    display: block;
}
.banana span{
    color: yellow;
    font-size: 10px;
}
.different-color i{
    color: lightgray;
}
.discount{
    background-color: lightblue;
    height: 550px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;
}
@keyframes top{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(-20px);
    }
}
.water{
    animation-name: top;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    position: absolute;
    left: 5%;
    top: 5%;
    width: 45%;
    height: 500px;
    margin: auto;
    text-align: center;
}
.all{
    /* background-color: white; */
    /* border: 2px solid gray; */
    position: absolute;
    width: 35%;
    height: 400px;
    left: 45%;
    top: 15%;
    right: 5%;
    margin: auto;
    /* margin-left: 40%; */
}
.all a{
    color: white;
    background-color: green;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-family: IRANYekan;
    width: 80%;
    height: 40px;
    /* margin-right: 20%; */
    border: 5px solid gray;
    padding: 10px;
}
.all p{
    font-size: 20px;
    font-family: B-Mitra;
}
.all h1{
    font-size: 35px;
    margin-right: 20%;
    font-family: B-Mitra;
}
.all span{
    display: block;
    font-size: 50px;
    margin-bottom: 5%;
    font-family: B-Mitra;
}
.leaf-1{
    position: absolute;
    right: 0%;
    top: 0%;
    width: 30%;
    height: 200px;
}
.leaf-2{
    position: absolute;
    left: 0%;
    top: 70%;
    width: 30%;
    height: 200px;
    /* background-color: yellow; */
    text-align: left;
}
@keyframes round{
    from{
        transform: scale(0);
    }
    to{
        transform: scale(1);
    }
}
.round-1{
    width: 450px;
    height: 450px;
    background-color: lightblue;
    border: 2px solid graye;
     border-radius: 50%;
    animation-name: round;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-iteration-count: infinite;  
     display: flex;
     justify-content: center;
     align-items: center;
}
.round-2{
    width: 350px;
    height: 350px;
    background-color: lightblue;
    border: 2px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    animation-name: round;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-iteration-count: infinite; 
}
.round-3{
    width: 250px;
    height: 250px;
    background-color: lightblue;
    border: 2px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    animation-name: round;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-iteration-count: infinite; 
}
.round-4{
    width: 150px;
    height: 150px;
    background-color: lightblue;
    border: 2px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    animation-name: round;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-iteration-count: infinite; 
}
.round-5{
    width: 50px;
    height: 50px;
    background-color: lightblue;
    border: 2px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    animation-name: round;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-iteration-count: infinite; 
}
.special-pro{
    width: 100%;
    height: 50px;
    text-align: right;
    font-size: 30px;
    /* margin-bottom: 2%; */
}
.special-pro h3{
    margin-right: 5%;
    font-family: B-Mitra;
    font-size: 25px;
}
.lorem{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5%;
}
.para{
    width: 60%;
    height: 50px;
    display: flex;
    align-items: center;
}
.para P{
    font-size: 18px;
    margin-right: 8%;
    font-family: IRANYekan;
}
.communication{
    width: 40%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.communication a{
    font-size: 40px;
    margin-left: 5%;
    color: black;
}
.ten{
    /* background-color: blue; */
    height: 500px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2% 2%;
    align-content: flex-start ;
}
.long{
    /* background-color: red; */
    width: 27%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    height: 135px;
    gap: 1%;
    border-radius: 10px;
    border: 1px solid gray;
    position: relative;
}
.vision1{
    width: 50%;
    height: 50px;
    position: absolute;
    top: 75%;
    left: 20%;
    border-radius: 10px;
    font-size: 20px;
    display: inline;
    transition: 2s;
}
.vision1 a{
    color: deeppink;
    visibility: hidden;
    transition: 2s;
}
.vision1:hover a{
    visibility: visible;
}
.vision1:hover{
    transform: translateX(-20px);
}
.apple-1{
    /* background-color: whitesmoke; */
    width: 50%;
    height: 130px;
    /* display: flex;
    justify-content: center;
    align-items: flex-start;
    border: 1px solid gray;
    display: block; */
}

.apple-1 span{
    font-size: 10px;
    margin-right: 5%;
    color: yellow;
}
.apple-1 p{
    font-size: 20px;
    margin-right: 5%;
    font-family: IRANYekan;
}
.apple-1 a{
    text-decoration: none;
    color: black;
}
.apple-1 p:hover{
    color: green;
}
.apple-1 h6{
    font-size: 10px;
    margin-right: 5%;
    font-family: IRANYekan;
}
.apple-2{
    /* background-color: green; */
    width: 48%;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.apple-2 img{
    border-radius: 10px;
}
.customer{
    background-color: lightgray;
    width: 100%;
    height: 475px;
    text-align: center;
    position: relative;
    margin-bottom: 5%;
}
.people{
    position: absolute;
    top: 46%;
    right: 10%;
    left: 30%;
    width: 80%;
    height: 200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* margin-left: 10%; */
    /* border: 2px solid red; */
    /* margin: auto; */
}
.people .designer p{
    font-size: 15px;
}
.people .designer h6{
    font-size: 20px;
    margin-top: 5%;
}
.people .designer span{
    font-size: 18px;
    color: green;
}
.designer{
    background-color: white;
    width: 32%;
    height: 200px;
    border-radius: 10px;
    position: relative;
    border: 2px solid gray;
}
.employ{
    position: absolute;
    right: 35%;
    left: 50%;
    top: 85%;
    border: 2px solid gray;
    border-radius: 50%;
    background-color: green;
    width: 80px;
    height: 80px;
}
.employ img{
    border-radius: 50%;
}
.customer h2{
    font-size: 25px;
    font-family: IRANYekan;
}
.customer p{
    font-size: 15px;
    font-family: IRANYekan;
}
@keyframes rotate{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(-20px);
    }
}
div.image{
    /* background-color: red; */
    animation-name: rotate;
    animation-timing-function: linear;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width: 40%;
    height: 250px;
    position:absolute; 
    /* border-radius: 10px; */
    top: 5%;
    right: 0%;  
    text-align: right;
    transform: rotate(180deg); 
}
.image img{
    border-radius: 50%;
}
.news{
    width: 100%;
    height: 460px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1%;
    overflow: hidden;
    margin-bottom: 5%;
}
.manager{
    background-color: white;
    width: 25.7%;
    height: 450px;
    /* display: flex; */
    justify-content: center;
    border-radius: 15px;
    position: relative;
    border: 2px solid gray;
    overflow: hidden;
}
.manager a{
    text-decoration: none;
    display: block;
}
.glass{
    background-color: green;
    width: 100%;
    height: 200px;
    transition: 2s;
    overflow: hidden;
}
.hide{
    overflow: hidden;
    width: 100%;
    height: 200px;
}
.glass img{
    transition: 2s;
}
.glass:hover img{
    transform: scale(1.2);
}
.talk{
    /* background-color: red; */
    width: 100%;
    height: 275px;
    /* overflow: hidden; */
}
.talk a{
    display: inline-block;
    font-size: 20px;
    color:  gray;
    margin-right: 5%;
    transition: 1s;
}
.talk a:hover{
    color: green;
}
.talk a svg{
    vertical-align: middle;
}
.talk h5{
    font-size: 18px;
    margin-right: 5%;
}
.talk h5:hover{
    color: green;
}
.talk p{
    font-size: 17px;
    margin-right: 5%;
}
.life{
    /* background-color: red; */
    width: 100%;
    height: 150px;
    text-align: center;
}
.life .shared{
    font-size: 25px;
    font-family: IRANYekan;
}
.life P{
    font-size: 15px;
    font-family: IRANYekan;
}
.companies{
    /* background-color: green; */
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;
}
.comp-logos{
    /* background-color: tomato; */
    width: 18%;
    height: 180px;
}
.newsletter{
    background-color: lightblue;
    width: 100%;
    height: 250px;
    position: relative;
    margin-bottom: 5%;
}
.newsletter h6{
    text-align: center;
    font-size: 25px;
    font-family: IRANYekan;
}
.newsletter p{
    text-align: center;
    font-size: 15px;
    font-family: IRANYekan;
}
@keyframes movement{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(-40px);
    }
}
.newsletter a{
    text-align: right;
    font-size: 20px;
    text-decoration: none;
    background-color: white;
    padding: 5px;
    border-radius: 20px;
    width: 30%;
    height: 30px;
    margin-right: 27%;
    margin-top: 4%;
    display: block;
    color: gray;
}
.newsletter img{
    position: absolute;
    top: 15%;
    right: 1%;
    /* background-color: blue; */
    width: 25% ;
    height: 200px;
    animation-name: movement;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
}
.footer{
    background-color: white;
    width: 100%;
    height: 470px;
    position: relative;
}
/* @keyframes move-up{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(-30px);
    }
} */

.information{
    background-color: white;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1%;
}
.insta-1{
    width: 32%;
    height: 400px ;
    /* background-color: yellow; */
    border-radius: 10px;
    /* border: 2px solid gray; */
}
.insta-1 img{
    margin-right: 5%;
}
.insta-1 p{
    margin-right: 5%;
    font-size: 15px;
    font-family: IRANYekan;
    color: gray;
}
.insta-1 a{
    display: block;
    margin-right: 5%;
    margin-bottom: 2%;
    text-decoration: none;
    font-size: 20px;
    color: gray;
}
.address-1{
    /* background-color: green; */
    width: 100%;
    height: 40px;
    text-align: right;
}
.address-1 a{
    font-size: 15px;
    font-family: B-Mitra;
}
.address-2 a{
    font-size: 15px;
    font-family: B-Mitra;
}
.address-3 a{
    font-size: 15px;
    font-family: B-Mitra;
}
.address-1 svg{
    margin-left: 5%;
}
.address-2{
    width: 100%;
    height: 40px;
    text-align: right;
}
.address-2 svg{
    margin-left: 5%;
}
.address-3{
    width: 100%;
    height: 40px;
    text-align: right;
}
.address-3 svg{
    margin-left: 5%;
}
.insta-2{
    width: 18%;
    height: 400px ;
    /* background-color: blue; */
    border-radius: 10px;
    /* border: 2px solid gray; */
}
.insta-2 h1{
    font-size: 25px;
    font-family: IRANYekan;
}
.insta-2 a{
    display: block;
    text-decoration: none;
    margin-top: 20px;
    color: gray;
    font-size: 15px;
    font-family: B-Mitra;
}
.insta-2 a:hover{
    color: green;
}
.insta-3{
    width: 18%;
    height: 400px ;
    /* background-color: gray; */
    border-radius: 10px;
    /* border: 2px solid gray; */
}
.insta-3 h1{
    font-size: 25px;
    font-family: IRANYekan;
}
.insta-3 a{
    display: block;
    text-decoration: none;
    margin-top: 20px;
    color: gray;
    font-size: 15px;
    font-family: B-Mitra;
}
.insta-3 a:hover{
    color: green;
}
.insta-4{
    width: 32%;
    height: 400px ;
    /* background-color: purple; */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 1%;
    display: block;
    border-radius: 10px;
    /* border: 2px solid gray; */
}
.insta-4 h1{
    font-size: 25px;
    font-family: IRANYekan;
}
.ads{
    width: 22.3%;
    height: 100px;
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start ;
    border-radius: 10px;
    transition: 1s;
    overflow: hidden;
    display: inline-block;
}
.ads img{
    border-radius: 10px;
    transition: 1s;
}
.ads:hover img{
    transform: scale(1.2);
    filter: brightness(70%);
}