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

/* top section */
#top{
    width: 100%;
    background-color: rgb(229,124,216);
    height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    
}
#top>ul{
    display: flex;
    list-style: none;
    justify-content: flex-end;

}
#top>ul>li{
    margin-left: 2vw;
    margin-top: 5px;
    
}
#top>ul>li>a{
    text-decoration: none;
}
#top>ul>li:last-child{
    margin-right: 50px;
}
#top>ul>li>a:hover{
    text-decoration: underline;
}


/* navbar section */
.sec1{
    background-color: rgb(44,19,56);
    border: 1px solid rgb(44,19,56);
    position: sticky;
    top: 0px;
    z-index: 100;
}
.sec1.afterclick{
    background-color: rgb(252,229,216);
    border: 1px solid rgb(252,229,216);
}
#navbar{
    width: 95vw;
    margin: auto;
    margin-top: 30px;
    display: flex;
    margin-bottom: 30px;

}
#logo>img{
    width: 170px;
}
.rightbar{
    display: none;
}
#afterlogo{
    height: 35px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.navbarlist{
    display: flex;
    list-style: none;
}
#afterlogo a:hover{
    color: rgb(229,124,216);
}
.navbarlist>li{
    padding: 10px 0px 10px 35px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}
.navbarlist>li>a{
    text-decoration: none;
    color: white;
}
.navbarlist2{
    display: flex;
    list-style: none;
    justify-content: flex-end;
}
.navbarlist2>li{
    padding: 10px 0px 10px 15px;
    font-size: 16px;
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
}
.navbarlist2>li>a{
    text-decoration: none;
    color: white;
}
#afterlogo>div{
    display: flex;
}
#navbarlist2_last{
    padding: 15px 20px 30px 20px;
    border-radius: 50px;
    margin-left: 15px;
    background-color: rgb(252,229,216);
}
#navbarlist2_last>a{
    color: rgb(229,124,216);
}
#navbarlist2_last:hover{
    background-color: rgb(101, 32, 133);
}
.submenubox{
    display: none;
}
.submenubox.pro_submenu_on{
    display: block;
    position: absolute;
    width: 100vw;
    display: flex;
    border: 1px solid rgb(252,229,216);
    background-color: rgb(252,229,216);
    right: 0;
    top: 95px;
}
.submenu{
    width: 55vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.submenu>div{
    display: flex;
    cursor: pointer;
}
.submenu img{
    width: 40px;
}
.submenu h4{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
}
.submenu p{
    font-family: Arial, Helvetica, sans-serif;
    margin: 5px 0px 0px 0px;
    font-size: 14px;
    color: rgb(129,113,135);
}
.submenu>div>div{
    margin-left: 10px;
}
#pro_submenu_left{
    padding: 30px 50px;
}
#pro_submenu_left>:first-child{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 20px;
    color: rgb(129,113,135);
}
#pro_submenu_left>:last-child{
    width: 55vw;
    height: 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    background-color: rgb(255,243,237);
    margin-top: 40px;
}
#pro_submenu_right{
    padding: 30px;
}
#pro_submenu_right>:first-child{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 20px;
    color: rgb(129,113,135);
}
#track_anywhere{
    width: 30vw;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}
#track_anywhere>div{
    display: flex;
    cursor: pointer;
}
#track_anywhere img{
    width: 40px;
}
#track_anywhere h4{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
}
#track_anywhere p{
    font-family: Arial, Helvetica, sans-serif;
    margin: 5px 0px 0px 0px;
    font-size: 14px;
    color: rgb(129,113,135);
}
#track_anywhere>div>div{
    margin-left: 10px;
}
#pro_submenu_line{
    background-color: aquamarine;
    width: 1px;
    height: 60vh;
    margin-top: 20px;
}

