@font-face {
    font-family: 'MADE Evolve Sans';
    src: url('../fonts/Evolve Sans/MADE Evolve Sans Bold (PERSONAL USE).otf') format('OpenType');
    font-weight: 500;
}
@font-face {
    font-family: 'MADE Evolve Sans';
    src: url('../fonts/Evolve Sans/MADE Evolve Sans Light (PERSONAL USE).otf') format('OpenType');
    font-weight: 200;
}
@font-face {
    font-family: 'MADE Evolve Sans';
    src: url('../fonts/Evolve Sans/MADE Evolve Sans Medium (PERSONAL USE).otf') format('OpenType');
    font-weight: 400;
}
@font-face {
    font-family: 'MADE Evolve Sans';
    src: url('../fonts/Evolve Sans/MADE Evolve Sans Regular (PERSONAL USE).otf') format('OpenType');
    font-weight: 300;
}
@font-face {
    font-family: 'MADE Evolve Sans';
    src: url('../fonts/Evolve Sans/MADE Evolve Sans Thin (PERSONAL USE).otf') format('OpenType');
    font-weight: 100;
}


@font-face {
    font-family: 'Reza Zulmi Serif';
    src: url('../fonts/Reza Zulmi Serif/RezaZulmiSerif.woff') format('WOFF');
}


header {
    background-color: #50afb6; 
    display: flex; 
    justify-content: space-between; 
    top: 0; 
    left: 0;
    width: 100%; 
    position: fixed;
    z-index: 100; 
    margin: 0 auto;
}
.burger-menu{
    display: none;
}
header a{
    width: 10%;
    margin: 0;
}
.header-img{
    display: block;
    width: 100%;
}
header ul{
    display: flex;
    justify-content: space-around;
    width: 40%;
    font-size: 1vw;
    font-family: 'Reza Zulmi Serif';
    margin: 1.7vw 0 0 0;
    padding: 0;
}
header ul li{
    margin: 0 0 0;
    padding: 0;
    list-style: none;
}
header ul li a{
    text-decoration: none;
    color: white;
    cursor: pointer;
}
header div{
    display: flex;
    justify-content: space-around;
    width: 10%;
    margin: 0 2vw 0 0 ;
}
header div a{
    margin: 1.5vw 2vw 0 0;
}
header div a img{
    width: 1.5vw;
    height: 1.5vw;
}

@media screen and (max-width: 1024px){
    header a{
        width: 15%;
    }
    header ul{
        width: 50%;
        font-size: 1.4vw;
        margin: 2.5vw 0 0 0;
    }
    header div{
        width: 15%;
        margin: 0 2vw 0 0 ;
    }
    header div a{
        margin: 2.3vw 2vw 0 0;
    }
    header div a img{
        width: 2.2vw;
        height: 2.2vw;
    }
}
@media screen and (max-width: 768px){
    header{
        display: flex;
        top: 0;
    }
    .burger-menu {
        display: flex;
        align-items: center;
        margin: 0 0 0 5vw;
    }
    .burger-icon {
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }
    .line {
        width: 6vw;
        height: 0.6vw;
        background-color: white;
        margin: 0.8vw;
        transition: all 0.3s ease;
    }
    .menu.active {
        display: block;
    }
    .menu ul {
        list-style: none;
        display: block;
        padding: 3vw 0;
        margin: 0 8vw;
        font-size: 3vw;
    }
    .menu li {
        margin: 3vw 0;
    }
    .menu {
        transition: all 0.3s ease;
        display: none;
        position: absolute;
        top: 12vw;
        left: 0;
        width: 50%;
        background-color: #50afb6;
        z-index: 10;
        opacity: 0.95;
    }
    header a{
        width: 30%;
    }
    .header-img{
        display: block;
        width: 100%;
    }
    header ul{
        display: none;
    }
    header ul li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    header div{
        display: flex;
        justify-content: space-around;
        width: 16%;
        margin: 0 10vw 0 0 ;
    }
    header div a{
        margin: 4vw 3vw 0 0;
    }
    header div a img{
        width: 5vw;
        height: 5vw;
    }
}


main{
    font-family: 'MADE Evolve Sans';
}


.section2, #masters{
    text-align: center;
    padding: 3vw 0 5vw;
    background-color: #50afb6;
    color: white;
}
.section2 h1, .section4 h1, .section5 h1, .section6 h1, .section7 h1, .section9 h1{
    text-align: center;
    font-size: 2.5vw;  
    font-weight: 500; 
}
.section2 div{
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 0 auto;
}
.section2 div p{
    font-weight: 200;
    width: 40%;
    line-height: 2;
    font-size: 1vw;
    margin: 3vw 0 0;
}
.section2 div img{
    width: 25vw;
}

@media screen and (max-width: 1024px){
    .section2{
        text-align: center;
        padding: 1vw 0 5vw;
        margin: 0;
    }
    .section2 h1, .section4 h1, .section5 h1, .section6 h1, .section7 h1, .section9 h1{
        font-size: 4vw;  
    }
    .section2 div{
        width: 100%;
    }
    .section2 div p{
        width: 60%;
        font-size: 1.8vw;
        margin: 0;
    }
    .section2 div img{
        width: 25vw;
        height: 25vw;
        margin: 3vw 0 0;
    }
}
@media screen and (max-width: 768px){
    .section2 h1, .section4 h1, .section5 h1, .section6 h1, .section7 h1, .section9 h1{
        font-size: 6vw;  
    }
    .section2 div{
        display: block;
    }
    .section2 div p{
        width: 95%;
        line-height: 2;
        font-size: 3vw;
        margin: 3vw auto 0;
    }
    .section2 div img{
        margin: 5vw 0 0;
        width: 50vw;
        height: 50vw;
    }
}


.section3{
    margin: 0 auto;
    padding: 3vw 0 5vw;
    text-align: center;
}
.section3 h1{
    text-align: center;
    font-size: 2.5vw;  
    font-weight: 500;
}
.section3-div{
    display: flex;
    justify-content: space-around;
    margin: 3vw 3vw 0;
}
.section3-div-div{
    margin: 0;
    padding: 0;
}
.section3-div-div div{
    display: flex;
    justify-content: space-between;
    width: 35vw;
    font-size: 1.2vw;
    font-weight: 300;
    margin: 0;
}
.section3-div-div img{
    width: 20vw;
    margin: 1vw 0 1vw 4vw;
}
.section3-div-div-div-span1{
    text-align: left;
}
.section3-div-div-div-span2{
    text-align: right;
}
.section3-div-div div span p{
    margin: .5vw 0;
}
.section3 button{
    border: 1px solid black;
    font-size: 1.5vw;
    font-family: 'MADE Evolve Sans';
    font-weight: 100;
    margin: 2vw 0 0;
    padding: .5vw;
}
.section3 button:hover{
    background-color: #50afb6;
    transition: 0.5s;
}
.section3 button a{
    text-decoration: none;
    color: black;
}
.section3 button a:hover{
    color: white;
}

