@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Poppins;
    
}

html,body{
    width: 100%;
    height: 100%;
}

#main{
    width: 100%;
    height: 100%;
    background-color: #ac8b8b;
}

.page1{
    width: 100%;
    height: 100%;
    background-color: #efbbff;
}

.navbar{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #fff;
}

.nav1{
    width: 5.5%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #7a7070; */
}

.nav1>img{
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
}

.nav2{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* background-color: #baa3a3; */
}

.nav2>ul{
    display: flex;
    gap: 100px;
}

.nav2>ul>li{
    list-style: none;
}

.nav2>ul>li>a{
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    color: black;

}

.nav3{
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* background-color: #f59f9f; */
}

.nav3>li{
    list-style: none;
}

.nav3>li>a{
    text-decoration: none;
    font-weight: 400;
    color: black;
    text-transform: uppercase;
}

.btn1{
    padding: 6px 30px 6px 30px;
    border-radius: 40px;
    border: none;
    font-family: Poppins;
    cursor: pointer;
    background-color: #660066;
}

.hero-section{
    width: 100%;
    height: 30%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
    /* background-color: #bdc9a4; */
}

.hero-section>h1{
    text-transform: uppercase;
    font-size: 80px;
    color: black;
    line-height: 90px;
}

.card1{
    width: 100%;
    height: 57%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #50617a; */
}