.submenu2{
    display: none;
}
.submenu2.why_submenu_on{
    display: block;
    position: absolute;
    width: 100vw;
    display: flex;
    background-color: rgb(252,229,216);
    right: 0;
    top: 95px;
}
.submenu3{
    display: none;
}
.submenu3.car_submenu_on{
    display: block;
    position: absolute;
    width: 100vw;
    display: flex;
    background-color: rgb(252,229,216);
    right: 0;
    top: 95px;
}
.submenu2_child{
    padding: 30px;
}
.submenu2_child>:first-child{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 20px;
    color: rgb(129,113,135);
}
.submenulist2{
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.submenulist2>div{
    display: flex;
    cursor: pointer;
}
.submenulist2 img{
    width: 40px;
}
.submenulist2 h4{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
}
.submenulist2 p{
    font-family: Arial, Helvetica, sans-serif;
    margin: 5px 0px 0px 0px;
    font-size: 14px;
    color: rgb(129,113,135);
}
.submenulist2>div>div{
    margin-left: 10px;
}
#why_submenu_child>:last-child{
    width: 80vw;
    margin: auto;
    height: 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    background-color: rgb(255,243,237);
    margin-top: 40px;
}
.top_pro_submenu{
    display: none;
}

.top_pro_submenu.pro2_submenu_on{
    display: block;
    position: absolute;
    width: 100vw;
    border: 1px solid;
    background-color: rgb(252,229,216);
    right: 0;
    top: 115px;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 90;
}
#top_pro_submenu_body{
    width: 70vw;
    padding: 30px;
}
#top_pro_submenu_body>:last-child{
    width: 70vw;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}
#top_pro_submenu_body>:first-child{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
#top_pro_submenu_body>:nth-child(2){
    font-size: 18px;
    margin-bottom: 30px;
}
#top_pro_submenu_body>:last-child>div>:nth-child(1){
    width: 100%;
}
#top_pro_submenu_body>:last-child>div>:nth-child(2){
    width: 50%;
    margin-top: 20px;
}
#footer{
    width: 100vw;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(44,19,56);
}
#footer>div{
    width: 95vw;
    margin: auto;
}
#footer>div>:first-child{
    width: 10vw;
    padding-top: 50px;
    padding-bottom: 30px;
}
#footer_option{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 30px;
}
#footer_option>div>:first-child{
    font-size: 14px;
    font-weight: bold;
    color: rgb(169,145,152);
    margin-bottom: 20px;
}
#footer_option>div>:last-child{
    font-size: 14px;
    margin-bottom: 20px;
    color: white;
}
#footer_option>div>:last-child>div{
    margin-bottom: 5px;
}
#footer_option>div>:last-child>div:hover{
    color: rgb(229,124,216);
    cursor: pointer;
}
#footer>div>:nth-child(3){
    text-align: center;
    padding-bottom: 20px;
}
#footer2{
    background-color: rgb(65,42,76);
    width: 100vw;
}
#footer2>div{
    width: 95vw;
    margin: auto;
    padding: 20px 0px 20px 0px;
    display: flex;
    align-items: center;
    gap: 40px;
}
#footer2>div>:first-child{
    width: 12vw;
    color: rgb(234,204,189);
}
.footer2_ltr{
    color: white;
    cursor: pointer;
}
#footer2>div>:nth-child(2)>:last-child:hover{
    color: rgb(168,118,245);
}
#footer2>div>:nth-child(3)>:last-child:hover{
    color: rgb(255,138,122);
}
#footer3{
    width: 100vw;
    background-color: rgb(229,124,216);
}
#footer3>div{
    padding: 10px 30px;
}
#mainpart{
    background-color: rgb(65,42,76);
    border: 1px solid rgb(65,42,76);
    font-family: Arial, Helvetica, sans-serif;
}
#middle{
    width: 100vw;
    text-align: center;
    margin-bottom: 50px;
    color: rgb(252,229,216);
}
#middle>:first-child{
    font-size: 3.5rem;
    font-weight: bold;
    margin-top: 100px;
    margin-bottom: 30px;
    
}
#login{
    width: 40vw;
    margin: auto;
    background-color: rgb(44,19,56);
    padding: 50px;
    display: flex;
    flex-direction: column;
    position: sticky;
    z-index: 1111111;
}
.login_option{
    display: flex;
    justify-content: center;
    background-color: white;
    height: 2.5rem;
    width: 20vw;
    align-items: center;
    border-radius: 25px;
}
.login_option:hover{
    cursor: pointer;
    background-color: rgb(252,229,216);
}
.login_option img{
    width: 20px;
}
#login>:nth-child(2){
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    margin: auto;
    margin-bottom: 40px;
}
.login_label{
    font-size: 1rem;
    color: rgb(255,243,237);
    margin-bottom: 10px;
}
.login_input{
    background-color: transparent;
    border: 2px solid #ABA0AF;
    height: 40px;
    padding-left: 5px;
    caret-color: #2C1338;
    font-size: 0.875rem;
    line-height: 1.35;
    color: #FCE5D8;
    width: 100%;
    margin-bottom: 20px;
}
#login a{
    color: rgb(255,243,237);
    text-decoration: underline #ABA0AF;
}
#login>h4{
    text-align: right;
    margin-bottom: 20px;
}
#login>h4:hover{
    color: rgb(229,124,216);
}
#btn{
    width: 100%;
    background-color: rgb(229,124,216);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    border-radius: 25px;
    margin-bottom: 40px;
}
#btn:hover{
    background-color: rgb(91, 52, 109);
    cursor: pointer;
}
#login h5{
    font-weight: bold;
    color: rgb(255,243,237);
    text-align: center;
}
#login h5:hover{
    color: rgb(229,124,216);
}
#messege{
    margin-bottom: 10px;
    color: #FCE5D8;
}
#last_part{
    text-align: center;
    margin-top: 70px;
    margin-bottom: 100px;
    color: rgb(252,229,216);
}
#last_part>:first-child{
    margin-bottom: 40px;
}
#last_part>:last-child{
    width: fit-content;
    margin: auto;
    border-radius: 25px;
    padding: 10px 15px;
    background-color: rgb(229,124,216);
}
#last_part>:last-child:hover{
    background-color: rgb(91, 52, 109);
}
#last_part>:last-child>a{
    color: rgb(252,229,216);
    text-decoration: none;
}