@media screen and (max-width: 1024px){
    .section3{
        padding: 3vw 0 5vw;
    }
    .section3 h1{
        font-size: 4vw;
    }
    .section3-div{
        margin: 3vw 3vw 0;
    }
    .section3-div-div div{
        width: 40vw;
        font-size: 1.8vw;
    }
    .section3-div-div img{
        width: 28vw;
        margin: 2vw 0 2vw 4vw;
    }
    .section3-div-div div span p{
        margin: 1.5vw 0;
    }
    .section3 button{
        font-size: 1.8vw;
    }
}
@media screen and (max-width: 768px){
    .section3 h1{
        font-size: 6vw;
    }
    .section3-div{
        display: block;
        margin: 5vw 5vw;
    }
    .section3-div-div{
        margin: 0;
        padding: 0;
    }
    .section3-div-div div{
        width: 80%;
        font-size: 3vw;
        margin: 0 0 5vw 8vw;
    }
    .section3-div-div img{
        width: 60%;
        margin: 0 0 5vw;
    }
    .section3-div-div-img{
        display: none;
    }
    .section3-div-div div span p{
        margin: 2vw 0;
    }
    .section3 button{
        font-size: 3vw;
        padding: 2vw 3vw;
    }
}

#scrollBtn {
    display: none;
    position: fixed;
    bottom: 7vw;
    right: 3vw;
    z-index: 1000;
    border: none;
    outline: none;
    background-color: #68D8DF;
    color: white;
    cursor: pointer;
    height: 5vw;
    width: 5vw;
    font-size: 2vw;
    border-radius: 50%;
    opacity: .5;
}

@media screen and (max-width: 1024px){
    #scrollBtn{
        bottom: 10vw;
        right: 5vw;
        height: 6vw;
        width: 6vw;
        font-size: 3vw;
    }
}
@media screen and (max-width: 768px){
    #scrollBtn{
        display: none;
    }
}


.section4{
    margin: 5vw 7vw;
}
.section4-div{
    display: flex;
    justify-content: space-around;
    margin: 3vw 0 0 0;
}
.section4-div-div1{
    height: 37vw;
    width: 90%;
}
@media screen and (max-width: 1024px) {
    .section4-div-div1{
        height: 38vw;
    }
}
@media screen and (max-width: 768px) {
    .section4{
        margin: 0;
    }
    .section4-div-div1{
        height: 45vw;
        width: 100%;
    }
}
.section4-div-div{
    margin: 2vw 0 2vw 3vw;
}
.section4-div-div div{
    display: flex;
}
.section4-div-div div img{
    margin: 2vw 1vw 3.5vw 0;
}
.section4-div-div div span h5{
    font-size: 1.5vw;
    font-weight: 400;
    margin: 1vw 0 0;
}
.section4-div-div div span p{
    font-size: 1vw;
    font-weight: 200;
    margin: .5vw 0 0 .5vw;
}
#section4-div-div-div-span-p{
    font-weight: 200;
    margin: 0 0 0 -1vw;
    text-align: center;
    font-size: .9vw;
    width: 70%;
}

@media screen and (max-width: 1024px){
    .section4-div-div{
        margin: 2vw 0 2vw 5vw;
    }
    .section4-div-div div span h5{
        font-size: 2.5vw;
        margin: 1vw 0 0;
    }
    .section4-div-div div span p{
        font-size: 1.8vw;
        margin: 0;
    }
    #section4-div-div-div-span-p{
        margin: 0 0 0;
        font-size: 1.5vw;
        width: 90%;
    }
}
@media screen and (max-width: 768px){
    .section4-div{
        display: block;
        margin: 3vw 0 0 0;
    }
    .section4-div-div{
        columns: 2;
        margin: 2vw auto;
        width: 100%;
    }
    .section4-div-div div{
        display: flex;
        margin: 0 auto;
    }
    .section4-div-div div img{
        margin: 2vw 1vw 3.5vw 2vw;
    }
    .section4-div-div div span h5{
        font-size: 4vw;
        margin: 2vw 0 0;
    }
    .section4-div-div div span p{
        font-size: 2.8vw;
        margin: 1vw 0 0 1vw;
    }
    #section4-div-div-div-span-p{
        margin: 0 0 0 -1vw;
        font-size: 2.1vw;
        width: 100%;
    }
}


footer{
    font-family: 'Reza Zulmi Serif';
    color: white;
    background-color: #50afb6;
    display: flex;
    justify-content: space-between;
    bottom: 0;
    left: 0;
    width: 100%;
}
.footer-img{
    display: block;
    width: 12%;
}
.footer-div1{
    text-align: center;
    display: block;
    margin: 0 28% 0 30%;
    width: 50%;
}
.footer-div1 p{
    font-size: .8vw;
}
.footer-div1 span{
    display: flex;
    justify-content: space-around;
}
.footer-div1 span img{
    width: 2vw;
}
.footer-div2{
    display: block;
    margin: 0 .5vw 0 0;
}
.footer-div2 p{
    font-size: .6vw;
    text-align: right;
}

@media screen and (max-width: 1024px){
    .footer-img{
        width: 18%;
    }
    .footer-div1{
        margin: 0 15% 0 20%;
        width: 70%;
    }
    .footer-div1 p{
        font-size: 1.1vw;
    }
    .footer-div1 span img{
        width: 3vw;
    }
    .footer-div2{
        margin: 0 .5vw 0 0;
    }
    .footer-div2 p{
        font-size: .9vw;
    }
}
@media screen and (max-width: 768px){
    footer{
        display: block;
        margin: 0 auto;
        padding: 0 0 2vw;
    }
    .footer-img{
        display: block;
        width: 45%;
        margin: 0 auto;
    }
    .footer-div1{
        text-align: center;
        display: block;
        margin: 0 auto;
        width: 70%;
    }
    .footer-div1 p{
        font-size: 2.5vw;
        margin: 0 0 2vw;
    }
    .footer-div1 span{
        display: flex;
        justify-content: space-around;
    }
    .footer-div1 span img{
        width: 9vw;
    }
    .footer-div2{
        display: block;
        width: 95%;
        margin: 0 auto;
    }
    .footer-div2 p{
        font-size: 2vw;
        text-align: center;
    }
}


