* {
    margin: 0;
    padding: 0;
    border: border-box;
    text-decoration: none;
}

.top {
    height: 50px;
    width: 100%;
    background-image: url("/images/h17.jpeg");
    background-size: cover;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.top a {
    color: white;
    text-decoration: none;
}

.top2 {
    height: 80px;
    width: 100%;
    /* background-color: rgb(242, 232, 219); */
    background-size: cover;
    display: flex;
    text-align: center;
    align-items: center;
    flex-wrap: wrap;
}

#shape {
    margin-left: 150px;
    font-size: 1.8rem;
}

.shapetext {
    margin-left: 5px;
    font-size: 1.4rem;
    color: black;
}

.top2text {
    height: 30px;
    width: 150px;
    margin-left: 5px;
    border-radius: 30px;
    background-color: rgb(236, 236, 236);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    font-size: 1.1rem;
}

.text2 {
    color: rgb(47, 59, 112);
}

.name {
    margin-left: 250px;
    font-size: 1.1rem;
}

.name a {
    margin-left: 30px;
}

.top2 .name a:hover {
    color: rgb(232, 2, 41);
}

.log1 {
    height: 40px;
    width: 100px;
    margin-left: 30px;
    /* background-color: aqua; */
    font-size: 1.3rem;
    font-weight: 500;
    border-radius: 10px;
    border: 2px solid grey;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
}

.log2 {
    height: 40px;
    width: 150px;
    background-color: rgb(111, 94, 236);
    margin-left: 30px;
    font-size: 1.3rem;
    font-weight: 500;
    border-radius: 10px;
    border: 2px solid rgb(43, 0, 255);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
}

.log2 a {
    color: white;
}

.name a:hover {
    color: blue;
}

.log2:hover {
    background-color: rgb(26, 26, 195);
    border: 2px solid rgb(26, 26, 195);
}

.log1:hover a {
    color: blue;
}

.log1:hover {
    border: 2px solid blue;
}

.topcontent {
    display: flex;
    justify-content: space-evenly;
}

.contentleft {
    height: 500px;
    width: 40%;
    /* background-color: rgb(167, 192, 119); */
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
}

.credit {
    margin-top: 10px;
    color: gray;
}

.contentright {
    height: 500px;
    width: 50%;
    /* background-color: rgb(159, 210, 63); */
    background-image: url(/images/h2.jpg);
    background-size: cover;
}

.bold {
    font-size: 3rem;
    font-weight: 550;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-top: 130px;
}

.bold1 {
    margin-top: 15px;
    font-size: 1.5rem;
}

.log21 {
    height: 40px;
    width: 200px;
    background-color: rgb(111, 94, 236);
    margin-left: 30px;
    font-size: 1.3rem;
    font-weight: 500;
    border-radius: 10px;
    border: 2px solid rgb(43, 0, 255);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 50px;
    margin-left: 190px;
}

.log21 a {
    color: white;
}

.log21:hover {
    background-color: rgb(26, 26, 195);
    border: 2px solid rgb(26, 26, 195);
}

.text1 {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    margin-top: 30px;
}

.text1 a {
    font-size: 1.2rem;
}

.logo {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 20px;
}

.logo1 {
    height: 68px;
    width: 140px;
    background-color: chartreuse;
    background-image: url(/images/h3.png);
    background-size: cover;
}

.logo2 {
    height: 68px;
    width: 160px;
    background-color: rgb(82, 45, 202);
    background-image: url(/images/h4.png);
    background-size: cover;
}

.logo3 {
    height: 80px;
    width: 300px;
    background-color: rgb(202, 202, 37);
    background-image: url(/images/h5.png);
    background-size: cover;
}

.logo4 {
    height: 80px;
    width: 250px;
    background-color: rgb(224, 139, 27);
    background-image: url(/images/h6.png);
    background-size: cover;
}

.research {
    height: 800px;
    width: 95%;
    background-color: rgb(91, 167, 175);
    margin-left: 40px;
    margin-top: 50px;
    /* display: flow-root; */
    display: table;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    background-size: contain;
    background-image: url(/images/h30.jpg);
    background-size: cover;
}

