*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* border: 1px solid red; */
}
.main{
    
    width: 100vw;
}

/* first-part//////////// */

.first-part{
    height: 100%;
    width: 100%;
    border: 2px solid green;
    background-color: lightcoral;
    padding: 40px 120px 40px 120px;
}
.content{
    height: 100%;
    width: 100%;
    /* border: 2px solid yellow; */
    padding: 0rem 7rem;
    
}
.header-content{
    display: flex;
    align-items: center;
}
.header{
    height: 20%;
    width: 100%;
    /* border: 2px solid blue; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
}

.header-content-part1 h1{
    text-align: start;
}
.header-icon{
    height: 100%;
    width: 20%;
    /* border:2px solid white; */
    display: flex;
    align-items: center;
}
.header-icon p{
    font-size: 45px;
    color: white;
    font-family: "Ubuntu", sans-serif;
}
.nav{
    height: 100%;
    /* width: 80%; */
    /* border: 2px solid greenyellow; */
    color: white;
    display: flex;
}
.nav-content{
    display: flex;
    justify-content: flex-end;
    list-style: none;
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
    gap: 90px;
    margin-right: 15px;
    align-items: center;
}
.header-content{
    height: 80%;
    width: 100%;
    /* border: 2px solid green; */
    display: flex;
}
.header-content-part1{
    height: 100%;
    width: 60%;
    /* border: 2px solid black; */
    color: white;
    font-size: 40px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
}
.header-content-part2{
    height: 100%;
    width: 40%;
    /* border: 2px solid blueviolet; */
}
.header-content-part2 .img{
    width: 65%;
    rotate: 23deg;
}

.button-container {
    display: flex;
    gap: 20px; /* Adjust spacing between buttons */
    /* justify-content: center; Centers buttons horizontally */
    align-items: center; /* Aligns them in the middle */
    margin-top: 20px; /* Adjust as needed */
}

.button1, .button2 {
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.button1 {
    background-color: black;
    color: white;
}

.button2 {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    
}

/* second-part////// */

.second-part{
    height: 70vh;
    width: 100vw;
    border: 2px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 60px 50px 60px;
}
.goal-content{
    height: 55%;
    width: 90%;
    /* border: 2px solid  green; */
    display: flex;
}
.goal1{
 height: 100%;
 width: 33%;
 /* border: 2px solid blue; */
 justify-content: center;
 align-items: center;
}
.goal1 h2{
    font-size: 40px;
    text-align: center;
    font-weight: bold;
}
.goal1 p{
    font-size: 20px;
    text-align: center;
    color: rgb(143, 143, 143);
    margin-top: 10px;
}
.icon{
    color: tomato;
    height: 30%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
}

/* <----------------thrid-part-----------> */
.thrid{
    height: 83vh;
    width:100vw ;
    border: 2px solid red;
    background-color: tomato;
}
.thrid-part1{
    height: 75%;
    width: 100%;
    display: flex;
    
}
.thrid-part2{
    height: 20%;
    width: 100%;
}
.thrid-part-content{
    height: 100%;
    width: 70%;
    color: white;
    
}
.name{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.name p{
    font-size: 20px;
}
.meeko{
    height: 20%;
    width: 10%;
    border-radius: 50%;
}
.arrow-part1{
    height: 100%;
    width:15% ;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: bold;
    color: white;
}
.arrow-part2{
    height: 100%;
    width:15% ;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: bold;
    color: white;
}
.thrid-part-content-heading{
    text-align: center;
    font-size: 60px;
    margin-top: 90px;
    font-family: Montserrat;
}
.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* border: 2px solid red; */
    transform: scale(0.8);
}
.logo img {
    width: 80%; /* Reduce the size of the images */
    height: auto; /* Maintain aspect ratio */
}
/* <---------------fourth-part----------> */
.fourth-part{
    height: 90vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fourth-part-main{
    height: 80%;
    width: 80%;
}
.fourth-part-main-1{
    height: 10%;
    width: 100%;
}
.fourth-part-main-1 h1{
    text-align: center;
    font-size: 53px;
    font-family: Montserrat ;
    font-weight: bold;
}
.fourth-part-main-2{
    height:5%;
    width: 100%;
    margin-top: 15px;
}
.fourth-part-main-2 p{
    text-align: center;
    font-size: 20px;
    
}
.fourth-part-main-3{
    height:79% ;
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.fourth-part-main-3-box1{
    height: 80%;
    width: 30%;
    border: 1px solid black;
    border-radius: 10px;
}
.box1-head{
    height: 15%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(250, 241, 247);
    border-radius:10px ;
}
.box1-content{
    height: 85%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box1-content-heading{
    height: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
.main-feature{
    height: 50%;
    width: 100%;
    font-size: 20px;
    text-align: center;
    
}
.feature{
    margin-top: 20px;
}
button{
    height: 15%;
    width: 80%;
    border-radius: 10px;

}
.fourth-part-main-3-box2{
    height: 80%;
    width: 30%;
    border: 1px solid black;
    border-radius: 10px;
}
.box2-head{
    height: 15%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(250, 241, 247);
    border-radius:10px ;
}
.box2-content{
    height: 85%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box2-content-heading{
    height: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
.fourth-part-main-3-box3{
    height: 90%;
    width: 30%;
    border: 1px solid black;
    border-radius: 10px;
}
.box3-head{
    height: 13%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(250, 241, 247);
    border-radius:10px ;
}
.box3-content{
    height: 85%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box3-content-heading{
    height: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
.box1-content-button{
    font-size: 20px;
}
/* <!-- <----------------fifth-part----------> */
.fifth-part{
    height:40vh ;
    width:100vw ;
    background-color: tomato;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.fifth-head{
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;    
}
.a1{
    display: flex;
    height: 30%;
    width: 25%;
    gap: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.box1-content-button1{
    height: 50%;
    font-weight: 800;
    background-color: black;
    color: white;
    font-size: 20px;
}
.box1-content-button2{
    height: 50%;
    font-weight: 800;
    font-size: 20px;
}
/* <!-- <----------------sixth-part----------> */
.sixth-part{
    height: 30vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.sixth-part-icon{
    height: 20%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon1{
height: 50%;
width: 5%;
gap: 0;
font-size: 20px;
color: black;
}
.f1 p{
    font-size: 20px;
}