@charset "UTF-8";

/* ! Section 0 - Retail Installation */
#Retail_installation>div>h4 {
    font-family: var(--body);
    font-size: 2rem;
    font-weight: 600;
    color: var(--hover);
    text-align: left;
    padding: 10px auto;
}

#Retail_installation>div>p {
    font-size: 1.1rem;
    text-align: left;
}


#Retail_installation>div {
    padding-bottom: 4rem;
}


/* *------------------------ Project Illustration/Diagram/Video ------------------------ */
.project_illustration {
    display: flex;
    justify-content: center;
    align-items: center;
}

.port_fea_img {
    width: 70%;
}

.youTube_Vid {
    width: 85%;
    aspect-ratio: 16/9;
}

/* *------------------------ Project text description ------------------------ */



/* *------------------------ Marketing ------------------------ */
#Marketing_Materials {
    padding-top: 5rem;
}

#Marketing_Materials>h4 {
    font-family: var(--body);
    font-size: 2rem;
    font-weight: 600;
    color: var(--hover);
    text-align: center;
    padding: 10px auto;
}

#Marketing_Materials > div > h5 {
        font-family: var(--body);
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--dark);
        padding: 3rem 0 1.5rem 0;
        margin-left: 2rem;
}

#Marketing_Materials > div > div > iframe {
    aspect-ratio: 16/9;
}

.img_apparel,
.img_icons {
    max-width: 100%;
}





/* ------------------------------------------------------------------------------- */





/*! ------------------------------------------------------------------------------- */
/* **************************** Tablet (to desktop) ***************************** */
/*! ------------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 992px) {

    
}

/* --------------------------------Tablet ends------------------------------------- */




/*! ------------------------------------------------------------------------------- */
/* **************************** Mobile (to tablet) ***************************** */
/*! ------------------------------------------------------------------------------- */

@media (min-width: 320px) and (max-width: 767px) {

    #Retail_installation>div {
        padding-bottom: 0rem;
    }
    #Marketing_Materials {
        padding-top: 0rem;
    }
    #Marketing_Materials>h4 {
        font-size: 1.8rem;
    }
    #Marketing_Materials > div > h5 {
        font-size: 1.4rem;
        margin-left: 0rem;
        padding: 1.5rem 0 0rem 0;
    }
    #mrkt_vids > iframe {
        padding: 0.6rem 0;
    }
}

/* --------------------------------Mobile ends------------------------------------- */