* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    background-color: #fdfeff;
    max-width: 1220px;
    margin: 0 auto;
}

/* webpage all item*/

/* .left>h1,
p {
    margin: 20px 0px;
} */



/*  _______________NavBar*/

.Navbar {
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-between;
    height: 115px;
}

.Navbar .logo-nav {
    height: 35px;
    position: relative;
    top: 35px;
    cursor: pointer;
}

.Navbar .nav-lists {
    /* border: 2px solid red; */
    display: flex;
    align-items: center;
    list-style: none;
    position: relative;
    left: 125px;
}

.Navbar .nav-list {
    margin: 0px 25px;
    color: rgba(0, 0, 0, 0.521);
    cursor: pointer;
}

.Navbar .nav-list:nth-child(1) {
    color: black;
}

.Navbar .btn {
    /* border: 2px solid red; */
    display: flex;
    height: 40px;
    width: 200px;
    position: relative;
    top: 25px;
    left: 20px;
    right: 10px;
    cursor: pointer;
}

.Navbar .btn .btn_Nav {
    color: #24A7FF;
    border: 2px solid #24A7FF;
    background-color: #FDFEFF;
    height: 55px;
    width: 150px;
    cursor: pointer;
    border-radius: 15px;
    font-family: sans-serif;
    font-weight: 800;
}


@media screen and (min-width:870px) {
    .fa-solid.fa-bars {
        display: none;
    }

}

@media (min-width:320px) and (max-width:869px) {

    .container {
        margin: 0 auto;
        overflow: hidden;
    }

    .Navbar {
        /* margin: 0 auto; */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-width: 864px;
    }

    .btn_Nav {
        display: none;
    }

    .Navbar .nav-lists {
        display: none;
    }

    .fa-solid.fa-bars {
        /* margin: 20px; */
        margin-top: 20px;
        margin-right: 10px;
        font-size: 40px;
    }

    .Navbar .logo-nav {
        margin: 20px;
        position: relative;
        top: 0px;
    }
}

/* ________End NavBAr */


/* ________Section one here */


.section-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 520px;
    margin: 0px 0px;
}

.section-1 .left-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.sec-hed-1 {
    width: 580px;
    font-size: 62px;
    height: 250px;
}

.sec-para-1 {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.479);
}

.btn-1 {
    width: 160px;
    cursor: pointer;
    height: 50px;
    border-radius: 10px;
    position: relative;
    left: 2px;
    background-color: #079EF3;
    border: none;
    color: #fff;
    font-size: 15px;
}

/*     right side */
/* .right-1{
} */

.img-right-1 {

    height: 450px;
    position: relative;
    top: 45px;
    left: 55px;
}

@media screen and (min-width:870) {
    .sec-hed-1 {
        height: 250px;
    }

    .sec-para-1 {
        width: 600px;

    }

}

@media (min-width:320px) and (max-width:869px) {
    .section-1 {
        display: grid;
        grid-template-columns: 1fr;
        height: 49rem;
    }

    .sec-hed-1 {
        text-align: center;
        margin: 0 auto;
        width: 400px;
        font-size: 30px;
        height: 80px;
    }

    .sec-para-1 {
        margin: 0 auto;
        width: 400px;
        margin-bottom: 10px;
    }

    .btn-1 {
        margin: 0 80px;
        margin-bottom: 10px;
    }

    .right-1 {
        margin: 0 auto;
        /* border: 2px solid red; */
        width: 380px;
    }

    .img-right-1 {
        /* border: 2px solid #24A7FF; */
        margin: 0 auto;
        width: 370px;
        position: relative;
        left: 0px;
        top: 0px;
    }
}

/* Section one here end */


/* Section two */
.section-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 520px;
    /* border: 2px solid red; */
}

.sec-img-2 {
    width: 590px;
    position: relative;
    top: 115px;
}

.right-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.right-2>h1 {
    /* border:2px solid red; */
    position: relative;
    top: -75px;
    left: 5px;
    width: 522px;
    font-size: 45px;
}