.main1{
    margin: 8vw auto 0;
}
.section5{
    margin: 0 auto;
}
.section7{
    margin: 0 auto;
    width: 90%;
}
.section5-div{
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
}
.section5-div span p{
    font-weight: 100;
    font-size: 1vw;
}
.section5-div-div1, .section5-div-div11{
    width: 35%;
    margin: 3vw 0 0 0;
}
#section5-div-div{
    width: 25%;
}
.section5-div-div1 h3, .section5-div-div11 h3{
    text-align: center;
    font-weight: 400;
    font-size: 1.5vw;
    margin: 0;
}
.section5-div-div1 hr, .section5-div-div11 hr{
    width: 35%;
}
.section5-div-div1 div, .section5-div-div11 div{
    display: flex;
    justify-content: space-between;
    margin: 0 auto 5vw;
}
.section5-div-div2{
    display: flex;
    flex-wrap: wrap;
    width: 20%;
}
.section5-div-div img{
    width: 22vw;
    height: 27vw;
    margin: 5vw auto;
}
.section5-div-div-img{
    margin: 0 auto;
}
.section5-div-div-img img{
    width: 25vw;
    height: 13vw;
}
.section5-div-div2 img{
    width: 15vw;
    height: 20vw;
    margin: 1vw auto;
}
.section5-div-div-div-span2{
    text-align: right;
}

@media screen and (max-width: 1024px){
    .main1{
        margin: 10vw auto 0;
    }
    .section7{
        width: 100%;
    }
    .section7 div div hr{
        width: 100%;
    }
    .section5-div span p{
        font-size: 1.8vw;
    }
    .section5-div-div1{
        width: 35%;
        margin: 2vw auto 0;
    }
    .section5-div-div11{
        width: 60%;
        margin: 2vw auto 0;
    }
    .section5-div-div11 div{
        margin: 0 auto 5vw;
    }
    .section5-div-div11 h3, .section5-div-div1 h3{
        font-size: 2.5vw;
    }
    .section5-div-div1 hr, .section5-div-div11 hr{
        width: 60%;
    }
    .section5-div-div1 div{
        margin: 0 auto 5vw;
    }
    .section5-div-div img{
        width: 25vw;
        height: 33vw;
        margin: 15vw 2vw 0 0;
    }
    .section5-div-div2{
        margin: 4vw auto;
    }
    .section5-div-div2 img{
        width: 18vw;
        height: 23vw;
        margin: 6vw auto 5vw;
    }
}
@media screen and (max-width: 768px){
    .main1{
        margin: 18vw auto 0;
    }
    .section5{
        padding: 0;
    }
    .section7{
        padding: 0;
    }
    .section7 div div hr{
        width: 60%;
    }
    .section5-div{
        display: block;
        margin: 0 auto;
    }
    .section5-div span p{
        font-size: 2.8vw;
    }
    #section5-div-div{
        width: 80%;
    }
    .section5-div-div{
        text-align: center;
    }
    .section5-div-div1{
        width: 90%;
        margin: 0 auto;
    }
    .section5-div-div11{
        width: 90%;
        margin: 0 auto;
    }
    .section5-div-div11 h3, .section5-div-div1 h3{
        font-size: 4.5vw;
    }
    .section5-div-div1 hr{
        width: 45%;
    }
    .section5-div-div11 hr{
        width: 55%;
    }
    .section5-div-div2{
        width: 100%;
    }
    .section5-div-div-img{
        width: 100%;
    }
    .section5-div-div-img img{
        width: 80%;
        height: 50%;
        margin: 0 auto 3vw 10vw;
    }
    .section5-div-div2-img{
        display: none;
    }
    .section5-div-div img{
        width: 50%;
        height: 100%;
        margin: 0 auto 5vw;
    }
    .section5-div-div2 img{
        width: 50%;
        height: 100%;
        margin: 0 auto;
    }
}


.section6{
    padding: 3vw 0 3vw;
    margin: 0 auto;
    background-color: #50afb6;
    color: white;
}
.section6-div{
    display: flex;
    justify-content: space-around;
}
.section6-div span p{
    font-weight: 100;
    font-size: 1vw;
}
.section6-div-div1{
    width: 35%;
    margin: 3vw 0 0 0;
}
.section6-div-div1 h3{
    text-align: center;
    font-weight: 400;
    font-size: 1.5vw;
    margin: 0;
}
.section6-div-div1 hr{
    width: 35%;
}
.section6-div-div1 div{
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto 2vw;
}
.section6-div-div2{
    display: flex;
    flex-wrap: wrap;
    width: 25%;
}
.section6-div-div2 img{
    width: 22vw;
    height: 27vw;
    margin: 1vw auto;
}
.section6-div-div img{
    width: 22vw;
    height: 36vw;
    margin: 1vw auto;
}
.section6-div-div-div-span2{
    text-align: right;
}

@media screen and (max-width: 1024px){
    .section6-div{
        width: 100%;
    }
    .section6-div span p{
        font-size: 2vw;
    }
    .section6-div-div1{
        width: 60%;
        margin: 1.5vw 0 0 0;
    }
    .section6-div-div1 h3{
        font-size: 2.5vw;
    }
    .section6-div-div1 div{
        width: 80%;
    }
    .section6-div-div2{
        display: none;
    }
    .section6-div-div{
        display: none;
    }    
}
@media screen and (max-width: 768px){
    .section6{
        padding: 1vw 0 3vw;
    }
    .section6-div{
        display: block;
    }
    .section6-div span p{
        font-size: 2.8vw;
    }
    .section6-div-div{
        text-align: center;
    }
    .section6-div-div1 div{
        width: 90%;
    }
    .section6-div-div1{
        width: 100%;
        margin: 3vw 0 0 0;
    }
    .section6-div-div1 h3{
        font-size: 4.5vw;
    }
    .section6-div-div2{
        width: 100%;
        display: block;
        text-align: center;
    }
    .section6-div-div{
        display: block;
    } 
    .section6-div-div2 img{
        width: 50%;
        height: 100%;
        margin: 0 auto;
    }
    .section6-div-div img{
        width: 50%;
        height: 100%;
        margin: 0 auto;
    }
}


