*{
    margin: 0%;
    padding: 0%;
}
 /* header */

.ads{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(65, 65, 65);
}
.ads2{
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(65, 65, 65);
    }
.c0{
    width: 100%;
    height: 25px;
    display: flex;
}
.e1{
    width: 25%;
    height: 25px;
    display: flex;
    justify-content: left;
    align-items: center;
}
.f1{
    width: 100%;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: blue;
}
.e2{
    width: 25%;
    height: 25px;
    display: flex;
    justify-content: right;
    align-items: center;
}
/* main */

.m1{
    width: 100%;
    height: 100%;
}
.c1{
    width: 100%;
    height: 100%;
    background-color:rgb(184, 180, 180);
}
.d1{
    width: 100%;
    height: 300px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.images{
    width: 210px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.g1{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
}
.i1{
    width: 100%;
    height: 100%;
    background-color:white;
}
.i101{
    width: 100%;
    height: 100%;
    color: brown;
}
.i2{
    width: 100%;
    height: 100%;
    background-color:white;
}
.i102{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    color: rgb(104, 88, 1);
}
.i3{
    width: 100%;
    height: 100%;
    background-color:white;
}
.i103{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    color: blue;
}
.i4{
    width: 100%;
    height: 100%;
    background-color:white;
}
.i104{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    color: rgb(183, 5, 5);
}
.i5{
    width: 100%;
    height: 100%;
    background-color:white;
}
.i105{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    color: rgb(132, 0, 255);
}
.i6{
    width: 100%;
    height: 100%;
    background-color:white;
}
.i106{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    color: blue;
}
.i7{
    width: 100%;
    height: 100%;
    background-color:white;
}
.i107{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    color: brown;
}
.i8{
    width: 100%;
    height: 100%;
    background-color:white;
    color: rgb(255, 0, 183);
}
.i108{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    color: rgb(247, 0, 0);
}
.i9{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: rgb(190, 250, 250);
    color: black;
}
.i10{
    width: 100%;
    height: 50px;
    background-color:white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.i10 a{
    text-decoration: none;
}
.i11{
    width: 100%;
    height: 100%;
    background-color: rgb(190, 250, 250);
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}
.i1010{
    width: 250px;
    height: 35px;
    background-color: rgb(0, 252, 164);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px ;
    color: rgb(0, 0, 0);
}
.i10101{
    width: 250px;
    height: 35px;
    background-color: rgb(78, 78, 243);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px ;
    color: rgb(0, 0, 0);
}
.i101010{
    width: 250px;
    height: 35px;
    background-color:  rgb(255, 0, 212);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px ;
    color: rgb(0, 0, 0);
}

.i12{
    width:100%;
    height: 351px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.l1{
    width: 350px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
} 
/* footer */
.openbtn{
    width:27%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: left;
}

button.openbtn{
    color: rgb(236, 145, 0);
}

.logo {
    width: 48%;
    height: 50px;
    font-size: 12px;
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.logo .logo-1{
    height: 50px;
    font-size: 12px;
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
   .logofont{
        color: rgb(255, 255, 255);
    }
    .logofont1{
        color: rgb(236, 145, 0);
    }

.logo2{
    width: 70%;
    height: 50px;
    display: flex;
}
.logos {
    width: 50%;
    height: 50px;
    font-size: 12px;
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.logos .logos-1{
    height: 50px;
    font-size: 12px;
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.logo3{
    width: 40%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: left;
}

  .logofonts{
        color: rgb(255, 255, 255);
    }
    .logofonts1{
        color: rgb(236, 145, 0);
    }
.closebtn i{
    color: rgb(236, 145, 0);
}

.search-container{
    height: 50px;
    width: 100%;
    background-color: black;
    display: flex;
}
.cancel-btn i{
    color: red;
}
.a1{
    width: 100%;
    height: 10px;
    background-color: black;
}
.r1 a{
    margin-bottom: 2px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    text-decoration: none;
}
.r1:hover{
    box-shadow: 1px 1px 20px rgb(236, 145, 0);
    filter: drop-shadow(1px 1px 20px rgb(236, 145, 0));
}

.z1{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: rgb(236, 145, 0);
}
h6:hover{
    box-shadow: 1px 1px 20px rgb(0, 252, 164);
    filter: drop-shadow(1px 1px 20px rgb(0, 252, 164));
}
.i1010:hover:hover{
    box-shadow: 1px 1px 20px rgb(0, 252, 164);
    filter: drop-shadow(1px 1px 20px rgb(0, 252, 164));
}
.i10101:hover:hover{
    box-shadow: 1px 1px 20px rgb(78, 78, 243);;
    filter: drop-shadow(1px 1px 20px rgb(78, 78, 243));
}
.i101010:hover:hover{
    box-shadow: 1px 1px 20px rgb(255, 0, 212);
    filter: drop-shadow(1px 1px 20px rgb(255, 0, 212));
}

.easy{
    height: 100%;
    font-size: 20px;
    color: rgb(236, 145, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}
.easy2{
    height: 100%;
    font-size: 20px;
    color: rgb(236, 145, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}
.easy3{
    height: 30px;
    font-size: 20px;
    color: rgb(236, 145, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}