div.right-2>p {
    /* border: 2px solid red; */
    line-height: 30px;
    width: 485px;
    position: relative;
    top: -40px;
    color: rgba(0, 0, 0, 0.616);
}

div.right-2>button {
    height: 60px;
    width: 190px;
    cursor: pointer;
    border-radius: 20px;
    background-color: #079EF3;
    color: #fff;
    font-size: 14px;
    border: none;
    position: relative;
    right: 145px
}

@media (min-height: 870px) {
    .section-2 {
        display: grid;
        /* grid-template-columns: 1fr 1fr; */
        height: 650px;
        /* border: 2px solid red; */
    }
}

@media (min-width:320px) and (max-width:869px) {

    .section-2 {
        height: 50rem;
        display: flex;
        flex-direction: column-reverse;
        margin: 0 auto;
    }

    div.right-2>h1 {
        margin: 0 auto;
        max-width: 300px;
        font-size: 30px;
    }

    div.right-2>p {
        /* border: 2px solid red; */
        margin: 0 auto;
        line-height: 30px;
        width: 350px;
    }

    div.right-2>button {
        height: 50px;
        width: 150px;
        margin-left: 30px;
    }

    .left-2 {
        margin: 0 auto;
    }

    .sec-img-2 {

        max-width: 400px;
        position: relative;
        top: 0px;

    }
}



/* Section TWo end */

/* Secetion three star */

.section-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


div.left-3>h1 {
    /* border: 2px solid red; */
    height: 150px;
    width: 607px;
    position: relative;
    left: 10px;
    top: 160px;
    font-size: 60px;
}

div.left-3>p {
    height: 110px;
    width: 530px;
    position: relative;
    left: 10px;
    top: 150px;
    line-height: 30px;
}

div.left-3>button {
    position: relative;
    left: 05px;
    top: 180px;
    height: 50px;
    width: 160px;
    background-color: #079EF3;
    color: #FDFEFF;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.right-2 {
    margin: 2px;
    padding: 2px;
}

/* @media (min-height: 870px) {
    .section-3 {
       
    }
} */

@media (min-width:320px) and (max-width:869px) {
    .section-3 {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 auto;
    }

    div.left-3>h1 {

        max-width: 300px;
        font-size: 30px;
        margin: 0 auto;
    }

    div.left-3>p {
        /* border: 2px solid red; */
        height: 200px;
        margin: 0 auto;
        max-width: 350px;
        line-height: 30px;

    }

    div.left-3>button {
        margin: 0 auto;
        height: 50px;
        width: 160px;
        /* border: 2px solid red; */
        position: relative;
        left: 40px;

    }

    .right-3 {
        /* border: 2px solid red; */
        margin: 0 auto;
        width: 380px;
        position: relative;
        top: 250px;

    }

    .img-3-r {
        max-width: 380px;
    }
}

/* section three END________ */

/* Section four here_________ */

.section-4 {

    height: 720px;
}

.top-section-4 {
    display: flex;
    justify-items: space-between;
    align-items: flex-start;
}

div.top-section-4>h2 {
    position: relative;
    top: 50px;
    left: 5px;
    width: 500px;
    height: 180;
    font-size: 45px;
    color: rgba(0, 0, 0, 0.788);
}

div.top-section-4>p {
    height: 75px;
    width: 535px;
    position: relative;
    top: 50px;
    left: 125px;
    color: rgba(0, 0, 0, 0.527);
}

div.bott-section-4 {
    /* border: 2px solid red; */
    position: relative;
    top: 50px;
    /* display: flex; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.card {
    /* border: 2px solid red; */
    height: 250px;
    margin: 10px;

    width: 380px;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
}


div.card>img {
    margin: 10px 10px;
    height: 60px;
}



div.card>p {
    line-height: 25px;
}