@media all and (max-width:800px){
    #top{
        display: none;
    }
    #sec1{
        display: flex;
        background-color: rgb(252,229,216);
        border: 1px solid rgb(252,229,216);
    }
    .rightbar{
        display: flex;
        flex-direction: column;
        margin-left: 50vw;
    }
    .rightbar>div{
        width: 20px;
        height: 2px;
        background-color: white;
        margin: 2px;
    }
    #afterlogo{
        display: flex;
        flex-direction: column;
    }
    .navbarlist{
        display: none;
    }
    .navbarlist.mainmenu{
        display: flex;
        flex-direction: column;
        background-color: rgb(252,229,216);
        width: 100vw;
        position: absolute;
        right: 0;
        top: 99px;
        height: 100vh;
    }
    .navbarlist>li>a{
        color: rgb(65, 65, 65);
    }
    .navbarlist2{
        display: none;
    }
    .navbarlist2.mainmenu{
        display: flex;
        flex-direction: column;
        background-color: rgb(252,229,216);
        width: 100vw;
        position: absolute;
        right: 0;
        top: 250px;
    }
    .navbarlist2>li{
        margin-left: 25px;
        
    }
    .navbarlist2>li>a{
        color: rgb(65, 65, 65);
    }
    .navbarlist2>:nth-child(2){
        display: none;
    }
    .navbarlist2>:nth-child(3){
        text-align: center;
    }
    #navbarlist2_last{
        background-color: rgb(229,124,216);
        width: 20vw;
        padding: 10px;
        margin-left: 42vw;
    }
    #navbarlist2_last>a{
        color: white;
    }
    .submenubox.pro_submenu_on{
        top: 50px;
        z-index: 50;
        border: 1px solid;

    }
    .submenu{
        grid-template-columns: repeat(1,1fr);
    }
    #pro_submenu_line{
        display: none;
    }
    .submenubox{
        flex-direction: column;
    }
    .submenu3.car_submenu_on{
        top: 150px;
        z-index: 60;
        border: 1px solid;
    }
    .submenulist2{
        grid-template-columns: repeat(1, 1fr);
    }
    .submenu2.why_submenu_on{
        top: 110px;
        z-index: 70;
        border: 1px solid;
        flex-direction: column;
    }
    #footer_option{
        grid-template-columns: repeat(3,1fr);
    }
    #footer2>div{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    #footer2>div>:first-child{
        width: 100%;
    }
    #footer3>div{
        padding: 20px 30px;
    }
    #login{
        width: 85vw;
        margin: auto;
        background-color: rgb(44,19,56);
        display: flex;
        flex-direction: column;
        position: relative;
    }
    
}