.desktop .menuHeadBox {
    width: 100%;
    background-color: #FFFFFF;
}

.desktop .menuHeadBox div.menuBanner {
    width: 100%;
    display: flex;
}

.desktop .menuHeadBox div.menuBanner img {
    width: 100%;
}

.desktop .menuHeadBox ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
}

.desktop .menuHeadBox ul li {
    width: 25%;
    background-color: #7F182D;
    text-align: center;
}

.desktop .menuHeadBox ul li a{
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: 900;
}

.desktop .menuHeadBox ul li a div {
    width: 100%;
    padding: 1em 0;
}

.menuHeadBox ul li:first-child, .menuHeadBox ul li a div:hover {
    background-color: #A71D2C;
}

.desktop .menuBox {
    width: 100%;
    display: grid;
    gap: 1.5em;
    grid-template-columns: repeat(3, 1fr);
    background-color: #FFFFFF;
    padding: 3em 4em;
}

.desktop .menuBox article{
    display: flex;
    justify-content: center;
    align-items: center;
}

.desktop .menuBox article img {
    width: 9em;
    margin-right: 1.5em;
}

.desktop .menuBox article p {
    font-size: 1em;
    line-height: 1em;
    font-weight: 1000;
}

.desktop .menuBox article p b {
    font-size: 1.4em;
    line-height: 1.4em;
}

/* 1025px */
@media (max-width: 1280px) {
    .desktop fieldset legend h2 {
        font-size: 3em;
    }

    .desktop .menuBox {
        grid-template-columns: repeat(2, 1fr);
        margin-top: -1em;
    }
    
}

/* ipad Pro starts Here */
@media (max-width: 1024px) {
  
}

.mobileNTablet fieldset legend h2 {
    font-size: 3em;
}

.mobileNTablet .menuHeadBox {
    width: 100%;
    background-color: #FFFFFF;
}

.mobileNTablet .menuHeadBox div.menuBanner {
    width: 100%;
    display: flex;
}

.mobileNTablet .menuHeadBox div.menuBanner img {
    width: 100%;
}

.mobileNTablet .menuHeadBox ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
}

.mobileNTablet .menuHeadBox ul li {
    width: 25%;
    background-color: #7F182D;
    text-align: center;
}

.mobileNTablet .menuHeadBox ul li a{
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: 900;
}

.mobileNTablet .menuHeadBox ul li a div {
    width: 100%;
    padding: 1em 0;
}

.menuHeadBox ul li:first-child, .menuHeadBox ul li a div:hover {
    background-color: #A71D2C;
}

.mobileNTablet .menuBox {
    width: 100%;
    display: grid;
    gap: 1.5em;
    grid-template-columns: repeat(2, 1fr);
    background-color: #FFFFFF;
    padding: 3em 4em;
    margin-top: -1em;
}

.mobileNTablet .menuBox article{
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobileNTablet .menuBox article img {
    width: 9em;
    margin-right: 1.5em;
}

.mobileNTablet .menuBox article p {
    font-size: 1em;
    line-height: 1em;
    font-weight: 1000;
}

.mobileNTablet .menuBox article p b {
    font-size: 1.4em;
    line-height: 1.4em;
}

/* colorHead */
/* NEW AND IMPROVE */
.menuHeadBox ul.NAI li {
    background-color: #AD7EB6;
}

.menuHeadBox ul.NAI li:nth-child(2), .menuHeadBox ul.NAI li a div:hover {
    background-color: #CAAACD;
}

/* REFRESHMENTS */
.menuHeadBox ul.REF li {
    background-color: #D6B442;
}

.menuHeadBox ul.REF li:nth-child(3), .menuHeadBox ul.REF li a div:hover {
    background-color: #EDC84E;
}

/* CREATE YOUR OWN */
.menuHeadBox ul.CYO li {
    background-color: #A9AF19;
}

.menuHeadBox ul.CYO li:last-child, .menuHeadBox ul.CYO li a div:hover {
    background-color: #BFC621;
}