.section8{
    background-color: #50afb6;
    padding: 3vw 0 3vw;
    margin: 0 auto;
}
.section8 h1{
    color: white;
    text-align: center;
    font-size: 2.5vw;  
    font-weight: 500;
}
.section8 div{
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
}
.section8 div img{
    width: 33%;
}
.section8 div form{
    background-color: white;
    width: 32%;
    height: 36.8vw;
    margin: 1vw 0 0;
    box-shadow: 0px 0px 15px 0px rgb(45, 45, 45);
}
.section8 div form h4{
    font-weight: 400;
    text-align: center;
    font-size: 1.8vw;
}
.section8 div form label{
    font-weight: 200;
    display: block;
    margin: .5vw 3vw 0;
    font-size: 1vw;
}
.section8 div form input{
    width: 82%;
    height: 2vw;
    margin: .5vw 2.5vw 1vw;
}
.section8 div form textarea{
    font-family: 'MADE Evolve Sans';
    margin: 0 2.5vw;
    width: 82%;
    margin: .5vw 2.5vw 1vw;
    height: 8vw;
}
.section8 div form button{
    font-family: 'MADE Evolve Sans';
    text-align: center;
    margin: 1vw 20%;
    padding: 1.5vw 0;
    width: 60%;
    background-color: #50afb6;
    border: none;
    color: white;
    font-weight: 300;
    font-size: 1.2vw;
}
.section8 article{
    text-align: right;
}
.section8 article a{
    font-size: 1.1vw;
    background-color: #FFCB00;
    width: fit-content;
    text-decoration: none;
    color: black;
    padding: .8vw 1.5vw;
    text-align: right;
    position: fixed;
    display: none;
    bottom: 9vw;
    right: 3vw;
}
.section8 article img{
    width: 4vw;
    position: fixed;
    bottom: 4vw;
    right: 3vw;
}

@media screen and (max-width: 1024px){
    .section8 h1{
        font-size: 4vw;
    }
    .section8 div img{
        width: 45%;
    }
    .section8 div form{
        background-color: white;
        width: 45%;
        height: 50.8vw;
    }
    .section8 div form h4{
        font-size: 3vw;
        margin: 2.5vw 0;
    }
    .section8 div form label{
        font-size: 2vw;
        margin: .5vw 0 0 5vw;
    }
    .section8 div form input{
        height: 3vw;
        margin: .5vw 4vw 1vw;
    }
    .section8 div form textarea{
        margin: .5vw 4vw 1vw;
        height: 10vw;
    }
    .section8 div form button{
        padding: 2.5vw 0;
        font-size: 2vw;
    }
    .section8 article{
        text-align: right;
    }
    .section8 article a{
        font-size: 1.8vw;
        padding: 1vw 1.8vw;
        bottom: 11vw;
        right: .9vw;
    }
    .section8 article img{
        width: 6vw;
        bottom: 4vw;
        right: 4.5vw;
    }        
}
@media screen and (max-width: 768px){
    .section8{
        padding: 3vw 0 3vw;
        margin: 0 auto;
    }
    .section8 h1{
        font-size: 6vw;  
    }
    .section8 div{
        display: block;
        width: 100%;
    }
    .section8 div img{
        display: none;
    }
    .section8 div form{
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding: 3vw 0;
    }
    .section8 div form h4{
        margin: 0;
        font-size: 4.5vw;
    }    
    .section8 div form label{
        margin: 3vw 8vw 0;
        font-size: 3.5vw;
    }
    .section8 div form input{
        width: 80%;
        height: 6vw;
        margin: .5vw 7vw 1vw;
    }
    .section8 div form textarea{
        width: 80%;
        margin: .5vw 7vw 1vw;
        height: 15vw;
    }
    .section8 div form button{
        margin: 2vw 20%;
        padding: 2vw 0;
        width: 60%;
        font-size: 4vw;
    }
    .section8 article a{
        font-size: 3vw;
        padding: 2vw 2.5vw;
        bottom: 21vw;
        right: 1.5vw;
    }
    .section8 article img{
        width: 10vw;
        bottom: 10vw;
        right: 5vw;
    }
}


.profile-section {
    margin: 5vw auto; 

}

.profile-section h1 {
    text-align: center;
    font-size: 2.5em;
    color: #333; 
    margin-bottom: 20px; 
}

.profile-section-div{
    display: flex;
    margin: 0 auto;
    width: 98%;
}

.profile-section-div form{
    margin: 0 auto;
    width: 40%;
}

.profile-section label {
    display: block;
    margin-bottom: 5px; 
}

.profile-section input[type="text"],
.profile-section input[type="tel"],
.profile-section input[type="email"],
.profile-section input[type="date"],
.profile-section input[type="password"],
.profile-section textarea {
    width: 96.5%; 
    padding: 10px; 
    margin-bottom: 15px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    font-size: 1em; 
    transition: border-color 0.3s;
}

.profile-section input:focus,
.profile-section textarea:focus {
    border-color: #50afb6; 
    outline: none; 
}

.profile-section-div form button {
    width: 100%; 
    padding: 10px;
    background-color: #50afb6; 
    color: white;
    border: none; 
    border-radius: 5px; 
    font-size: 1.2em; 
    cursor: pointer; 
    transition: background-color 0.3s; 
}

.profile-section-div form button:hover {
    background-color: #3a9a9e; 
}

.error-message {
    color: red; 
    font-size: 0.9em;
    margin-top: -10px; 
    margin-bottom: 10px; 
}

.profile-section select {
    width: 100%; 
    padding: 10px; 
    margin-bottom: 15px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    font-size: 1em; 
    background-color: #fff;
    transition: border-color 0.3s; 
}

.profile-section select:focus {
    border-color: #50afb6; 
    outline: none;
}

.profile-section select option {
    padding: 10px; 
    background-color: #fff; 
    color: #333; 
}

.profile-section select option:hover {
    background-color: #f0f0f0; 
}

.profile-buttons {
    width: 30%;
    display: block;
    margin: 7vw auto;
}

.profile-buttons a {
    text-decoration: none;
    background-color: #50afb6; 
    color: white; 
    border: none;
    font-size: 1.5em; 
    cursor: pointer;
    transition: background-color 0.3s; 
    position: absolute;
}

.profile-buttons-a1{
    padding: 4vw 10vw;
    margin: -6vw 0;
}
.profile-buttons-a2{
    padding: 4vw 12.2vw;
    margin: 6vw 0;
}
.profile-buttons-a3{
    padding: 4vw 12.7vw;
    margin: 18vw 0;
}