@media (min-width:320px) and (max-width:869px) {

    .section-4 {
        height: 130rem;
    }

    div.top-section-4 {
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        position: relative;
        top: 10rem;
    }

    div.top-section-4>h2 {
        width: 300px;
        font-size: 30px;
        margin: 0 auto;
    }

    div.top-section-4>p {
        width: 350px;
        position: relative;
        left: 0;
        top: 60px;
        margin: 0 auto;
    }

    div.bott-section-4 {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 auto;
        position: relative;
        top: 20rem;

    }

    .card {
        margin: 0 auto;
    }

    div.card>p {
        margin: 0 auto;
        width: 300px
    }

    div.card>h2 {
        margin: 0 auto;
        width: 300px
    }

    div.card>img {
        max-width: 40px;
    }
}

/* Section four end here_________________ */

/* Section five here start */
.section-5 {
    background-image: linear-gradient(to right, #08B8F7, #0682EF);
    height: 70.6rem;
    z-index: 1;
}




.sec5-all {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* border: 2px solid red; */
    position: relative;
    top: 40px;
    height: 800px;
}

.card5 {
    z-index: 1;
    background-color: #fff;
    /* border: 2px solid red; */
    margin: 10px;
    border-radius: 20px;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.322);
}

div.midcard-5 {
    background-color: #353535;
    color: #fFF;
    padding: 20px;
    width: 388px;
    height: 150px;
    border-radius: 20px;
}

div.first-card {
    color: rgb(0, 0, 0);
    padding: 20px;
    width: 380px;
    height: 150px;
    border-radius: 20px;
}

div.sec-5-card {
    padding: 20px;
}


.material-symbols-outlined {
    color: green;
    padding: 10px;
    position: relative;
    top: 6px;
}

div.plane {
    /* border: 2px solid skyblue; */
    margin: 40px 0px;
    padding: 20px;
    position: relative;
    top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}



.monts-plane {
    color: black;
}

.monts-plane>span {
    color: rgba(121, 129, 150, 0.678);
}

div.plane:nth-child(2) {
    color: rgba(121, 129, 150, 0.678);
}

.sec-5-btn {
    height: 55px;
    width: 200px;
    left: 20px;
    right: 10px;
    background-color: #fff;
    color: #0681EF;
    border: 2px solid #0681EF;
    border-radius: 10px;
    cursor: pointer;
}

.sec-5-btn-mid {
    z-index: 1;
    height: 55px;
    width: 200px;
    left: 20px;
    right: 10px;
    border-radius: 10px;
    background-color: #0681EF;
    border: none;
    color: #fff;
    cursor: pointer;
}

.section-5>h1 {
    display: flex;
    /* border: 2px solid red; */
    padding: 40px;
    justify-content: center;
    color: #fff;
}

@media screen and (min-width:870px) {
    .section-5::after {
        content: '';
        height: 1130px;
        width: 75px;
        background-color: #08B8F7;
        border: #08B8F7;
        position: absolute;
        left: -10px;
        top: 2489px;
    }

    .section-5::before {
        content: '';
        height: 1130px;
        width: 79px;
        background-color: #0682EF;
        border: #0682EF;
        position: absolute;
        top: 2489px;
        left: 1270px;
    }

}

@media (min-width:320px) and (max-width:869px) {

    .section-5 {
        width: fit-content;
        margin: 0 auto;
        height: 145rem;
    }

    .sec5-all {
        display: grid;
        grid-template-columns: 1fr;
        /* margin: 0 auto; */
        /* width: 50px; */
    }

    .section-5>h1 {
        /* border: 2px solid red; */
        margin: 0 auto;
    }

    div .midcard-5 {
        width: 463px;
        margin: 0 auto;
    }

    div.first-card {
        margin: 0 auto;
    }

    div.sec-5-card>p {
        margin: 0 auto;
    }

    div.sec-5-card {
        padding: 0px;
    }
}


/* Section five end here */
/* section-6 here */


.section-6 {
    /* border: 1px solid  red; */
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin-top: 40px;
}