.card1>img{
    width: 42%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.page2{
    width: 100%;
    height: 100%;
    background-color: 	#efbbff;
}

.content{
    width: 100%;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #660066;
    /* background-color: #e68181; */
}

.content>h5{
    color: black;
}

.box-earn{
    width: 100%;
    height: 36%;
    display: flex;
    align-items: center;
    margin-top: 40px;
    justify-content: space-evenly;
    /* background-color: #c19999; */
}

.box1{
    width: 26%;
    height: 100%;
    position: relative;
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
    border-radius: 10px;
    /* background-color: #c88bb1; */
}

.circle1{
    width: 24%;
    height: 28%;
    position: absolute;
    left: 38%;
    top: -30px;
    border-radius: 100%;
    background-image: url(e1.png);
    background-position: center;
    background-size: cover;

}

.box1>h2{
    text-transform: capitalize;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #660066;
    
}

p{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 200;
    font-size: 12.5px;
}


.box2{
    width: 26%;
    height: 100%;
    position: relative;
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
    border-radius: 10px;
    /* background-color: #c88bb1; */
}

.circle2{
    width: 24%;
    height: 28%;
    position: absolute;
    left: 38%;
    top: -30px;
    border-radius: 100%;
    background-image: url(e5.png);
    background-position: center;
    background-size: cover;
}

.box2>h2{
    text-transform: capitalize;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #660066;
}

p{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 200;
    font-size: 12.5px;
}

.box3{
    width: 26%;
    height: 100%;
    position: relative;
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
    border-radius: 10px;
    /* background-color: #c88bb1; */
}

.circle3{
    width: 24%;
    height: 28%;
    position: absolute;
    left: 38%;
    top: -30px;
    border-radius: 100%;
    background-image: url(e3.png);
    background-position: center;
    background-size: cover;
}

.box3>h2{
    text-transform: capitalize;
    margin-top: 10px;
    color: #660066;
    margin-bottom: 10px;
    
}

p{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 200;
    font-size: 12.5px;
}

.box-earn1{
    width: 100%;
    height: 36%;
    display: flex;
    align-items: center;
    margin-top: 40px;
    justify-content: space-evenly;
    /* background-color: #c19999; */
}

.box4{
    width: 26%;
    height: 100%;
    position: relative;
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
    border-radius: 10px;
    /* background-color: #c88bb1; */
}

.circle4{
    width: 24%;
    height: 28%;
    position: absolute;
    left: 38%;
    top: -30px;
    border-radius: 100%;
    background-image: url(e6.png);
    background-position: center;
    background-size: cover;

}

.box4>h2{
    text-transform: capitalize;
    margin-top: 10px;
    color: #660066;
    margin-bottom: 10px;
    
}

p{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 200;
    font-size: 12.5px;
}


.box5{
    width: 26%;
    height: 100%;
    position: relative;
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
    border-radius: 10px;
    /* background-color: #c88bb1; */
}

.circle5{
    width: 24%;
    height: 28%;
    position: absolute;
    left: 38%;
    top: -30px;
    border-radius: 100%;
    background-image: url(e4.jpg);
    background-position: center;
    background-size: cover;
}

.box5>h2{
    text-transform: capitalize;
    margin-top: 10px;
    color: #660066;
    margin-bottom: 10px;
    
}

p{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 200;
    font-size: 12.5px;
}

.box6{
    width: 26%;
    height: 100%;
    position: relative;
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
    border-radius: 10px;
}

.circle6{
    width: 24%;
    height: 28%;
    position: absolute;
    left: 38%;
    top: -30px;
    border-radius: 100%;
    background-image: url(e2.jpg);
    background-position: center;
    background-size: cover;
}

.box6>h2{
    text-transform: capitalize;
    margin-top: 10px;
    color: #660066;
    margin-bottom: 10px;
    
}

p{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 200;
    font-size: 12.5px;
}



.page3{
    width: 100%;
    height: 100%;
    background-color: #efbbff;
}

.box-offer{
    width: 100%;
    height: 70%;
    display: flex;
    margin-top: 10px;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
    gap: 10px;
    /* background-color: #893f3f; */
}

.box7{
    width: 22%;
    height: 100%;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
}
.card2{
    width: 100%;
    height: 45%;
    margin-bottom: 20px;
    background-image: url(e1.png);
    background-position: center;
    background-size: cover;
    border: none;
}
.box7>h1{
    font-size: 25px;
    margin-bottom: 10px;
    color: #660066;
    text-transform: capitalize;
    font-weight: 600;
}

.box7>p{
    font-size: 15px;
    text-align: center;
}

.box8{
    width: 22%;
    height: 100%;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
}

.card3{
    width: 100%;
    height: 45%;
    margin-bottom: 20px;
    background-image: url(e3.png);
    background-position: center;
    background-size: cover;
    border: none;
}

.box8>h1{
    font-size: 25px;
    margin-bottom: 10px;
    color: #660066;
    text-transform: capitalize;
    font-weight: 600;
}

.box8>p{
    font-size: 15px;
    text-align: center;
}



.box9{
    width: 22%;
    height: 100%;
    padding-left: 5px;
    border-radius: 5px;
    padding-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
}

.card4{
    width: 100%;
    height: 45%;
    margin-bottom: 20px;
    background-image: url(e4.jpg);
    background-position: center;
    background-size: cover;
    border: none;
}

.box9>h1{
    font-size: 25px;
    margin-bottom: 10px;
    color: #660066;
    text-transform: capitalize;
    font-weight: 600;
}

.box9>p{
    font-size: 15px;
    text-align: center;
}



.box10{
    width: 22%;
    height: 100%;
    padding-left: 5px;
    border-radius: 5px;
    padding-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #d896ff;
}


.card5{
    width: 100%;
    height: 45%;
    margin-bottom: 20px;
    background-image: url(e5.png);
    background-position: center;
    background-size: cover;
    border: none;
}

.box10>h1{
    font-size: 25px;
    margin-bottom: 10px;
    color: #660066;
    text-transform: capitalize;
    font-weight: 600;
}

.box10>p{
    font-size: 15px;
    text-align: center;
}

.horizontal{
    width: 100%;
    height: 9%;
    margin-top: 10px;
    background-color: 	#d481d4;
}


.page4{
    width: 100%;
    height: 100%;
    background-color: 	#efbbff;
}

.box-blog{
    width: 100%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    /* background-color: #bfdb8a; */
}

.box11{
    width: 43%;
    height: 100%;
    display: flex;
    padding: 2px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    background-color: #d896ff;
}

.card6{
    width: 40%;
    height: 100%;
    background-image: url(e1.png);
    background-position: center;
    background-size: cover;

}

.card7{
    width: 58%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 10px;
    /* background-color: #a87474; */
}

.card7>h2{
    text-transform: capitalize;
    font-size: 25px;
}

.parag{
    text-align: left;
}

.box12{
    width: 43%;
    height: 100%;
    display: flex;
    padding: 2px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    background-color: #d896ff;
}

.card8{
    width: 40%;
    height: 100%;
    background-image: url(e6.png);
    background-position: center;
    background-size: cover;

}

.card9{
    width: 58%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 10px;
    /* background-color: #a87474; */
}

.card9>h2{
    text-transform: capitalize;
    font-size: 25px;
}

.parag{
    text-align: left;
}

/* .horizontal-1{
    width: 100%;
    height: 10%;
    background-color: 	#800080;
    margin-top: 20px;
} */

.page5{
    width: 100%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    background-color: 	#efbbff;
}

.box13{
    width: 40%;
    height: 100%;
    background-image: url(12.jpg);
    background-position: center;
    background-size: cover;
}
.box14{
    width: 34%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: start;
    padding: 20px;
    
    flex-direction: column;
    background-color: #d896ff;
}

.box14>h1{
    font-size: 40px;
    margin-left: 100px;
    margin-top: 10px;
    color: #660066;
    margin-bottom: 15px;
}

label{
    font-size: 20px;
    font-weight: 500;
}

input{
    text-align: start;
    padding: 10px 100px;
    margin-top: 12px;
    margin-bottom: 12px;
    border-radius: 40px;
    border: none;
}

.page6{
    width: 100%;
    height: 100%;
    background-color:#efbbff;
}

.box15{
    width: 100%;
    height: 10%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: 	#800080;
}

.box15>h1{
    font-size: 20px;
}

.box16{
    width: 20%;
    height: 5%;
    margin-top: 20px;
    margin-left: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: 	#800080;
}

.box16>h6{
     font-size: 15px;
}

.box17{
    width: 80%;
    height: 20%;
    margin-top: 10px;
    margin-left: 70px;
    /* background-color: #874f78; */
}

.footer{
    width: 100%;
    height: 47%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 29px;
    background-color: #562c65;
}

.box18{
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: start;
    flex-direction: column;
    /* background-color: #fff; */
}

.circle-3{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 10px;
    margin-top: 15px;
    background-image: url(logo.png);
    background-position: center;
    background-size: cover;
}

.box18>h5{
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
}


.box19{
    width: 35%;
    height: 100%;
    /* background-color: #5c2f2f; */
}

.fot1{
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    /* background-color: #fff; */
}

.sm-fot1{
    width: 45%;
    height: 100%;
    padding: 2px;
    display: flex;
    font-weight: 550;
    align-items: center;
    justify-content: center;
    /* background-color: #8a8c14; */
}

.sm-fot1>ul>li{
    list-style: none;
    font-family: Poopins;
    margin-top: 15px;
    cursor: pointer;
    text-transform: capitalize;
}

.sm-fot1>ul{
    gap: 30px;
}

.sm-fot2{
    width: 45%;
    height: 100%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 550;
    /* background-color: #1c8c14; */
}

.sm-fot2>ul{
    gap: 30px;
}

.sm-fot2>ul>li{
    list-style: none;
    font-family: Poopins;
    font-size: 16px;
    margin-top: 15px;
    cursor: pointer;
    text-transform: capitalize;
}

.fot2{
    width: 100%;
    height: 40%;
    /* background-color: #0080ff; */
}


.sm-fot3{
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #5ac151; */
}

.sm-fot3>h4{
    font-weight: 400;
    text-transform: capitalize;
}

.sm-fot4{
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.sm-fot4 .fa-brands:hover{
    background-color: 	#800080;
    transition: 3px 0.4s step-start;
}




.footer2{
    width: 100%;
    height: 10%;
    /* margin-top: 29px; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #401e4d;
}

.footer2>h6{
      font-size: 15px;
      font-weight: 300;
}