body {
    margin: 0;
    padding: 0;
}

.container {
    width: 95%;
    margin: 0px auto;
    background-color: #FFFFFF;
}
.logo {
    width: 13%;
}
 .logo img {
    width: 100%;
 }
.container .menect-one {
    background-color: #FFFFFF;
    display: flex;
    position: fixed;
    margin: 0px;
    left: 0;
    right: 0;
    padding-bottom: 20px;
    padding-top: 20px;
    transition: box-shadow ease-in 0.1s;
}

.box-shadow {
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

.nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin: 0px auto;
}

.menect {
    padding-top: 150px;
}

.main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu {
    display: flex;
    list-style: none;
    gap: 40px;
    font-family: "Plus Jakarta Sans", sans-serif;
    /* padding-right: 13%; */
    font-weight: 500;
}

.menu li a {
    color: #0d3060;
}

.menu li a {
    text-decoration: none;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.btn {
    font-size: 15px;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #ffff;
    background-color: #0C78F1;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
    padding: 13px 34px;
    border-radius: 5px;
    border: none;
    display: block;
}

.container1 {
    display: flex;
    height: 100vh;
}

.left-section,
.right-section,
.left {
    flex: 1;
    padding: 0;
    padding-right: 117px;
    max-width: 100%;
}

.left-section h1 {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: rgb(13 48 96);    
    letter-spacing:-.09rem;
    font-size: 42px;
    font-weight: 500;
    margin: 1px;
    padding-top: 0.5px;

}

.left {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #7A88A0;
    font-size: 16px;
    padding: 0.1px;
}

.bn {
    color: #ffff;
    background-color: #0C78F1;
    padding: 10px 30px;
    border-radius: 5px;
    border: none;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.right-section {
    max-width: 100%;
    padding: 5px;
    /* margin-left: 160px; */
    border-radius: 5px;
}

.right-section img {
    width: 100%;
}

.v-line {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #FFFFFF;
    margin-top: 100px;
    margin-bottom: 40px;
}

.main1 {
    width: 30%;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 36px;
    color: #0D3060;
    height: 96px;
}

.mini {
    font-size: 14px;
    color: #5E6C85;
}

.mini a {
    text-decoration-line: none;
    font-weight: bold;
    font-size: 15px;
}

.pr {
    padding-left: 10px;
}

.En {
    padding-left: 10px;
}

.right {
    width: 65%;
    background-color: #F7F9FB;
    border-radius: 30px;
    display: flexbox;
    margin-top: 30px;
}

.v-line-h1 {
    font-size: 36px;
    font-weight: 500;
}

.sch {
    color: #0C78F1;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    height: 16px;
    width: 164px;
    margin-top: 59px;
    margin-bottom: 10px;
    margin-left: 60px;
}

.act {
    color: #0D3060;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -1%;
    padding-top: 5px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 60px;
}

.run {
    color: #7A88A0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-top: 1px;
    margin-left: 7px;
    margin-left: 60px;
}
.btnn {
    color: #ffff;
    background-color: #0C78F1;
    padding: 10px 30px;
    border-radius: 5px;
    border: none;
    font-family: "Plus Jakarta Sans", sans-serif;
    display: flex;
    margin-left: 55px;
    
}

.image {
    border-radius: 12px;
    width: 100%;
    text-align: right;
    margin-top: 50px;
}

.image img {
    width: 90%;
}

p.sideBlock {
    border-left: 3px solid #0C78F1;
    border-radius: 2px;
    padding-left: 10px;
}

.middle {
    width: 100%;
    margin: 0px auto;
    background-color: #f7f9fb;
    color: #042D5A;
    display: flex;
    gap: 20px;
    padding: 20px 0;
}

.middle-child {
    width: 100%;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.middle-child h3 {
    font-size: 18px;
    font-weight: 600;
    color: #0D3060;
}

.middle-child p {
    font-size: 14px;
    font-weight: 500;
    color: #7A88A0;
}

.middle-text {
    background-color: #f7f9fb;
    text-align: center;
    color: #042D5A;
    font-size: 25px;
    font-weight: 500;
    padding: 50px;
    margin: 0 auto;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.middle-text h2 {
    width: 101%;
    margin: 0 auto;
}

.wrapper-color {
    background-color: #f7f9fb;
}

.second-middle {
    margin-top: 60px;
    margin-bottom: 60px;
}

.mode {
    margin-top: 10%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}

.mode .mode-parent-one {
    display: flex;
    margin-bottom: 40px;
    justify-content: space-between;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    color: #7A88A0;
    font-size: 14px;
}


.mode .mode-parent-two {
    display: flex;
    justify-content: space-between;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #7A88A0;
    font-size: 14px;
    font-weight: 500;
}

.mode-child .sub {
    font-size: 12px;
    color: #0D3060;
    font-weight: 600;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.mode .mode-parent-one .mode-child,
.mode .mode-parent-two .mode-child {
    border-radius: 20px;
    background-color: #F7F9FB;
    width: 25%;
}

.us {
    color: #0D3060;
    font-size: 25px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;

}

.us h2 {
    margin-bottom: 0px;
    margin-top: 0px;
}


.have {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    color: #0D3060;
    font-size: 25px;
    text-align: center;
}

.have h2 {
    margin-bottom: 0px;
    margin-top: 0px;
}

.it {
    background-color: #F7F9FB;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: #0D3060;
    justify-content: space-between;
    display: flex;
    padding: 30px 20px 30px 20px;
    border-radius: 5px;
    margin-top: 5%;
    margin-bottom: 3%;
}

.for {
    background-color: #F7F9FB;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: #0D3060;
    justify-content: space-between;
    border-radius: 5px;
    padding: 30px 20px 30px 20px;
    display: flex;
    margin-bottom: 3%;
}

.ot {
    background-color: #F7F9FB;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: #0D3060;
    justify-content: space-between;
    padding: 30px 20px 30px 20px;
    border-radius: 5px;
    display: flex;
    margin-bottom: 3%;
}

.del {
    margin-top: 0px;
    margin-bottom: 0px;
    color: #7A88A0;
    font-size: 16px;
    font-weight: 500;
}

.on {
    background-color: #F7F9FB;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: #0D3060;
    justify-content: space-between;
    padding: 30px 20px 30px 20px;
    border-radius: 5px;
    display: flex;
    margin-bottom: 3%;
}

.pay {
    background-color: #F7F9FB;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: #0D3060;
    justify-content: space-between;
    padding: 30px 20px 30px 20px;
    border-radius: 5px;
    display: flex;
    margin-bottom: 3%;
}

.fit {
    background-color: #F7F9FB;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: #0D3060;
    justify-content: space-between;
    padding: 30px 20px 30px 20px;
    border-radius: 5px;
    display: flex;
    margin-bottom: 3%;
}

.start {
    background-color: #F7F9FB;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: #0D3060;
    justify-content: space-between;
    border-radius: 5px;
    padding: 30px 20px 30px 20px;
    display: flex;
    margin-bottom: 3%;
}


.bus {
    justify-content: space-between;
    display: flex;
    padding-top: 10px;
    padding-bottom: 20px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 35px;
    font-weight: 600;
    color: #0D3060;
    padding-bottom: 20px;

}

.veo {
    font-size: 15px;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #ffff;
    background-color: #0C78F1;
    padding: 13px 34px;
    border-radius: 5px;
    border: none;
    display: block;
}

.Revo {
    justify-content: space-between;
    display: flex;
    padding-top: 10px;
}


.co {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #7A88A0;
    gap: 4px;
}

.ma {
    width: 100%;
}

.ma img {
    width: 30%;
    padding-bottom: 20px;
    margin-top: 20px
}

div.third {
    width: 80%;
    margin: 0px auto;
}

.fourth {
    margin-top: 100px;
    margin-bottom: 50px;
}

.btn-container .ham-menu {
    display: none;
}


.limit {
    position: fixed;
    top: 50px;
    width: 25%;
    left: 20%;
    display: none;
    padding: 20px;
}

.limit-friend {
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: 10px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    box-shadow: 0px 3px 10px -6px rgba(0, 0, 0, 1);
}
.bin {
    padding-right:10px ;
}
.vibe {
    margin-bottom: 0px;
    color: #5E6C85;
    font-size: 13px;
    font-weight: 500;
}

.apt {
    position: fixed;
    top: 65px;
    width: 25%;
    left: 60%;
    margin: 20px;
    background-color: #FFFFFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    border-radius: 20px;
    box-shadow: 0px 3px 10px -6px rgba(0, 0, 0, 1);
    display: none;
}
.kill img {
    padding-left: 20px;
    padding-top: 10px;
}
.cool img {
    padding-left: 20px;
    padding-top: 10px;
}
.bowl img {
    padding-left: 20px;
    padding-top: 10px;
}

.start-from {
    color: #0D3060;
}


@media (max-width: 1000px) {
    .limit{
        width: 30%;
        left: 15%;
    }
    .logo img {
    width: 100%;
    }
    .btn-container .ham-menu {
        display: block;
        font-size: 32px;
    }
    .nav .menu {
        display: none;
    }
    .btn-container .btn {
        display: none;
    }
}

@media (max-width: 840px) {
    .container {
        width: 90%;
    }

    .btn-container .ham-menu {
        display: block;
        font-size: 17px;
        color: #042D5A;
    }
    .limit {
        display: none;
    }
    .logo img {
    width: 150%;
    }
    .middle {
        flex-direction: column;
    }
    .nav .menu {
        display: none;
    }

    .btn-container .btn {
        display: none;
    }

    .btn-container .ham-menu {
        display: block;
        font-size: 30px;
    }

    .main {
        flex-direction: column;
        padding-bottom: 20px;
    }

    .left-section h1 {
        padding-right: 40px;
        color: #0D3060;
        font-weight: bold;
    }

    .left-section p {
        padding-right: 100px;
        letter-spacing: -0.2px;
        font-size: 20px;
    }
    .bus {
        flex-direction: column;
    }
    .veo {
        width: 60%;
    }
    .Revo {
        flex-direction: column;
    }

    .bn {
        width: 103%;
        height: 60px;
        font-size: 20px;
        text-align: center;
        margin-left: 0%;
        margin-bottom: 40px
    }

    .right-section img {
        width: 70%;
        padding-left: 88px;
    }

    .v-line {
        flex-direction: column;
        padding-bottom: 20px;
        width: 100%;
        margin: 20px;
    }

    .right {
       margin-top: 35%;
       width: 90%;
    }
    .mini .sideBlock,
    .mini .pr,
    .mini .En {
        display: none;
    }
    .v-line-h1 {
        width: 130%;
    }
    .mini a {
        text-align: left;  
    }

    .act {
        width: 50%;
        text-align: left;
    }
    .run {
        text-align: left;
        width: 40%;
    }
    .sch {
        width: 85%;
    }
    .us {
        margin-top: 30px;
    }
    .mode .mode-parent-one {
        flex-direction: column;
    } 
    
   .mode .mode-parent-one .mode-child {
    width: 90%;
    padding: 35px 30px 35px 30px;
    margin-bottom: 20px;
   }
   .mode .mode-parent-two {
    flex-direction: column;
   }
   .mode .mode-parent-two .mode-child {
    width: 90%;
    padding: 35px 30px 35px 30px;
    margin-bottom: 20px;
    margin-top: 10px;
   }
   .btn {
    margin-bottom: 20%;
   }
}
@media (max-width: 560px) {
    .logo img {
    width: 100%;
    }
    .btn-container .ham-menu {
        display: block;
        font-size: 17px;
        color: #0D3060;
    }
    .middle {
        flex-direction: column;
    }
   .mode .mode-parent-one{
        flex-direction: column;
    }
    .mode .mode-parent-one .mode-child {
        width: 100%;
        margin-bottom: 25px;
    }
    .mode .mode-parent-two {
        flex-direction: column;
        
    }
    .mode .mode-parent-two .mode-child {
        width: 100%;
        margin-bottom: 25px;
    }
}

@media (max-width: 450px) {
    .container .menect-one {
        width: 100%;
        position: fixed;
        margin: 0px auto;
    }
    .logo img {
    width: 200%;
    }
    .nav .menu {
        display: none;
    }
    .left-section h1 {
        width: 150%;
    }
    .left-section p {
        letter-spacing: -0.2px;
        font-size: 15px;
        width: 100%;
        padding-bottom: 10px;
    }
    .btn {
        margin-bottom: 20px;
    }
     .btn-container .ham-menu {
        display: block;
        font-size: 17px;
        color: #042D5A;
    }

    .v-line {
        flex-direction: column;
        gap: 20px;
    }

    .right {
        width: 100%;
        padding-right: 30%;
    }

    .main {
        justify-content: center;
        flex-direction: column;

    }

     .act {
        width: 105%;
    }
    .run {
        width: 100%;
    }

    .main1 {
        width: 100%
    }

    .left-section,
    .right-section,
    .left {
        padding-right: 0px;
    }

    .middle-text h2 {
        width: 100%;
        font-size: 30px;
    }

    .us h2 {
        font-size: 25px;
    }

    .bus {
        flex-direction: column;
        gap: 20px;
    }

    .Revo {
        flex-direction: column;
    }

    .mode .mode-parent-one .mode-child,
    .mode .mode-parent-two .mode-child {
        width: 100%;
    }

    .mode .mode-parent-one {
        flex-direction: column;
        gap: 20px;
    }

    .mode .mode-parent-two {
        flex-direction: column;
        gap: 20px;
    }

    .have h2 {
        font-size: 20px;
    }

    .container {
        width: 80%;
        margin: 0px auto;
    }
    .middle-text {
        width: 100%;
    }
    .middle {
        width: 135%;
    }
    .third {
        width: 100%;
        margin: 0px;
        padding-left: 5px
    }

    .it {
        margin-bottom: 20px;
        width: 100%;
        padding-left: 5px
    }

    .for {
        margin-bottom: 20px;
        width: 100%;
        padding-left: 5px
    }

    .ot {
        margin-bottom: 20px;
        width: 100%;
        padding-left: 5px
    }

    .on {
        margin-bottom: 20px;
        width: 100%;
        padding-left: 5px
    }

    .pay {
        margin-bottom: 20px;
        width: 100%;
        padding-left: 5px
    }

    .fit {
        margin-bottom: 20px;
        width: 100%;
        padding-left: 5px
    }
    .bus {
        font-size: 20px;
        font-weight: 500;
    }
    .veo {
        width: 75%;
    }
    .start {
        width: 100%;
        padding-left: 5px
    }
}