.profile-buttons a:hover {
    background-color: #3a9a9e; 
}


@media (max-width: 1024px){
    .profile-buttons {
        width: 40%;
    }
    .profile-buttons-a1{
        padding: 6vw 8.5vw;
        margin: 0;
    }
    .profile-buttons-a2{
        margin: 25vw 0;
        padding: 6vw 13.8vw;
    }
    .profile-buttons-a3{
        margin: 50vw 0;
        padding: 6vw 15vw;
    }
}

@media (max-width: 768px) {
    .profile-section {
        margin: 20vw auto 115vw; 
    }
    .profile-section-div{
        display: block;
        width: 95%;
    }
    .profile-section-div form{
        width: 100%;
    }
    .profile-buttons {
        width: 100%;
        margin: 5vw auto;
    }
    .profile-buttons a {
        font-size: 5vw; 
    }
    .profile-buttons-a1{
        padding: 10vw 18vw;
        margin: 0 12vw;
    }
    .profile-buttons-a2{
        padding: 10vw 27vw;
        margin: 37vw 12vw;
    }
    .profile-buttons-a3{
        padding: 10vw 29vw;
        margin: 75vw 12vw;
    }
}



.main{
    margin: 7vw auto 0;
}
.main h1{
    text-align: center;
    font-size: 2vw;  
    font-weight: 400; 
}
.section91{
    margin: 0 auto;
    padding: 3vw 0 0;
    display: flex;
    flex-wrap: wrap;
}
.product-card{
    width: 20%;
    background-color: white;
    box-shadow: 0 0 10px gray;
    margin: 0 auto 2.4vw 2.4vw;
}
.product-card-img{
    width: 100%;
    height: 18vw;
    object-fit: contain;
}
.product-card a{
    display: block;
    font-weight: 300;
    font-size: 1vw;
    margin: 0 1vw .5vw;
    height: 3vw;
    text-decoration: none;
    color: black;
}
.section9-div-div1{
    display: flex;
    justify-content: space-between;
    margin: 0 1vw .5vw;
}
.price{    
    display: block;
    font-weight: 400;
    font-size: 1.8vw;
    letter-spacing: .3vw;
    color: black;
}
.quantity{
    display: flex;
    justify-content: space-between;
    width: 30%;
    color: black;
}
.decrement, .increment{
    font-family: 'MADE Evolve Sans';
    border-radius: 50%;
    border: 1px solid black;
    width: 1.5vw;
    height: 1.5vw;
    background-color: white;
    font-size: 1.3vw;
    padding: 0;
    margin: 0;
}
.count{
    font-family: 'MADE Evolve Sans';
    font-size: 1.3vw;
}
.section9-div-div1 p{
    font-size: .7vw;
    margin: .5vw 0 0;
    font-weight: 300;
}
.add-to-cart{
    font-family: 'MADE Evolve Sans';
    background-color: #50afb6;
    color: white;
    border: none;
    width: 12vw;
    height: 2vw;
    text-align: center;
    text-decoration: none;
    font-weight: 300;
    font-size: 1vw;
}
.request-quote{
    font-family: 'MADE Evolve Sans';
    background-color: white;
    border: 1px solid black;
    width: 12vw;
    height: 2vw;
    text-align: center;
    text-decoration: none;
    font-weight: 300;
    font-size: 1vw;
}
.section9-div-div1 img{
    width: 2vw;
}
.category-buttons {
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    width: 50%;
}
.category-buttons button {
    padding: 10px 15px; 
    border: none; 
    border-bottom: 1px solid black;
    background-color: white;
    cursor: pointer; 
    border-radius: 5px; 
}
.category-buttons button:hover {
    background-color: #50afb6; 
    color: white;
}
/* CSS для модального окна */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
    font-family: 'MADE Evolve Sans';
    font-weight: 100;
}
.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 2vw;
    border: 1px solid #888;
    width: 50%; 
    display: block;
}
.modal-content h1{
    text-align: center;
    font-size: 2vw;
    font-weight: 400;
    margin: 1vw 0 0;
}
.modal-content label{
    font-size: 1vw;
    display: block; /* Чтобы метки были на отдельной строке */
    margin-bottom: 0.5vw; /* Отступ снизу */
}
.modal-content p{
    text-align: center;
    font-size: 1vw;
    margin: 0 0 1vw;
}
.modal-content input[type="number"],
.modal-content input[type="text"] {
    width: 98%;
    height: 2vw; 
    margin: 0.2vw 0 1vw;
    font-weight: 100; 
    font-family: 'MADE Evolve Sans';
    font-size: 1.2vw;
    border: 1px solid #ccc; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    transition: border-color 0.3s, box-shadow 0.3s;
    padding: 0 0 0 .5vw;
}