.sec-6-top {
    /* border: 2px solid red; */
    margin: 0px 0px;
    padding: 10px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sec-6-top>p {
    width: 700px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
}

.sec-6-top>h1 {
    font-size: 50px;
    font-weight: 700;
    padding: 10px;
}

.sect-6-bot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px 0px;
}

.sec-6-card {
    border: 1px solid rgba(0, 0, 0, 0.253);
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    margin: 10px;
    padding: 50px 20px;
    border-radius: 10px;
    background-color: #fff;
}

div.circle {
    border: none;
    width: 80px;
    height: 80px;
    position: relative;
    top: 68px;
    left: 10px;
    border-radius: 70px;
    background-color: #D9D9D9;
}

div.circle-1 {
    display: inline-block;
    position: relative;
    left: 100px;
}

p.circle-name {
    margin: 5px;
    padding: 2px;
}



@media (min-width:320px) and (max-width:869px) {

    .section-6 {
        margin: 0 auto;
    }

    .sec-6-top>h1 {
        font-size: 30px;
        margin: 0 auto;
    }

    .sec-6-top>p {
        width: 380px;
        margin: 0 auto;
    }

    .sect-6-bot {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 auto;

    }
}

/* Section 6 here end____________________________________ */

/* section 7 */
div.section-7 {
    height: 550px;
}

/* div.section-7>img {
    position: relative;
    width: 1350px;
    height: 550px;
} */

.left-7 {
    position: relative;
    top: -380px;
    color: white;
    display: inline-block;
    padding: 10px 20px 0px;
    width: 550px;

}

div.left-7>h1 {
    font-size: 45px;
}

/* .main-7{
    display: grid;
    grid-template-columns: 1fr 1fr;
} */

.right-7 {
    position: relative;
    display: inline-block;
    top: -460px;
    left: 265px;
}

.btn-7 {
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
}

@media (min-width:870px) {
    div.section-7>img {
        position: relative;
        width: 1250px;
        height: 550px;
    }

    .btn-7 {
        height: 55px;
        width: 160px;
        border: 1px solid #fff;
        background-color: transparent;
        color: #fff;
        border-radius: 10px;
        cursor: pointer;
    }
}

@media (min-width:320px) and (max-width:879px) {

    .section-7 {
        overflow: hidden;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
    }

    div.section-7>img {
        overflow-x: hidden;
        width: 800px;
        margin: 0 auto;
        height: 550px;
    }

    .right-7 {
        position: relative;
        top: -490px;
        left: 250px;
    }

    div.left-7>h1 {
        margin: 40px;
        width: 300px;
        font-size: 20px;
    }

    div.left-7>p {
        margin-bottom: 20px;
    }

    .btn-7 {
        height: 40px;
        width: 150px;
        border: 1px solid #fff;
        background-color: transparent;
        color: #fff;
        border-radius: 10px;
        cursor: pointer;
        overflow-x: hidden;
    }
}

/* Section 8 */

div.section-8 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 50px;
    height: 400px;
    margin: 40px 0px 0px 0px;
}

div.f {
    position: relative;
    top: 30px;
    margin: 30px 0px;
    padding: 20px;
}


div.f>h3 {
    padding: 20px 0px;
    position: relative;
    top: 30px;
    left: 20px;
    font-size: 30px;
}

.S-M {
    display: inline-block;
    position: relative;
    top: 20px;
    height: 80px;
    Width: 220px;
}

.sm {
    height: 30px;
    width: 50px;
    cursor: pointer;
}

.f-i {
    list-style: none;
    margin: 20px;
    opacity: 0.9;
    cursor: pointer;
}

.logo-f {
    width: 100px;
    position: relative;
    top: 60px;
    cursor: pointer;
}

.f-1>p {
    width: 240px;
    position: relative;
    top: 60px;
}

@media (min-width:320px) and (max-width:879px) {
    div.section-8 {
        /* overflow-x: hidden; */
        position: relative;
        top: -275px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
    }

    div.f>h3 {
        padding: 10px 0px;
        position: relative;
        top: 30px;
        left: 20px;
        font-size: 20px;
    }
}