/* Styles for screens less than 600px wide (mobile devices) */
@media (max-width: 399px) {

    .collectionExpandable,
    .productContainer {
        justify-content: center;
    }

    .collectionExpandable img {
        right: auto;
    }

    #awardDesc {
        font-size: 10px;
    }

    #awardMedal {
        width: 8px;
        height: 8px;
    }
}


@media screen and (max-width : 600px) {
    body {
        font-family: Inter;
    }

    .hamDropdown {
        display: inline-block;
    }

    .navMenu {
        display: none;
    }

    #shopNowBtn {
        padding: 8px 14px;
        font-size: 12.2px;
    }

    #sec10x {
        width: 80.5px;
    }

    .sec20k {
        width: 100px;
    }

    #sec9 {
        width: 85px;
    }

    table th,
    table td {
        padding: 10px 0px;
    }

    table tr:first-child img {
        height: 40px;
    }

    .productContainer {
        flex-wrap: wrap;
    }


    #awardDesc {
        font-size: 14px;
    }

    #awardMedal {
        width: 12px;
        height: 12px;
    }

    .heroContent {
        top: 90px;
    }

    #heroContentHead {
        font-size: 24px;
        margin: 10px 0 40px 0;
    }

    .heroSubStats {
        font-size: 28px;
    }

    .heroSubStatsSpan {
        font-size: 12px;
        margin-top: 10px;
    }

    #shopNowBtn_1 {
        font-size: 12.2px;
        width: 130.33px;
        padding: 8px 12px;
    }

    #statsRibbon {
        gap: 10px;
        padding: 10px 30px;
    }

    .statsDesc {
        font-size: 10px;
    }

    .dataStats {
        font-size: 24px;
    }

    .fragOptions {
        flex-wrap: wrap;
    }

    .wrapFull33 {
        width: 100%;
    }

    .wrapFull66 {
        width: 100%;
    }

    #footerEmail {
        width: 200px;
    }

    #footerSubframe {
        gap: 30px;
    }

    #collectionDetails {
        flex-wrap: wrap;
    }

    .fragranceOptions {
        flex-wrap: wrap;
    }

    /* #footerSubframe {
        flex-wrap: wrap;
    } */
}

/* Styles for screens 600px and up (tablets, desktops, etc.) */
@media screen and (min-width: 600px) and (max-width: 690px) {
    body {
        font-family: Inter;
    }

    .hamDropdown {
        display: inline-block;
    }

    .navMenu {
        display: none;
    }

    #shopNowBtn {
        padding: 8px 14px;
        font-size: 12.2px;
    }

    #sec10x {
        width: 80.5px;
    }

    .sec20k {
        width: 100px;
    }

    #sec9 {
        width: 85px;
    }

    table th,
    table td {
        padding: 10px 5px;
    }

    table tr:first-child img {
        height: 65px;
    }

    .productContainer {
        flex-wrap: wrap;
    }


    #awardDesc {
        font-size: 14px;
    }

    #awardMedal {
        width: 12px;
        height: 12px;
    }

    .heroContent {
        top: 90px;
    }

    #heroContentHead {
        font-size: 24px;
        margin: 10px 0 40px 0;
    }

    .heroSubStats {
        font-size: 28px;
        margin-top: 10px;
    }

    .heroSubStatsSpan {
        font-size: 12px;
        margin-top: 10px;
    }

    #shopNowBtn_1 {
        font-size: 12.2px;
        width: 130.33px;
        padding: 8px 12px;
    }

    #statsRibbon {
        gap: 20px;
        padding: 10px 30px;
    }

    .dataStats {
        font-size: 24px;
    }

    .fragOptions {
        flex-wrap: wrap;
    }

    .wrapFull33 {
        width: 100%;
    }

    .wrapFull66 {
        width: 100%;
    }

    #collectionDetails {
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 690px) and (max-width: 768px) {
    body {
        font-family: Inter;
    }

    table th,
    table td {
        padding: 10px 8px;
    }

    .hamDropdown {
        display: inline-block;
    }

    .navMenu {
        display: none;
    }

    #shopNowBtn {
        padding: 12px 18px;
        font-size: 14.2px;
    }

    .productContainer {
        flex-wrap: wrap;
    }

    #awardDesc {
        font-size: 12px;
    }

    #awardMedal {
        width: 16px;
        height: 16px;
    }

    .heroContent {
        top: 90px;
        margin: 17px 0 40px 0;
    }

    #heroContentHead {
        font-size: 30px;
    }

    .heroSubStats {
        font-size: 42px;
    }

    .heroSubStatsSpan {
        font-size: 14px;
    }

    #shopNowBtn_1 {
        font-size: 12.2px;
        width: 130.33px;
        padding: 10px 14px;
    }

    #statsRibbon {
        gap: 40px;
        padding: 15px 50px;
    }

    .dataStats {
        font-size: 28px;
    }

    .fragOptions {
        flex-wrap: wrap;
    }

    .wrapFull33 {
        width: 100%;
    }

    .wrapFull66 {
        width: 100%;
    }

    #collectionDetails {
        flex-wrap: wrap;
    }
}

@media only screen and (min-width: 768px) and (max-width: 870px) {

    /* CSS styles for tablets in portrait mode */
    .hamDropdown {
        display: inline-block;
    }

    .navMenu {
        display: none;
    }

    .productContainer {
        flex-wrap: wrap;
    }

    #awardDesc {
        font-size: 14px;
    }

    #awardMedal {
        width: 20px;
        height: 20px;
    }

    .heroContent {
        top: 120px;
    }

    #heroContentHead {
        font-size: 42px;
        margin: 22px 0 40px 0;
    }

    .heroSubStats {
        font-size: 56px;
    }

    .heroSubStatsSpan {
        font-size: 18px;
    }

    #shopNowBtn_1 {
        font-size: 14.2px;
        width: 145.33px;
    }

    #statsRibbon {
        gap: 85px;
        padding: 26px 70px;
    }

    .dataStats {
        font-size: 32px;
    }

    .fragOptions {
        flex-wrap: wrap;
    }

    .wrapFull33 {
        width: 100%;
    }

    .wrapFull66 {
        width: 100%;
    }

    #collectionDetails {
        flex-wrap: wrap;
    }
}



@media only screen and (min-width: 870px) and (max-width: 1024px) {

    /* CSS styles for tablets in portrait mode */
    .hamDropdown {
        display: inline-block;
    }

    .navMenu {
        display: none;
    }

    .chooseFragrance label {
        font-size: 14px !important;
    }

    .fragOptions {
        flex-wrap: wrap;
    }

    .wrapFull33 {
        width: 100%;
    }

    .wrapFull66 {
        width: 100%;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {

    /* CSS styles for tablets in portrait mode */
    /* .hamDropdown {
        display: inline-block;
    }

    .navMenu {
        display: none;
    } */
}





@media only screen and (min-width: 900px) and (max-width: 1024px) and (orientation: landscape) {

    /* CSS styles for tablets in landscape mode */
    .hamDropdown {
        display: inline-block;
    }

    .navMenu {
        display: none;
    }
}