.modal-content input[type="number"]:focus,
.modal-content input[type="text"]:focus {
    border-color: #50afb6; /* Цвет границы при фокусировке */
    box-shadow: 0 0 5px #50afb6; /* Тень при фокусировке */
    outline: none; /* Убираем стандартный контур */
}
.modal-content button{
    font-family: 'MADE Evolve Sans';
    background-color: #50afb6;
    color: white;
    border: none;
    width: 50%;
    height: 2.5vw;
    text-align: center;
    text-decoration: none;
    font-weight: 300;
    font-size: 1vw;
    margin: 1.5vw 12vw;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@media screen and (max-width: 1024px){
    .main h1{
        font-size: 4vw;
        margin: 10vw 0 1.5vw;
    }
    .section9{
        justify-content: center;
    }
    .product-card{
        width: 40%;
        margin: 2vw;
    }
    .product-card-img{
        width: 100%;
        height: 30vw;
    }
    .product-card a{
        font-size: 2vw;
        margin: 0 1.5vw 1vw;
        height: 6vw;
    }
    .section9-div-div1{
        margin: 0 1.5vw 1vw;
    }
    .price{
        font-size: 2.5vw;
        letter-spacing: .5vw;
    }
    .quantity{
        width: 30%;
    }
    .decrement, .increment{
        width: 3vw;
        height: 3vw;
        font-size: 2vw;
    }
    .count{
        font-size: 2.5vw;
    }
    .section9-div-div1 p{
        font-size: 1.5vw;
        margin: .5vw 0 0;
    }
    .add-to-cart{
        width: 25vw;
        height: 4vw;
        font-size: 1.7vw;
    }
    .request-quote{
        width: 25vw;
        height: 4vw;
        font-size: 1.7vw;
    }
    .section9-div-div1 img{
        width: 3.5vw;
    }
    .category-buttons {
        width: 90%;
    }
    /* CSS для модального окна */
    .modal-content {
        margin: 20% auto;
        padding: 3vw 5vw;
        width: 70%; 
    }
    .modal-content h1{
        font-size: 5vw;
        margin: 1vw 0 0;
    }
    .modal-content label{
        font-size: 2vw;
        margin-bottom: 0.5vw;
    }
    .modal-content p{
        font-size: 1.8vw;
        margin: 0 0 3vw;
    }
    .modal-content input[type="number"],
    .modal-content input[type="text"] {
        height: 4vw; 
        margin: 0.5vw 0 2vw;
        font-size: 1.5vw;
        padding: 0 0 0 1.2vw;
    }
    .modal-content button{
        width: 50%;
        height: 5vw;
        font-size: 2.5vw;
        margin: 2vw 16.5vw;
    }
}
@media screen and (max-width: 768px){
    .main h1{
        font-size: 6vw;  
        margin: 25vw 0 1vw;
    }
    .section9{
        display: block;
        padding: 2vw;
    }
    .product-card{
        width: 70%;
        margin: 3vw 15%;
        padding: 0 0 1vw;
    }
    .product-card-img{
        width: 100%;
        height: 60vw;
    }
    .product-card a{
        font-size: 3.5vw;
        margin: 2vw 5vw 1.5vw;
        height: 12vw;
    }
    .section9-div-div1{
        margin: 0 5vw 3vw;
    }
    .price{    
        font-size: 5vw;
        letter-spacing: .8vw;
    }
    .quantity{
        width: 40%;
    }
    .decrement, .increment{
        width: 6vw;
        height: 6vw;
        font-size: 5vw;
    }
    .count{
        font-size: 5vw;
    }
    .section9-div-div1 p{
        font-size: 3.5vw;
        margin: .5vw 0 0;
    }
    .add-to-cart, .request-quote{
        width: 40vw;
        height: 8vw;
        font-size: 3.5vw;
    }
    .section9-div-div1 img{
        width: 7vw;
    }
    .category-buttons {
        width: 100%;
        display: block;
        margin: 0 auto;
        text-align: center;
        margin: 5vw 0;
    }
            /* CSS для модального окна */
            .modal-content {
                margin: 30% auto;
                padding: 5vw 8vw;
                width: 80%; 
            }
            .modal-content h1{
                font-size: 8vw;
            }
            .modal-content label{
                font-size: 4vw;
            }
            .modal-content p{
                font-size: 3.5vw;
                margin: 0 0 5vw;
            }
            .modal-content input[type="number"],
            .modal-content input[type="text"] {
                height: 7vw; 
                margin: 0.5vw 0 3vw;
                font-size: 3vw;
                padding: 0 0 0 2vw;
            }
            .modal-content button{
                width: 80%;
                height: 10vw;
                font-size: 4.5vw;
                margin: 5vw 7.5vw;
            }
}


.basket{
    padding: 4vw 0;
}
.basket h1{
    font-size: 2.5vw;
    margin: 2vw 0 1.5vw 5vw;
}
.cart-div{
    display: flex;
    justify-content: space-around;
    margin: 1vw 0 0;
}
.cart-div-p{
    font-size: 1.5vw;
    font-weight: 300;
}
.cart-div button{
    width: 15vw;
    height: 3vw;
    font-size: 1vw;
    font-family: 'MADE Evolve Sans';
    font-weight: 200;
    margin: 1vw 0 0;
}
.button-to-catalog{
    background-color: white;
    border: 1px solid black;
}
.button-zakaz{
    background-color: #50afb6;
    border: none;
    color: white;
}
.clear-cart{
    font-family: 'MADE Evolve Sans';
    background-color: white;
    border: none;
    display: flex;
    padding: 0;
    font-size: 1vw;
    font-weight: 100;
    position: absolute;
    top: 6.7vw;
    left: 18vw;
    color: red;
}
.clear-cart img{
    padding: 0;
    width: 1.5vw;
}
.basket-section-table{
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}
.basket-section-table tr{
    border-bottom: 1px solid black;
    font-size: 1.3vw;
}
.basket-section-table td{
    font-weight: 100;
    font-size: 1.3vw;
    margin: 0;
}
.basket-section-table th{
    font-weight: 300;
}
.basket-section-table-tbody-tr-td1{
    text-align: center;
    width: 3vw;
}
.basket-section-table-tbody-tr-td2{
    width: 10vw;
}
.basket-section-table-tbody-tr-td-img{
    width: 8vw;
    height: 8vw;
    object-fit: cover;
    margin: 0 0 0 2vw;
    padding: 0;
}
.basket-section-table-tbody-tr-td3{
    padding: 0 0 0 2vw;
    width: 50vw;
}
.basket-section-table-tbody-tr-td4{
    text-align: center;
    width: 8vw;
}
.basket-section-table-tbody-tr-td5{
    margin: 0 auto;
    width: 8vw;
}
.basket-section-table-tbody-tr-td5 .quantity{
    width: 70%;
    margin: 0 auto;
}
.subtotal{
    width: 8vw;
    text-align: center;
}
.basket-section-table-tbody-tr-td7{
    width: 8vw;
}
.basket-section-table-tbody-tr-td7 div{
    display: flex;
    justify-content: space-around;
}
.basket-section-table-tbody-tr-td7 div button{
    border: none;
    background-color: white;
}
.basket-footer{
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
}

@media screen and (max-width: 1024px){
    .basket{
        padding: 7vw 0;
    }
    .basket h1{
        font-size: 4vw;
        margin: 2.5vw 0 2vw 7vw;
    }
    .cart-div{
        display: flex;
        justify-content: space-around;
        margin: 1vw 0 0;
    }
    .cart-div-p{
        font-size: 3vw;
    }
    .cart-div button{
        width: 25vw;
        height: 6vw;
        font-size: 2vw;
        margin: 1.5vw 0 0;
    }
    .clear-cart{
        font-size: 1.6vw;
        top: 11vw;
        left: 27vw;
    }
    .clear-cart img{
        width: 2vw;
    }
    .basket-section-table tr{
        font-size: 2.5vw;
    }
    .basket-section-table td{
        font-size: 2vw;
    }
    .basket-section-table-tbody-tr-td1{
        width: 3vw;
        height: 8vw;
    }
    .basket-section-table-tbody-tr-td2{
        width: 20vw;
    }
    .basket-section-table-tbody-tr-td-img{
        width: 20vw;
        height: 20vw;
        margin: 0 0 0 1vw;
    }
    .basket-section-table-tbody-tr-td3{
        padding: 0;
        width: 20vw;
    }
    .basket-section-table-tbody-tr-td7{
        width: 8vw;
    }
}

@media screen and (max-width: 768px){
    .basket{
        padding: 15vw 0;
    }
    .basket h1{
        font-size: 6vw;
        margin: 2vw 0 1.5vw 8vw;
    }
    .cart-div{
        display: block;
        margin: 5vw auto 0;
        text-align: center;
    }
    .cart-div-p{
        font-size: 5vw;
    }
    .cart-div button{
        width: 60%;
        height: 10vw;
        font-size: 4vw;
        margin: 0;
    }
    .clear-cart{
        font-size: 2vw;
        top: 20vw;
        left: 40vw;
    }
    .clear-cart img{
        width: 3vw;
    }
    .basket-section-table thead{
        display: none;
    }
    .basket-section-table tbody{
        display: block;
        width: 100%;
    }
    .basket-section-table tr{
        font-size: 3.5vw;
        border-top: 1px solid black;
    }
    .basket-section-table td{
        font-size: 3.5vw;
    }
    .basket-section-table-tbody-tr-td1{
        width: 3vw;
    }
    .basket-section-table-tbody-tr-td2{
        width: 12vw;
    }
    .basket-section-table-tbody-tr-td-img{
        width: 12vw;
        height: 12vw;
    }
    .basket-section-table-tbody-tr-td3{
        padding: 0 0 0 .5vw;
        width: 25%;
    }
    .basket-section-table-tbody-tr-td5{
        width: 25%;
    }
    .basket-section-table-tbody-tr-td7 div{
        display: block;
    }
    .basket-section-table-tbody-tr-td7 div img{
        width: 6vw;
    }
}



.check-div{
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.check-div h2{
    font-size: 1.8vw;
    font-weight: 400;
}
.check-div-div1{
    width: 50%;
}
.check-div-div1-div{
    display: flex;
    justify-content: space-between;
    font-weight: 100;
    margin: .5vw 0;
}
.check-div-div1-div label{
    margin: 1vw 0 0;
}
.check-div-div1-div input, .check-div-div1-div textarea{
    width: 25vw;
    height: 2vw;

}
.check-div-div1-div2{
    display: flex;
    justify-content: space-around;
    font-weight: 100;
    margin: 0 0 2vw;
}
.check-div-div1-div1{
    display: flex;
    justify-content: space-between;
    font-weight: 100;
}
.address{
    margin: 1vw 0;
}
.check-div-div1-div1-div{
    display: block;
}
.check-div-div1-div1-div input{
    height: 2vw;
    font-weight: 100;
    font-family: 'MADE Evolve Sans';
}
.check-div-div1-div1-div input[type="text"] {
    color: #262626;
}
.check-div-div1-div1-div input[type="text"]:focus {
    color: black;
}
#street{
    width: 14.7vw;
}
#house{
    width: 4.5vw;
}
#apartment{
    width: 4.5vw;
}
.check-div-div2{
    width: 40%;
}
.check-div-div2 .order-item{
    margin: 0 0 2vw;
}
.check-div-div2 .order-item img{  
    width: 10vw;
    height: 10vw;
    object-fit: contain;
}
.check-div-div2 p{
    font-size: 1.1vw;
    font-weight: 200;
}
.check-div-div2 button{
    font-family: Reza Zulmi Serif;
    background-color: #68D8DF;
    border: none;
    width: 15vw;
    height: 3vw;
    text-align: center;
    font-size: 1vw;
}

