@media (max-width: 800px) {
    /*group css*/
    .nav {
        display: none;
    }
    .about, .contactMe {
        width: 100%;
        flex-direction: column;
        height: auto;
        gap: 20px;
    }
    .aboutme {
    height: auto;
    gap: 20px;
    min-width: 100%;
    max-width: 100%;
    }
    .aboutTradingBox {
        font-size: 15px;
    }
    .aboutText {
        height: auto;
    }
    .bookCover img{
        height: 100%;
    }
    .aboutTrading {
        min-width: 100%;
        height: auto;
    }
    .bookCall {
        height: 200px;
    }
    .updates {
        min-width: 100%;
        height: auto;
    }

    .bookUpdate {
        min-width: 100%;
        min-height: 185px;
        max-height: 185px;
        overflow: hidden;
    }
    /*end of group css*/
    body {
        overflow-x: hidden !important;
        overflow-y: auto;
        width: 100vw;
        max-width: 100vw ;
    }
    .content {
        overflow-x: hidden !important;
        overflow-y: auto;
        width: 100vw;
        max-width: 100vw ;
        padding: 10px;
    }
    .homepage {
        height: auto !important;
        max-height: fit-content;
    }
    .homepageStage  {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        align-content: start;
        height: auto;
    }
    .portrait {
        width: 100%;
        justify-content: center;
    }
    .homepageStage {
        gap: 0px;
    }
    .introCard {
    width: 100%;
    justify-content: center;
    }
    .introName {
        display: flex;
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }
    .introNameHeader {
    font-size: 55px;
    font-family: 'PlayfairDisplay-Bold';
    margin: 0;
    z-index: -1;
}
    .aboutTradingBox {
        min-height: 105px;
        max-height: 105px;
    }
    .services {
        width: 100%;
        overflow-x: scroll;
        min-height:450px;
        overflow-y: visible;
        padding: 10px;
    }
    .contactMe {
        height: auto;
    }
    .card {
        overflow-y: visible;
        z-index: 200;
        min-height: fit-content;
        max-width: 400px;
        min-width: 200px;
    }
    .cmInput {
        width: 100%;
        padding: 10px 0px;
    }
}