.topic {
    font-size: 3rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 550;
    /* margin-top: 50px;    */
}

.feature {
    height: 50px;
    width: 200px;
    /* background-color: green; */
    border: 2px solid grey;
    margin-left: 590px;
    margin-top: 8px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 15px;
}

.feature a {
    color: rgb(0, 0, 0);
    font-size: 1.4rem;
}

#arrow {
    font-size: 1.2rem;
    margin-left: 5px;
}

.feature:hover {
    border: 2px solid blue;
}

.card {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.card1 {
    height: 300px;
    width: 400px;
    /* background-color: yellowgreen; */
    /* border: 2px solid black; */
}

.photo {

    height: 50px;
    width: 50px;
    /* background-color: gray; */
    margin-left: 175px;
    margin-top: 30px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
}

.data {
    margin-top: 20px;
}

#layer {
    font-size: 2.6rem;
    color: rgb(0, 255, 30);
}

#prototype {
    font-size: 2.6rem;
    color: rgb(251, 18, 201);
}

#click {
    font-size: 2.6rem;
    color: rgb(0, 225, 255);
    /* background-color: rgb(89, 71, 252); */
}

#help {
    font-size: 2.6rem;
    color: rgb(255, 191, 0);
}

#heart {
    font-size: 2.6rem;
    color: rgb(253, 25, 97);
}

#time {
    font-size: 2.6rem;
    color: rgb(154, 25, 253);
}