@media screen and (max-width: 1500px){
    .check-div-div1-div1-div{
        display: block;
        margin: 0 0 0 16vw;
    }
    #street{
        width: 14vw;
    }
    #house{
        width: 4.5vw;
    }
    #apartment{
        width: 4.5vw;
    }
}

@media screen and (max-width: 1430px){
    .check-div-div1-div1-div{
        display: block;
        margin: 0 0 0 13vw;
    }
    #street{
        width: 14vw;
    }
    #house{
        width: 4.5vw;
    }
    #apartment{
        width: 4.5vw;
    }
}

@media screen and (max-width: 1300px){
    .check-div-div1-div1-div{
        display: block;
        margin: 0 0 0 14vw;
    }
    #street{
        width: 13.5vw;
    }
    #house{
        width: 4.5vw;
    }
    #apartment{
        width: 4.5vw;
    }
    .street{
        margin: 0 10vw 0 0;
    }
    .house{
        margin: 0 2vw 0 0;
    }
}

@media screen and (max-width: 1024px){
    .check-div{
        display: block;
        margin: 0 auto;
    }
    .check-div h2{
        font-size: 3vw;
    }
    .check-div-div1{
        width: 100%;
    }
    .check-div-div1-div{
        margin: 1vw 0;
    }
    .check-div-div1-div label{
        margin: 1.5vw 0 0;
        font-size: 1.8vw;
    }
    .check-div-div1-div input, .check-div-div1-div textarea{
        width: 50vw;
        height: 3vw;
    }
    .check-div-div1-div2{
        margin: 0 0 2.5vw;
        font-size: 1.8vw;
    }
    .address{
        margin: 1.5vw 0;
        font-size: 1.8vw;
    }
    .check-div-div1-div1-div input{
        height: 3vw;
        font-size: 1.8vw;
    }
    #street{
        width: 31vw;
    }
    #house{
        width: 8vw;
    }
    #apartment{
        width: 8vw;
    }
    .check-div-div2{
        width: 100%;
    }
    .check-div-div2 .order-item{
        margin: 0 0 2vw;
    }
    .check-div-div2 .order-item img{  
        width: 20vw;
        height: 20vw;
    }
    .check-div-div2 p{
        font-size: 1.5vw;
    }
    .check-div-div2 button{
        width: 40vw;
        height: 6vw;
        font-size: 2.5vw;
    }
}

