* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
}


/***********************************************************/

.top {
    /* background: linear-gradient(135deg, #23F7E1 0%, #8494FF 100%); */
    padding: 25px;
    height: 77vh;
}

.first {
    background-image: url("bg1.png");
    background-repeat: no-repeat;
    background-size: 100% 75vh;
}

.l1 {
    padding-top: 30px;
    width: 700px;
}

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

.l1t1 p {
    color: #474F85;
    font-size: 50px;
    font-weight: bold;
}

.l1t2 p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #5f6779;
    padding: 5px;
}

button {
    margin: 15px;
}

.about {
    display: flex;
    justify-content: space-evenly;
    background-color: #EFF7FF;
    padding: 80px;
    flex-wrap: wrap;
}

.l2 {
    width: 500px;
}

.l2 h3 {
    padding-top: 15px;
    color: #475677;
    font-family: Poppins;
    font-style: normal;
    font-weight: 300;
    font-size: 38px;
    line-height: 57px;
}

.l2 p {
    font-family: Rubik;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 24px;
    color: #7D8597;
}

.r2 img {
    width: 680px;
    height: 510px;
}

.click {
    padding-top: 20px;
}

.btn {
    background-color: #3B4A73;
    border: none;
    color: white;
    padding: 15px;
    width: 200px;
    border-radius: 40px 40px 40px 40px;
}

#top-image{
    width: 700px;
  
}
/*********************************************************************/

.numbers {
    background-color: #D6DDE7;
    padding: 100px;
}

.n1 {
    text-align: center;
}

.n1 h1 {
    color: #475677;
    box-sizing: border-box;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 72px;
}

.n1 p {
    font-family: Rubik;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 18px;
    /* identical to box height */
    color: #7D8597;
}

.n2 {
    display: flex;
    justify-content: space-evenly;
    padding-top: 100px;
    flex-wrap: wrap;
}

.n21 h1 {
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    line-height: 60px;
    /* identical to box height */
    color: #2680EB;
}

.n22 h1 {
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    line-height: 60px;
    /* identical to box height */
    color: #00B592;
}

.n23 h1 {
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    line-height: 60px;
    /* identical to box height */
    color: #FFBE58;
}

.n24 h1 {
    font-family: Poppins;
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    line-height: 60px;
    /* identical to box height */
    color: #E0474E;
}

#num {
    font-family: Rubik;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 18px;
    /* identical to box height */
    color: #7D8597;
}


/*******************************************************************************************************/

.why {
    display: flex;
    justify-content: space-evenly;
    padding: 50px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.w1 {
    width: 750px;
    text-align: center;
}

.w1 h3 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 300;
    font-size: 38px;
    line-height: 57px;
    /* identical to box height */
    color: #475677;
}

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

.box {
    width: 150px;
    border-radius: 20px;
    border: 1px solid #4756773d;
    text-align: center;
    padding: 25px;
    margin: 20px;
}

.w2 {
    width: 600px;
    border-radius: 20px;
    border: 1px solid #47567793;
    padding: 30px;
}

.w21 {
    text-align: center;
}

.w21 h2 {
    font-family: Poppins;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    /* identical to box height */
    color: #475677;
}

.w21 p {
    font-family: Segoe UI;
    font-style: normal;
    font-weight: normal;
    font-size: 21px;
    line-height: 28px;
    /* identical to box height */
    color: #2A2929;
}

form {
    width: 450px;
    margin: 0 auto;
    padding-top: 30px;
}

input {
    border: none;
    width: 425px;
    font-weight: 400;
    font-size: 18px;
    border-radius: 20px;
    padding: 15px 0px 15px 25px;
    margin: 10px 0px 10px 0px;
}

.name {
    background: #DCFAF7;
    width: 425px;
    border: 1px solid #CCF7F3;
    border-radius: 10px;
    padding: 15px 0px 15px 25px;
    color: #425077;
}

.register {
    border: none;
    background: #51E3D4;
    width: 450px;
    border-radius: 10px;
    padding: 16px;
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 31px;
    /* identical to box height */
    font-size: 21px;
    color: #474F85;
}

.otp {
    display: flex;
}

#otp {
    background: #51E3D4;
    border: none;
    border-radius: 20px;
    font-size: 10px;
    line-height: 15px;
    width: 150px;
    height: 30px;
    margin: auto;
}

#mob {
    width: 300px;
}


/***********************************************************************************************/

.footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px;
    background-color: #EFF7FF;
    border-bottom: 1px solid #33456554;
}

.links {
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.social {
    padding: 15px;
}

#logo {
    padding: 15px;
}

.b1 h3 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    /* identical to box height */
    padding-top: 15px;
    color: #334565;
}

.b1 p {
    font-family: Rubik;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 18px;
    /* identical to box height */
    padding-top: 20px;
    color: #7D8597;
}

#download {
    background: #334565;
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height */
    border: none;
    width: 130px;
    margin: 20px;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 10px;
}

.copyright {
    background-color: #EFF7FF;
    display: flex;
    justify-content: space-around;
    gap: 20px;
    padding: 30px;
}

.copyright p {
    font-family: Rubik;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 18px;
    /* identical to box height */
    color: #7D8597;
}

.newsletter {
    text-align: center;
    padding: 30px;
}

.newsletter h1 {
    font-style: normal;
    font-weight: 300;
    font-size: 38px;
    line-height: 57px;
    /* identical to box height */
    color: #475677;
}

.newsletter h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 38px;
    color: #474F85;
}

#subscribe {
    background-color: #00B592;
    color: WHITE;
    border: NONE;
    width: 120px;
    padding: 10px 15px 10px 15px;
    border-radius: 20px;
    font-size: 15px;
}


/***********************************************************************/

.enroll {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    flex-wrap: wrap;
}

.enroll h1 {
    font-style: normal;
    font-weight: 300;
    font-size: 30px;
    line-height: 57px;
    /* identical to box height */
    color: #475677;
}

#more {
    border: 1px solid rgba(0, 0, 0, 0.554);
    border-radius: 30px;
    width: 150px;
    color: #475677;
    padding: -3px 10px -3px 10px;
    background-color: white;
}


/***************************************************************************************/

.feedback {
    display: flex;
    justify-content: space-around;
    width: 950px;
    margin: 0 auto;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

.f1 {
    width: 400px;
    border: 1px solid rgba(0, 0, 0, 0.164);
    padding: 20px;
    text-align: center;
    box-shadow: 0px 12px 40px 0px rgb(0 0 0 / 2%);
    border-radius: 10px;
}

.f1 h4 {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    /* identical to box height */
    color: #334565;
}

.f1 h5 {
    font-family: Rubik;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 18px;
    /* identical to box height */
    color: #7D8597;
}

#s2 {
    width: 180px;
}


/********************resposive***********************/

@media only screen and (max-width: 1240px) {
    .lit1 p {
        font-size: 30px;
    }
    .r1 img {
        width: 450px;
    }
    .top {
        height: 71vh;
    }
    .first {
        background-size: 100% 70vh;
    }
}

@media only screen and (max-width: 1025px) {
    .top {
        /* background: linear-gradient(135deg, #23F7E1 0%, #8494FF 100%); */
        padding: 25px;
        height: 61vh;
    }
    .first {
        background-image: url("bg1.png");
        background-repeat: no-repeat;
        background-size: 100% 60vh;
    }
    .l1 {
        padding-top: 20px;
    }
    #s2 {
        width: 200px;
    }
    #top-image {
        width: 550px;
    }
    .l1t1 p {
        font-size: 35px;
    }
    .l1t2 p {
        /* font-size: 20px;
        line-height: 30px; */
    }
    .l2 {
        width: 450px;
    }
    #pc {
        width: 30rem;
    }
}

@media only screen and (max-width: 450px) {
    .top {
        height: 90vh;
        flex-wrap: wrap;
    }
    .b1 {
        width: 100%;
        text-align: center;
    }
    .why {
        flex-wrap: wrap;
    }
    .w2 {}
    .feedback {
        width: 250px;
    }
    #top-image {
        width: 350px;
    }
    .w21 {}
    form {
        width: 300px;
    }
    input {
        width: 300px;
    }
    #pc {
        width: 350px;
    }
    .f1 {
        width: 280px;
    }
    .feedback {}
    .top {
        background: #EBFDFD;
    }
    .w1 h3 {
        font-size: 25px;
    }
    .name {
        width: 280px;
    }
    .register {
        width: 300px;
    }
    .l1t2 p {
        color: black;
    }
    .l2 p {
        width: 300px;
    }
    .r2 img {
        width: 300px;
        height: 200px;
    }
    .numbers {
        padding: 25px;
    }
    .n2 {
        padding-top: 30px;
    }
    #more {
        padding: 5px;
    }
}