.detailhead {
    font-size: 2.2rem;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.detail {
    font-size: 1.7rem;
    margin-top: 10px;
}

.learn {
    height: 40px;
    width: 180px;
    border: 2px solid rgb(193, 193, 193);
    border-radius: 10px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    font-size: 1.3rem;
    margin-top: 15px;
    margin-left: 110px;

}

.learn:hover {
    border: 2px solid rgb(0, 174, 255);
}


.middle {
    height: 1550px;
    width: 75%;
    /* background-color: rgb(91, 167, 175); */
    margin-left: 190px;
    margin-top: 50px;
    /* display: flow-root; */
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    /* background-size: contain; */
    /* background-image: url(h30.jpg); */
    /* background-size: cover; */
}

.middletop1 {
    height: 490px;
    width: 45%;
    /* background-color: green; */
    /* border: 2px solid black; */
    background-image: url(/images/h13.png);
    background-size: cover;
}

.middletop2 {
    height: 490px;
    width: 40%;
    /* background-color: rgb(128, 124, 0); */
    /* border: 2px solid black; */

}

.profile {
    height: 50px;
    width: 300px;
    /* background-color: white; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    margin-top: 30px;
    margin-left: 70px;
}

.profile1 {
    height: 50px;
    width: 50px;
    border-radius: 50px;
    /* background-color: pink; */
    background-size: cover;

}

.head1 {
    margin-top: 50px;
    font-size: 1.4rem;
    font-weight: 550;
}

.headmain {
    font-size: 2.5rem;
    font-family: cursive;
    font-weight: 550;
}

.body1 {
    font-size: 1.3rem;
    margin-top: 15px;
}

.head2 {
    margin-top: 25px;
    font-size: 1.5rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: 550;
}

.body2 {
    margin-top: 10px;
    font-size: 1.3rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.plateform {
    margin-top: 50px;
    font-size: 3rem;
    text-align: center;
    font-weight: 600;
}

.log212 {
    height: 40px;
    width: 250px;
    background-color: #3c6fb7;
    margin-left: 30px;
    font-size: 1.3rem;
    font-weight: 500;
    border-radius: 10px;
    border: 2px solid rgb(43, 0, 255);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 25px;
    margin-left: 41%;
}

.log212 a {
    color: rgb(0, 0, 0);
    align-items: center;
    color: white;
}

.log212:hover {
    background-color: rgb(67, 5, 255);
}

.four {
    height: 380px;
    width: 90%;
    /* background-color: goldenrod; */
    margin-top: 45px;
    margin-left: 85px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
}

.part1 {
    height: 100%;
    width: 23%;
    /* background-color: blueviolet; */
    /* border: 2px solid black; */
    display: flex;
    align-items: flex-end;
    background-size: cover;
    transition: 0.5s;
}

.part1 p {
    font-size: 1.7rem;
    font-family: cursive;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

.part1:hover {
    /* transform: scale(1.01); */
    box-shadow: 4px 4px 8px rgb(45, 42, 42);
}

.bottomdark {
    height: 650px;
    width: 100%;
    background-color: rgb(30, 60, 79);
    margin-top: 30px;
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
}

.dark1 {
    height: 600px;
    width: 42%;
    /* background-color: green; */
    /* border: 2px solid black; */
}

.h2 {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
}

.h2main {
    color: white;
}

.h2data {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
}

.h1head {
    margin-top: 110px;

}

.dark1 .h1 {
    font-size: 2.2rem;
    font-family: cursive;
    font-weight: 550;
    color: white;
}

.p1d {
    margin-top: 20px;
}

.dark1 .p1 {
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: rgb(142, 188, 201);
}

.h2 {
    margin-top: 20px;
    font-size: 1.2rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.h2data {
    margin-top: 20px;
}

.h2data li {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 1.1rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.bottombutton {
    display: flex;
    text-align: center;
    /* justify-content: space-evenly; */
    align-items: center;
    margin-top: 30px;
    margin-left: 60px;
}

.calculator {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
    height: 40px;
    width: 250px;
    background-color: rgb(45, 97, 252);
    font-size: 1.3rem;
    border-radius: 10px;
    color: white;
}

.calculator:hover {
    background-color: blue;
}

.learnmore {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
    height: 40px;
    width: 150px;
    border: 2px solid rgb(214, 214, 225);
    font-size: 1.3rem;
    border-radius: 10px;
    margin-left: 30px;
}

.learnmore:hover {
    border: 2px solid rgb(255, 22, 100);
}

.or {
    font-size: 1.7rem;
    margin-left: 25px;
    color: white;
}

.try {
    color: white;
}

.dark1 {
    background-size: cover;
}

.trial {
    height: 450px;
    width: 100%;
    /* background-color: pink; */
    display: table;
    /* flex-wrap: wrap; */
    text-align: center;
    align-items: center;
    /* justify-content: space-evenly; */
}

.start {
    margin-top: 80px;
    font-size: 3.8rem;
    font-weight: 550;
}

.free {
    height: 40px;
    width: 180px;
    background-color: rgb(111, 94, 236);
    margin-left: 43.5%;
    font-size: 1.4rem;
    font-weight: 500;
    border-radius: 10px;
    border: 2px solid rgb(43, 0, 255);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 30px;
}

.free a {
    color: white;
}

.free:hover {
    background-color: blue;
}

.start1 {
    margin-top: 30px;
    font-size: 1.8rem;
}

.start1 p {
    margin-top: 5px;
    color: rgb(101, 101, 101);
}

.small {
    color: grey;
    margin-top: 5px;
}

.last {
    height: 370px;
    width: 100%;
    background-color: rgb(219, 226, 234);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
}

.ll {
    height: 350px;
    width: 24%;
    /* background-color: gray; */
    /* border: 2px solid black; */
}

.hub {
    font-size: 2rem;
    font-weight: 540;
}

#hub1 {
    margin-top: 35px;
}

.hub1 {
    margin-top: 35px;
    color: black;
}

.p1 {
    margin-top: 35px;
    font-size: 2rem;
}

.p12 {
    font-size: 1.3rem;
    margin-top: 10px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

}

.p12 a {
    color: rgb(121, 121, 121);
}

.p12 a:hover {
    color: blue;
}

.foot {
    height: 60px;
    width: 100%;
    background-color: #9db0ca;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
}

.foot a {
    font-size: 1.5rem;
    color: black;
}

.foot a:hover {
    color: rgb(21, 0, 255)
}