/* Main Section of the web page */
.WebsiteDesignProcess {
    margin-bottom: 50vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--Brand-Color-003);
}


.WebsiteDesignProcess h1 {
    margin-bottom: var(--Size-002);
    padding: var(--Size-002);
    font-size: var(--Size-009);
    background-color: var(--TransPartColor);
    border-radius: var(--Size-003);
    border: solid 1px var(--Size-001);
}

/* The Cover of this page */
.WDCover {
    display: flex;
    flex-wrap: wrap;
    min-width: 100vw;
    justify-content: space-evenly;

}
.WDCoverTitle {
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.videoDisplay {
    position: relative;
    padding: var(--Size-003);
    margin-left: var(--Size-009);
    display: flex;
    width:auto;
    max-width: 400px;
    border-radius: 50%;
}


.WDLogo {
    width: 450px;
}

/* Grid Layout */

/* Grid Item Boxes */
.InfoGrid_Continer {
    margin-left: var(--Size-003);
    font-size: var(--Size-004);
}

.info-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

/* All Grid Boxes */
.box {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 700px;
    margin: var(--Size-003);
    padding: var(--Size-006);
    border: solid 1px wheat;
    border-radius: var(--Size-003);
    background-color: var(--TransPartColor);
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

/* ALL Box Title */
.titleB {
    display: inline-block;
    width: 100%;
    height: fit-content;
    margin: var(--Size-009);
}
.box_title {
    margin-bottom: var(--Size-003);
}


/* Box Image Art */
.box_image {
    width: 100%;
    max-width: 250px;
    max-height: 250px;
    border-radius: var(--Size-003);
}

/* Websites I've Working on & have done */
.boxImage {
    width: 300px;
    padding: var(--Size-005);
    border-radius: var(--Size-010);
}

.boxBTNCon {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.boxBTN {
    position: relative;
    margin: var(--Size-001);
    padding: var(--Size-001);
    border-radius: var(--Size-001);
    transition: all ease-in-out 0.5ms;
    background-color: var(--TransPartColor);
}


#callBackSection {
    margin: 0% auto;
    padding: 0%;
    width: 50%;
    overflow: hidden;
    background-color: var(--Brand-Color-001);
}
/* Mobile Use  550px */
@media screen and (max-width: 950px) {

    .WebsiteDesignProcess {
        overflow-x: hidden;
    }

    .WDLogo {
        visibility: hidden;
    }

    .titleB {
        background-color: var(--Brand-Color-003);
        color: black;
    }

    .box {
        margin: var(--Size-003);
        padding: var(--Size-004);
        width: 70vw;
    }
}