@media screen and (max-width: 768px){
    .check-div h2{
        font-size: 4.5vw;
    }
    .check-div-div1-div{
        margin: 2vw 0;
        display: block;
    }
    .check-div-div1-div label{
        margin: 2vw 0 0;
        font-size: 3.5vw;
    }
    .check-div-div1-div input, .check-div-div1-div textarea{
        width: 100%;
        height: 5vw;
    }
    .check-div-div1-div1{
        display: block;
    }
    .check-div-div1-div2{
        margin: 0 0 2vw;
        font-size: 3.5vw;
        display: block;
    }
    .check-div-div1-div2 div{
        margin: 0 0 2vw;
    }
    .address{
        margin: 0;
        font-size: 3.5vw;
    }
    .check-div-div1-div1-div{
        margin: 0;
    }
    .check-div-div1-div1-div{
        display: block;
        width: 100%;
        margin: 3vw 0 0;
        font-size: 3.5vw;
    }
    .check-div-div1-div1-div input{
        width: 100%;
        height: 5vw;
        margin: 0 0 1vw 0;
        font-size: 3vw;
    }
    #street{
        width: 100%;
    }
    #house{
        width: 100%;
    }
    #apartment{
        width: 100%;
    }
    .check-div-div2 .order-item{
        margin: 0 0 2vw;
    }
    .check-div-div2 .order-item img{  
        width: 30vw;
        height: 30vw;
    }
    .check-div-div2 p{
        font-size: 3vw;
    }
    .check-div-div2 button{
        width: 60vw;
        height: 10vw;
        font-size: 4.5vw;
    }
}



.payment-main{
    width: 90%;
    margin: 0 auto;
}
.payment-main p{
    font-size: 1.2vw;
    font-weight: 300;
}
.qr-code-container{
    display: flex;
    justify-content: space-around;
}
.qr-code-container img{
    width: 25vw;
    height: 25vw;
}
.qr-code-container ol li{
    margin: 2vw 0 0;
    font-size: 1.5vw;
    font-weight: 200;
}
.qr-code-container ol li span{
    font-weight: 400;
}
.order-history-link a{
    display: inline-block;
    margin-top: 2vw;
    padding: .5vw 2vw;
    font-size: 1.2vw;
    font-weight: 200;
    background-color: #50afb6;
    color: white;
    text-decoration: none; 
    border-radius: 5px; 
    transition: background-color 0.3s; 
}
.order-history-link a:hover {
    background-color:  #3a9a9e; 
}

@media screen and (max-width: 1024px){
    .payment-main p{
        font-size: 2vw;
    }
    .qr-code-container img{
        width: 40vw;
        height: 40vw;
    }
    .qr-code-container ol li{
        margin: 2.5vw 0 0;
        font-size: 2.1vw;
    }
    .order-history-link a{
        margin-top: 2vw;
        padding: 1vw 5vw;
        font-size: 2vw; 
    }
}

@media screen and (max-width: 768px){
    .payment-main p{
        font-size: 2.5vw;
    }
    .qr-code-container{
        display: block;
    }
    .qr-code-container img{
        width: 50vw;
        height: 50vw;
    }
    .qr-code-container ol li{
        margin: 3vw 0 0;
        font-size: 3vw;
    }
    .order-history-link a{
        margin-top: 2vw;
        padding: 1vw 5vw;
        font-size: 3vw; 
    }
}



.order-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 90%;
}
.order-card {
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 1.5vw;
    position: relative;
}
.order-card h2 {
    margin: 0;
    font-size: 1.8vw;
    font-weight: 400;
}
.order-card p {
    margin: .5vw 0;
    font-weight: 200;
    font-size: 1vw;
}
.order-card .status {
    font-weight: 400;
    color: #0056B3;
}
.order-card .cancel-button {
    font-family: 'MADE Evolve Sans';
    position: absolute;
    font-weight: 100;
    top: 1vw;
    right: 1vw;
    background: #dc3545;
    color: white;
    border: none;
    font-size: 1vw;   
    border-radius: 5px;
    padding: .5vw 1vw;
    cursor: pointer;
}
.order-card .cancel-button:hover {
    background: #c82333;
}
.order-card .more-button {
    font-family: 'MADE Evolve Sans';
    font-weight: 100;
    position: absolute;
    top: 1vw;
    right: 8vw;
    font-size: 1vw;
    background: #50afb6;
    color: white;
    border: none;
    border-radius: 5px;
    padding: .5vw 1vw;
    cursor: pointer;
}
.order-card .more-button:hover {
    background: #3a9a9e;
}
.order-info {
    width: 85%;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 1vw 2vw;
    margin: 1vw auto;
}
.order-info h2{
    font-size: 1.5vw;
    font-weight: 400;
}
.order-info h3 {
    font-size: 1.2vw;
    font-weight: 300;
}
.order-info p{
    font-size: .9vw;
    margin: 0 0 .5vw;
    font-weight: 100;
}
.order-item {
    display: flex;
    align-items: center;
}
.order-item img {
    width: 5vw;
    height: auto;
    margin-right: 1vw;
}

@media screen and (max-width: 1024px){
    .order-card {
        padding: 2vw;
    }
    .order-card h2 {
        font-size: 3vw;
    }
    .order-card p {
        font-size: 2vw;
    }
    .order-card .cancel-button {
        top: 2vw;
        right: 2vw;
        font-size: 1.8vw;   
        padding: 1vw 2vw;
    }
    .order-card .more-button {
        top: 2vw;
        right: 15vw;
        font-size: 1.8vw;
        padding: 1vw 2vw;
    }
    .order-info {
        width: 85%;
        padding: 1vw 2vw;
        margin: 2vw auto;
    }
    .order-info h3 {
        font-size: 2.5vw;
    }
    .order-info p{
        font-size: 2vw;
    }
    .order-item img {
        width: 10vw;
        margin-right: 2vw;
    }
}

@media screen and (max-width: 768px){
    .order-container {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 90%;
    }
    .order-card {
        padding: 4.5vw;
        position: relative;
    }
    .order-card h2 {
        font-size: 4vw;
    }
    .order-card p {
        margin: 1vw 0;
        font-size: 3vw;
    }
    .order-card .cancel-button {
        top: 4.5vw;
        right: 4.5vw;
        font-size: 3.5vw;   
        padding: 1vw 4vw;
    }
    .order-card .more-button {
        top: 11vw;
        right: 4.5vw;
        font-size: 3.5vw;
        padding: 1vw 3vw;
    }
    .order-info {
        padding: 2vw 3vw;
        margin: 3vw auto;
    }
    .order-info h3 {
        font-size: 3.5vw;
    }
    .order-info p{
        font-size: 3vw;
        margin: 0 0 1vw;
    }
    .order-item img {
        width: 15vw;
        margin-right: 3vw;
    }
}