/*========================================================
	Main Style for Krazy Shoarma 2025
=========================================================*/
/* colors declaration */
:root {
    --ecru: #f4ede5;
    --bgcolor: #eee7d4;
    --yellow: #ffbe22;
    --red: #e9401f;
    --black: #000;
    --white: #fff;
    --txt: #1a1917;
    --bord: #bab5af;
    --lightecru: #f5f1e6;
    --foo: #1a1917;
}

/* fonts declaration */
@font-face {
    font-family: dmserifreg;
    src: url("../fonts/DMSerifText-Regular.ttf");
}
@font-face {
    font-family: latoregular;
    src: url("../fonts/Lato-Regular.ttf");
}
@font-face {
    font-family: latomedium;
    src: url("../fonts/Lato-Medium.ttf");
}
@font-face {
    font-family: latobold;
    src: url("../fonts/Lato-Bold.ttf");
}
@font-face {
    font-family: latoitalic;
    src: url("../fonts/Lato-Italic.ttf");
}
@font-face {
    font-family: nightfall;
    src: url("../fonts/Nightfall.ttf");
}
/*========================================================
										RESET
=========================================================*/
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
abbr,
address,
em,
img,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
article,
aside,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

*:focus {
    outline: none;
}

* {
    box-sizing: border-box;
}

input[type='submit'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* end reset */
/***********************************************************************************************/

/*========================================================
                      Main Styles
=========================================================*/
body {
    background: var(--bgcolor);
    font-family: latoregular, arial, sans-serif;
    color: var(--txt);
    font-size: 21px;
}
li {
    list-style-type: none;
}
a {
    text-decoration: none;
}
.clear {
    clear: both;
}
.inline-text {
    font-weight: 700;
}
h1, h2, h3 {
  font-family: dmserifreg, arial, sans-serif;
  text-transform: capitalize;
}
h1, h2{
  font-size: 56px;
}
h3 {
  font-size: 38px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    body {
        font-size: 18px;
    }
    h1, h2{
      font-size: 48px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    body {
        font-size: 18px;
    }
    h1, h2{
      font-size: 46px;
    }
    h3{
      font-size: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    body {
        font-size: 18px;
    }
    h1, h2{
      font-size: 38px;
    }
    h3{
      font-size: 30px;
    }
}
@media only screen and (max-width: 767px) {
    body {
        font-size: 18px;
    }
    h1, h2{
      font-size: 36px;
    }
    h3{
      font-size: 24px;
    }
}
/*=======================================================
                       Main Layout
=========================================================*/
.bodyFrame {
    max-width: 100%;
    margin: 0 auto;
}
.pageFull {
    width: 100%;
}
.pageSize {
    width: 75%;
    max-width: 1310px;
    margin: 0 auto;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .pageSize {
      width: 90%;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .pageSize {
      width: 94%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .pageSize {
      width: 90%;
  }
}
@media only screen and (max-width: 767px) {
  .pageSize {
      width: 90%;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {}
@media only screen and (max-width: 479px) {}

/*========================================================
									TOP & NAVIGATION
=========================================================*/
/* not display on large screen */
.smobitrigger,
.mnuclose,
.menu ul li.mlogo,
.menu ul li.mphone,
.menu ul li.mhours,
.menu ul li.msocial,
.menu ul li.mmlinks,
.menu ul li.maddress,
.telMob,
.logoMob,
.hoursNav {
    display: none;
}
/* top section  */
.top {
    width: 100%;
    display: block;
    position: static;
    background: var(--ecru);
    box-shadow: 0px 8px 24px -20px rgba(165, 165, 173, 1);
}
.boxesWrap {
    width: 75%;
    max-width: 1330px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100px;
}
.boxes {
    height: 100px;
}
.one {
    width: 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.one img {
  display: block;
  width: 207px;
}
.two {
    width: 62%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.three {
    width: 23%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.topPhone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}
.topTel {
  background: url('../images/icons/phone-icon.png');
  background-repeat: no-repeat;
  background-size: 50px 50px;
  background-position: left center;
  font-family: intermedium, arial, sans-serif;
  font-size: 24px;
  display: flex;
  align-items: center;
  padding-left: 60px;
  min-height: 50px;
}
.menu ul li.dlink {
    font-family: intermedium, arial, sans-serif;
    font-size: 21px;
    display: inline-block;
    text-transform: capitalize;
    line-height: 1.5;
    padding: 0 20px;
}
.menu ul li.dlink a:hover {
    color: var(--red);
}
/*.menu ul > li:nth-child(2 of .dlink) {
    margin-right: 60px;
}*/
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .boxesWrap {
  	width: 90%;
    height: 80px;
  }
  .menu ul li.dlink {
  	font-size: 21px;
  }
  .topTel {
    font-size: 22px;
  	background-size: 45px 45px;
  }
    .one img {
        width: 180px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .boxesWrap {
  	width: 94%;
    height: 80px;
  }
  .one img {
  	width: 150px;
  }
  .two {
  	width: 66%;
  }
  .three {
  	width: 19%;
  }
  .menu ul li.dlink {
  	font-size: 18px;
  }
  .topTel {
  	background-size: 42px 42px;
  	font-size: 18px;
  	padding-left: 50px;
  	min-height: 50px;
  }

}
@media only screen and (max-width: 1023px) {
}
/*========================================================
									Buttons
=========================================================*/
.orderBtn {
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 35px;
  color: var(--ecru);
  cursor: pointer;
  display: inline-block;
  font-family: latoregular, arial, sans-serif;
  font-size: 17px;
  text-align: center;
  text-transform: capitalize;
  padding: 15px 30px;
}
.orderTopBtn {
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 35px;
  color: var(--ecru);
  cursor: pointer;
  display: inline-block;
  font-family: latoregular, arial, sans-serif;
  font-size: 20px;
  text-align: center;
  text-transform: capitalize;
  padding: 6px 30px;
}
.orderTopBtn:hover{
  color: var(--black)!important;
}
.menuBtn {
  background: transparent;
  border: 1px solid var(--txt);
  border-radius: 35px;
  color: var(--txt);
  cursor: pointer;
  display: inline-block;
  font-family: latoregular, arial, sans-serif;
  font-size: 17px;
  text-align: center;
  text-transform: capitalize;
  padding: 15px 30px;
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .orderBtn,
    .menuBtn {
        font-size: 16px;
    }
    .orderTopBtn{
        font-size: 20px;
    }

}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .orderBtn,
    .menuBtn {
        font-size: 16px;
        padding: 10px 20px;
    }
    .orderTopBtn{
        font-size: 17px;
        padding: 6px 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .orderBtn,
    .menuBtn {
        font-size: 16px;
        padding: 10px 20px;
    }
    .orderTopBtn{
        font-size: 16px;
        padding: 10px 20px;
    }
}
@media only screen and (max-width: 767px) {}
@media only screen and (max-width: 479px) {
    .orderBtn,
    .menuBtn {
        font-size: 16px;
        padding: 10px 15px;
    }
    .orderTopBtn{
        font-size: 16px;
        padding: 10px 15px;
    }
}
/*========================================================
		Index Banner
=========================================================*/
.bannerMainMob {
    display: none;
}
.bannerWrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.bannerMainImg {
    width: 100%;
    margin-top: 32px;
    display: block;
    border-radius: 35px;
}
.bannerInsWrap {
    position: absolute;
    width: 450px;
    height: 550px;
    top: 60px;
    left: -85px;
    background: var(--yellow);
    border-radius: 20px;
    padding: 33px;
}
.bannerInsWrap h1 {
    font-size: 70px;
    line-height: 1;
    font-weight: 400;
}
.bannerdescWrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0 10px;
    border-bottom: 1px solid var(--txt);
}
.bannerdescLeft {
    width: 60%;
}
.bannerdescRight {
    width: 40%;
}
.bannerdescLeft p {
    font-size: 21px;
    line-height: 1.3;
}
.bannerdescRight p {
    font-family: dmserifreg, arial, sans-serif;
    font-size:  40px;
    text-align: right;
}
.prCombo{
  font-family: dmserifreg, arial, sans-serif;
  font-size:  40px;
  text-align: center;
}
.bannerComboWrap {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.bannerComboCol {
    width: 50%;
}
.bcol1 p {
     text-align: center;
    font-family: nightfall, arial, sans-serif;
    font-size: 80px;
}
.bcol2{
  border-left: 1px solid var(--txt);
}
.bcol2 p {
    text-align: center;
    font-family: latoitalic, arial, sans-serif;
    font-size: 21px;
}
.bannBtns {
    margin-top: 25px;
}
.bannBtnWrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .bannerInsWrap {
        top: 100px;
        left: -35px;
        width: 390px;
        height: 450px;
    }
    .bannerInsWrap h1,
    .bcol1 p {
        font-size: 52px;
    }
    .bannerdescLeft p,
    .bcol2 p {
        font-size: 19px;
    }
    .bannerdescRight p,
    .prCombo {
        font-size: 30px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .bannerInsWrap {
        top: 20px;
        left: 20px;
        width: 390px;
        height: 450px;
    }
    .bannerInsWrap h1,
    .bcol1 p {
        font-size: 52px;
    }
    .bannerdescLeft p,
    .bcol2 p {
        font-size: 19px;
    }
    .bannerdescRight p,
    .prCombo {
        font-size: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .bannerInsWrap {
        top: 20px;
        left: 20px;
        width: 390px;
        height: 390px;
    }
    .bannerInsWrap h1 {
        font-size: 42px;
    }
    .bcol1 p {
        font-size: 54px;
    }
    .bannerdescLeft p,
    .bcol2 p {
        font-size: 16px;
    }
    .bannerdescRight p,
    .prCombo {
        font-size: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .banSize {
        width: 100%;
    }
    .bannerMainImg {
        display: none;
    }
    .bannerMainMob {
        display: block;
        width: 100%;
    }
    .bannerInsWrap {
        position: static;
        border-radius: 0;
        width: 100%;
        height: auto;
        padding: 35px 20px;
    }
    .bannerInsWrap h1 {
        font-size: 50px;
        line-height: 1.1;
    }
    .bannerdescWrap {
        padding: 15px 0 20px;
    }
    .bannerdescRight p,
    .prCombo {
        font-size: 36px;
    }
    .bcol2 p {
        padding-left: 35px;
        text-align: left;
    }
    .bannBtns{
      width: 90%;
      margin: 25px auto 0;
    }
}
@media only screen and (max-width: 479px) {
    .bannerInsWrap h1 {
        font-size: 39px;
    }
    .bannerInsWrap {
        padding: 20px;
    }
    .bannerdescLeft p {
        font-size: 18px;
    }
    .bannerdescRight p,
    .prCombo {
        font-size: 30px;
    }
    .bcol1 p {
        font-size: 56px;
    }
    .bcol2 p {
        font-size: 16px;

    }
}

/*========================================================
		Index Explore Menu Section
=========================================================*/
.mDrinksMob {
   display: none;
}
.mainTit {
    padding: 90px 0 50px;
    text-align: center;
}
.mainTit h2 {
    font-size: 68px;
    font-weight: 400;
}
.mainTit h2 span {
    display: block;
    font-family: latoregular, arial, sans-serif;
    font-size: 18px;
}
.browseMenuSec {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
.browseMenuCol1,
.browseMenuCol2 {
    width: 49%;
}
.menuPlatesWrap {
    background: var(--lightecru);
    padding: 20px;
    border-radius: 25px;
    margin-bottom: 35px;
}
.menuPlatesWrap img {
    width: 100%;
    display: block;
    border-radius: 15px;
}
.mPlatesDescWrap {
    padding: 10px 0;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bord);
}
.mPlatesDescLeft {
    width: 40%;
}
.mPlatesDescRight {
    width: 60%;
    border-left: 1px solid var(--txt);
}
.mPlatesDescLeft p {
    font-size: 56px;
    font-family: dmserifreg, arial, sans-serif;
    text-align: left;
    text-transform: capitalize;
}
.mPlatesDescRight p {
    font-size: 19px;
    font-family: latoitalic, arial, sans-serif;
    line-height: 1.3;
    text-align: left;
    padding-left: 20px;
}
.mMenuPosWrap {
    width: 100%;
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid var(--bord);
}
.mMenuPosDesc {
    width: 80%;
}
.mMenuPosPrice {
    width: 20%;
    display: flex;
    justify-content: flex-end;
}
.mMenuPosDesc p,
.mMenuPos2Desc p {
    font-size: 22px;
    font-family: latobold, arial, sans-serif;
}
.mMenuPosDesc p span,
.mMenuPos2Desc p span {
    padding-top: 10px;
    font-size: 19px;
    line-height: 1.3;
    display: block;
    font-family: latoregular, arial, sans-serif;
}
.mMenuPosPrice p {
    font-family: dmserifreg, arial, sans-serif;
    font-size: 22px;
}
.mMenuPosLast {
    border-bottom: none;
}
.mMenuBtnsWrap {
    margin: 25px 0 10px;
    text-align: left;
}
.explmenu {
    margin-left: 20px;
}
.mMenuPos2Desc,
.mMenuPos2Price {
    width: 50%;
}
.mMenuPos2Price {
    display: flex;
}
.mMenuPos2Half p {
   font-family: latoregular, arial, sans-serif;
    font-size: 18px;
    text-align: right;
    text-transform: capitalize;
}
.mMenuPos2Half p span {
    font-family: dmserifreg, arial, sans-serif;
    font-size: 22px;
    margin-left: 10px;
}
.mMenuPos2Half {
    width: 49%;
    display: flex;
    justify-content: flex-end;
}
.menuPlates2Wrap {
    background: var(--red);
    border-radius: 25px;
    margin-bottom: 35px;
    position: relative;
    width: 100%;
}
.mSidesImg {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
}
.mSidesWrap {
    padding: 20px;
}
.mSidesPos {
    width: 45%;
    position: relative;
}
.mSidesPos h3 {
    font-size: 56px;
    font-family: dmserifreg, arial, sans-serif;
    text-align: left;
    text-transform: capitalize;
    color: var(--ecru);
    border-bottom: 1px solid var(--ecru);
}
.mSidesPosWrap {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--ecru);
}
.mSidePosDesc {
    width: 45%;
}
.mSidesPosPrice {
    width: 55%;
}
.mSidePosDesc p {
    text-transform: capitalize;
    color: var(--ecru);
    font-size: 22px;
    font-family: latobold, arial, sans-serif;
    text-align: left;
}
.mSidesPosPrice p {
    color: var(--ecru);
    font-family: latoregular, arial, sans-serif;
    font-size: 19px;
    text-align: right;
}
.mSidesPosPrice p span {
    font-family: dmserifreg, arial, sans-serif;
    font-size: 22px;
    margin-left: 10px;
}
.mSidesSauce {
    position: absolute;
    bottom: 0;
    right: -185px;
    width: 163px;
}
.mSideBtns {
    margin: 50px 0 10px;
}
.mSideOrder {
    background: var(--yellow);
    border: 1px solid var(--yellow);
    color: var(--txt);
}
.mSideMenu {
    border: 1px solid var(--white);
    color: var(--white);
}
.menuDrinks2bg {
    background: var(--yellow);
}
.mDrinksImg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 228px;
}
.mDrinksPos h3 {
    color: var(--txt);
    font-weight: 400;
}
.mDrinksPos {
    width: 60%;
}
.mDrinksPosDesc {
    width: 70%;
}
.mDrinksPosPrice {
    width: 30%;
}
.mDrinksPosDesc p,
.mDrinksPosPrice p {
    color: var(--txt);
}
.mDrinksPosDesc p span {
    padding-top: 10px;
    font-size: 18px;
    line-height: 1.3;
    display: block;
    font-family: latoregular, arial, sans-serif;
}
.mDrinksOrder {
    background: var(--red);
    border: 1px solid var(--red);
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .mainTit h2,
    .mPlatesDescLeft p{
        font-size: 52px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .mainTit h2,
    .mPlatesDescLeft p{
        font-size: 52px;
    }
    .mainTit {
        padding: 60px 0 50px;
    }
    .mPlatesDescRight p,
    .mMenuPosDesc p span, .mMenuPos2Desc p span,
    .mSidesPosPrice p,
    .mSidesPosPrice p span,
    .mDrinksPosDesc p span {
        font-size: 16px;
    }
    .mMenuPosDesc p, .mMenuPos2Desc p,
    .mMenuPosPrice p,
    .mSidePosDesc p {
        font-size: 18px;
    }
    .mSidesImg {
        width: 260px;
    }
    .mDrinksImg {
        width: 220px;
    }
    .mMenuPos2Half p span {
        font-size: 18px;
    }
    .mMenuPos2Half p {
        font-size: 16px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .mainTit h2 {
        font-size: 42px;
    }
    .mPlatesDescLeft p,
    .mSidesPos h3 {
        font-size: 38px;
    }
    .mainTit {
        padding: 60px 0 50px;
    }
    .mPlatesDescRight p,
    .mMenuPosDesc p span, .mMenuPos2Desc p span,
    .mSidesPosPrice p,
    .mSidesPosPrice p span,
    .mDrinksPosDesc p span {
        font-size: 16px;
    }
    .mMenuPosDesc p, .mMenuPos2Desc p,
    .mMenuPosPrice p,
    .mSidePosDesc p {
        font-size: 19px;
    }
    .mSidesImg {
        width: 180px;
    }
    .mDrinksImg {
        width: 160px;
        top: 0;
    }
    .mSidesSauce {
        width: 140px;
        right: -160px;
    }
    .menuPlatesWrap {
        margin-bottom: 20px;
    }
    .mMenuPos2Half p span {
      display: block;
        font-size: 19px;
    }

    .mMenuPos2PriceSpecial .mMenuPos2Half {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }
    .mMenuPos2PriceSpecial .mMenuPos2Half p{
      display: block;
      width: 100%;
    }
    .mMenuPos2PriceSpecial{
      width: 50%!important;
      display: block;
    }
}
@media only screen and (max-width: 767px) {
  .mainTit {
        padding: 35px 0;
    }
    .mainTit h2 {
        font-size: 48px;
    }
    .mainTit h2 span {
        line-height: 1.2;
        max-width: 360px;
        margin: 0 auto;
    }
    .browseMenuSec {
        flex-direction: column;
    }
    .browseMenuCol1, .browseMenuCol2 {
        width: 100%;
    }
    .mPlatesDescLeft p {
        font-size: 48px;
    }
    .mPlatesDescRight p {
        font-size: 16px;
    }
    .mMenuPosDesc p span, .mMenuPos2Desc p span {
        font-size: 18px;
    }
    .mMenuPosPrice p {
        font-size: 21px;
    }
    .mSidesPos h3 {
        font-size: 48px;
    }
    .mSidesImg {
        width: 260px;
    }
    .mPlatesDescLeft {
        width: 39%;
    }
    .mPlatesDescRight {
        width: 61%;
    }
    .mDrinksImg {
        display: none;
    }
    .mDrinksMob {
        position: absolute;
        top: 0;
        right: 0;
        width: 190px;
        display: block;
    }
    .menuPlates2Wrap {
        margin-bottom: 0;
    }
    .mMenuPos2Half p {
    	display: flex;
    	flex-direction: column;
    }
    .mMenuPos2Half p span {
        font-size: 21px;
    }

    .mMenuPos2PriceSpecial .mMenuPos2Half {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }
    .mMenuPos2PriceSpecial .mMenuPos2Half p{
      display: block;
      width: 100%;
    }
    .mMenuPos2PriceSpecial{
      width: 50%!important;
      display: block;
    }

}
@media only screen and (max-width: 479px) {
    .mainTit {
        padding: 20px 0;
    }
    .mainTit h2 {
        font-size: 40px;
    }
    .mPlatesDescWrap {
        flex-direction: column;
    }
    .mPlatesDescLeft,
    .mPlatesDescRight {
        width: 100%;
    }
    .mPlatesDescLeft p,
    .mSidesPos h3,
    .mSidesPos h3 {
        font-size: 36px;
    }
    .mPlatesDescRight p {
        padding-left: 0;
    }
    .mPlatesDescRight {
        border-left: 0;
    }
    .menuPlatesWrap {
        padding: 10px;
    }
    .explmenu {
        margin-left: 5px;
    }
    .mMenuPosDesc p, .mMenuPos2Desc p {
        font-size: 21px;
    }
    .menuPlatesWrap {
        margin-bottom: 20px;
    }
    .mSidesImg {
        width: 180px;
    }
    .mSidesSauce {
        width: 120px;
        right: -150px;
        bottom: 15px;
    }
    .mSidesWrap {
        padding: 15px;
    }
    .mDrinksMob {
        width: 150px;
        bottom: 70px;
        top: inherit;
    }
}

/*========================================================
		Index Catering Menu Section
=========================================================*/
.catMenuImg {
    width: 100%;
    display: block;
}
.catMenuSec {
    width: 100%;
    display: flex;
    margin-top: 25px;
}
.catMenuSecLeft {
    width: 60%;
}
.catMenuSecRight {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.catMenuSecLeft h3 {
    font-size: 44px;
    font-family: dmserifreg, arial, sans-serif;
    text-align: left;
    text-transform: capitalize;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bord);
    margin-bottom: 20px;
    font-weight: 400;
}
.catMenuSecLeft ul {
    display: inline-block;
}
.catMenuSecLeft ul li {
    font-family: latobold, arial, sans-serif;
    font-size: 22px;
    text-transform: capitalize;
    display: inline-block;
}
.lib {
    color: var(--red);
    margin: 0 25px;
}
.catMenuPrice {
    font-family: dmserifreg, arial, sans-serif;
    margin-left: 22px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .catMenuSecLeft h3 {
        font-size: 34px;
    }
    .catMenuSecLeft ul li {
        font-size: 19px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .catMenuSecLeft h3 {
        font-size: 34px;
    }
    .catMenuSecLeft ul li {
        font-size: 19px;
    }
    .catMenuPrice {
        margin-left: 15px;
    }
    .lib {
        margin: 0 10px;
    }
    .catMenuSecLeft {
        width: 65%;
    }
    .catMenuSecRight {
        width: 35%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .catMenuSecLeft h3 {
        font-size: 34px;
    }
    .catMenuSecLeft ul li {
        font-size: 16px;
    }
    .catMenuPrice {
        margin-left: 15px;
    }
    .lib {
        margin: 0 10px;
    }
    .catMenuSecLeft {
        width: 65%;
    }
    .catMenuSecRight {
        width: 35%;
    }
    .catMenuSec {
        flex-direction: column;
    }
    .catMenuSecLeft,
    .catMenuSecRight {
        width: 100%;
    }
    .catMenuSecRight {
        margin-top: 35px;
        justify-content: flex-start;
    }
}
@media only screen and (max-width: 767px) {
  .catMenuSec {
        flex-direction: column;
    }
    .catMenuSecLeft,
    .catMenuSecRight {
        width: 100%;
    }
    .catMenuSecLeft h3 {
        font-size: 36px;
        text-align: center;
    }
    .catMenuSecLeft ul li {
        font-size: 18px;
    }
    .catMenuPrice {
        display: block;
        margin-left: 0;
    }
    .lib {
        display: none;
    }
    .catMenuSecLeft ul {
        text-align: center;
        width: 100%;
        margin: 0 auto 30px;
    }
    .catListct {
        margin: 0 20px;
    }
    .catMenuWrapLast {
        margin-bottom: 0;
    }
}
@media only screen and (max-width: 479px) {
    .catMenuSecLeft h3 {
        font-size: 26px;
    }
    .catMenuSecLeft ul li {
        display: block;
        padding-bottom: 10px;
    }
    .catMenuWrapLast {
        padding-bottom: 20px;
    }
}

/*========================================================
		Index Find Us Section
=========================================================*/
.findWrap {
    background: var(--lightecru);
    padding: 20px;
    border-radius: 25px;
    margin-bottom: 35px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
.findMap,
.findData {
    width: 48%;
}
.findMap iframe {
    width: 100%;
    display: block;
    border-radius: 20px;
    height: 550px;
}
.findData {
    padding: 50px 0;
}
.findData h3 {
    font-size: 44px;
    font-family: dmserifreg, arial, sans-serif;
    text-align: left;
    text-transform: capitalize;
    padding-bottom: 35px;
    font-weight: 400;
}
.findData p {
    font-family: latobold, arial, sans-serif;
    font-size: 22px;
    text-transform: capitalize;
    padding: 10px 0;
}
.findData ul {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bord);
}
.findData ul li {
    font-size: 18px;
    padding: 2px 0;
}
ul.adr li span {
    display: block;
}
ul.tel {
    border-bottom: none;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .findData h3 {
        font-size: 36px;
    }
    .findData p {
        font-size: 21px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .findData h3 {
        font-size: 34px;
    }
    .findData ul li {
        font-size: 16px;
    }
    .findData p {
        font-size: 19px;
    }
    .findMap iframe {
        height: 450px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .findData h3 {
        font-size: 34px;
    }
    .findData ul li {
        font-size: 16px;
    }
    .findData p {
        font-size: 19px;
    }
    .findMap iframe {
        height: 450px;
    }
}
@media only screen and (max-width: 767px) {
    .findWrap {
        flex-direction: column;
        border-radius: 0;
        padding: 0;
        margin-bottom: 0;
    }
    .findMap, .findData {
        width: 100%;
    }
    .findMap iframe {
        border-radius: 0;
    }
    .findData {
        padding: 20px;
    }
    .findData h3 {
        font-size: 36px;
        padding-bottom: 15px;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {}
@media only screen and (max-width: 479px) {}

/*========================================================
		FOOTER section
=========================================================*/
.onlyContactFooter .footerBg{
  margin: 0 0 0;
}
.footerBg{
  background: var(--foo);
  color: var(--white);
  margin: 140px 0 0;
    padding-top: 90px;
}
.footerWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
    padding-bottom: 70px;
}
.fooLogo a img {
    width: 200px;
    display: block;
}
.fooMenu ul li.mlogo,
.fooMenu ul li.mphone,
.fooMenu ul li.maddress,
.fooMenu ul li.hoursNav,
.fooMenu ul li.msocial,
.fooMenu ul li.dlink .orderTopBtn{
  display: none;
}
.fooMenu ul li.dlink{
  font-size: 21px;
  margin: 0 0 18px;
  text-transform: capitalize;
  color: var(--ecru);
}
.fooOne p{
  font-size: 21px;
  margin: 30px 0 0;
    line-height: 1.3;
    color: var(--ecru);
    width: 420px;
}
.fooOne p span{
  font-weight: 700;
}
.fooSocial{
  margin: 38px 0 0;
}
.fooSocial img{
  margin-right: 10px;
}

.fooHours .hoursNav{
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--ecru);
  max-width: 300px;
  margin: 15px 0 10px;
}
.fooHours{
  margin-bottom: 30px;
}
.fooHours ul li {
    color: var(--ecru);
}
.fooHours .hoursNav span{
  display: block;
}
.fooHours .hoursNav strong{
  min-width: 120px;
}
.fooHours .hoursNav .hourCell{
  min-width: 170px;
  text-align: left;
}
.fooHours p span {
    display: block;
}
.fooThree .fooAdr {
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--ecru);
}
.fooAdr span {
  display: block;
}
.fooPhone {
    margin: 0 0 20px;
    color: var(--ecru);
}
.fcopy {
  border-top: 1px solid var(--white);
  padding: 30px 0 60px;
  font-size: 18px;
  text-align: center;
    color: var(--ecru);
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .fooHours .hoursNav {
  	font-size: 18px;
  }
    .fooOne p {
        font-size: 19px;
    }
    .footerBg {
        margin-top: 60px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .footerBg {
  	margin: 45px 0 0;
      padding-top: 60px;
  }
  .fooLogo img{
    width: 210px;
  }
  .fooHours .hoursNav {
  	font-size: 18px;
  }
  .fcopy {
  	font-size: 16px;
  }
    .fooOne p,
    .fooMenu ul li.dlink {
        font-size: 18px;
    }
    .fooOne p {
        width: 440px;
    }
    .fooSocial {
        margin-top: 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .footerBg {
  	margin: 50px 0 0;
      padding-top: 50px;
  }
  .fooLogo img{
    width: 180px;
  }
  .fooOne p,
  .fooMenu ul li.dlink,
  .fooHours .hoursNav{
  	font-size: 16px;
  }
    .fooOne p {
        width: 320px;
    }
  .fooHours .hoursNav strong {
  	min-width: 100px;
  }
  .fcopy {
  	font-size: 16px;
  }
    .fooPhone,
    .fooThree .fooAdr,
    .fooHours ul li {
        font-size: 16px;
    }
     .fooSocial {
        margin-top: 40px;
    }
}
@media only screen and (max-width: 767px) {
  .footerBg {
  	  margin: 0;
      padding-top: 35px;
  }
    .fooLogo a img {
        margin: 0 auto;
    }
  .footerWrap{
    flex-direction: column;
    padding-bottom: 0px;
  }
  .fooLogo img{
    width: 180px;
  }
  .fooTwo{
    border-top: 1px solid var(--ecru);
    border-bottom: 1px solid var(--ecru);
    margin: 30px 0;
    padding: 30px 0 20px;
  }
  .fooOne p,
  .fooMenu ul li.dlink,
  .fooHours .hoursNav{
  	font-size: 18px;
      text-align: center;
  }
    .fooOne p {
        width: 380px;
        margin: 15px auto 0;
    }
    .fooSocial {
        margin: 35px auto 0;
        display: flex;
        justify-content: center;
    }
  .fooHours .hoursNav strong {
  	min-width: 100px;
  }
  .fooHours .hoursNav {
  	max-width: 275px;
  }
  .fcopy {
  	font-size: 16px;
    line-height: 1.5;
    padding: 40px 0 30px;
  }
  .fcopy p span{
    display: block;
  }
    .fooThree {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .fooThree .fooAdr {
        text-align: center;
    }
    .fooHours {
        text-align: center;
    }
    .fooMenu ul li.dlink .orderTopBtn{
      display: inline-block;
    }
    .fooOrder{
      display: none;
    }
}
@media only screen and (max-width: 479px) {
    .fooOne p {
        width: 280px;
    }
}
/*========================================================
     Menu Page
=========================================================*/
.browseMenuSecMobile,
.browseMenuSecCaterMobile {
    display: none!important;
}
.menubg {
    padding: 50px 0 60px;
}
.subMainTit h1 {
    padding: 35px 0;
    font-size: 54px;
    font-weight: 400;
    text-align: center;
}
.menuTitWrap {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.menuTitLeft p {
    font-size: 46px;
}
.menuTitLeft,
.menuTitRight {
    width: 100%;
}
.menuTitRight {
    border-left: 0;
}
.menuTitRight p {
    padding-left: 0;
}
.browseMenuSecDesktop {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.browseMenuSecCaterDesktop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    max-height: 1920px;
}
.menuSiteBox {
    width: 49%;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
   .menubg {
        padding: 20px 0;
    }
    .subMainTit h1 {
        font-size: 48px;
    }
    .menuTitLeft p {
        font-size: 38px;
    }
    .mPlatesDescRight p {
        font-size: 18px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .menubg {
        padding: 20px 0;
    }
    .subMainTit h1 {
        font-size: 48px;
    }
    .menuTitLeft p {
        font-size: 38px;
    }
    .mPlatesDescRight p {
        font-size: 18px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .menubg {
        padding: 0;
    }
    .subMainTit h1 {
        font-size: 48px;
    }
    .menuTitLeft p {
        font-size: 38px;
    }
    .mPlatesDescRight p {
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
   .menubg {
        padding: 0;
    }
    .subMainTit h1 {
        font-size: 48px;
    }
    .menuTitLeft p {
        font-size: 38px;
    }
    .mPlatesDescRight p {
        font-size: 18px;
    }
    .browseMenuSecDesktop,
    .browseMenuSecCaterDesktop{
        display: none!important;
    }
    .browseMenuSecMobile {
        display: flex!important;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-bottom: 35px;
    }
    .browseMenuSecCaterMobile {
        display: flex!important;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-bottom: 35px;
    }
    .menuSiteBox {
        width: 100%;
    }
}
@media only screen and (max-width: 479px) {
    .subMainTit h1 {
        font-size: 36px;
    }
    .menuTitLeft p {
        font-size: 30px;
    }
    .mPlatesDescRight p {
        font-size: 16px;
    }
    .menuSiteBox {
        padding: 10px 10px 20px 10px;
    }
    .mMenuPosPrice p,
    .mMenuPos2Half p span {
        font-size: 18px;
    }
}

/*========================================================
    CONTACT page
=========================================================*/
.contactbg {
    padding: 80px 0;
}

.contnWrap {
    width: 90%;
    margin: 200px auto 90px;
    display: flex;
}

.contnWrap-center{
    max-width: 750px;
    margin: 0 auto;
    width: 100%;
}
.mt-50{margin-top: 50px !important;}
.pb-0{padding-bottom: 0 !important;}

.contnLeft,
.contnRight {
    width: 50%;
}

.contnLeft {
    padding-top: 90px;
}

.contnH2 {
    font-size: 48px;
    font-family: futuram, arial, sans-serif;
    text-align: center;
    text-transform: capitalize;
    color: var(--black);
    padding-bottom: 35px;
}

.contactWrap {
    text-align: center;
}

.contactWrap h1 {
    font-family: barlowextrabold, arial, sans-serif;
    font-size: 48px;
    text-transform: uppercase;
    color: var(--mainblue);
}

.contactWrap h1 span {
    font-size: 123px;
    line-height: 1;
    display: block;
}

.contTel {
    font-size: 48px;
    color: var(--orange);
    text-align: center;
    padding: 5px 0 25px;
    font-family: poppins-semi, arial, sans-serif;
}

.contAdr,
.contHours {
    font-size: 28px;
    line-height: 1.2;
    padding-bottom: 15px;
    font-family: poppins-reg, arial, sans-serif;
}
.contHours{
  margin-top: 30px;
  max-width: 320px;
  margin: 30px auto 0;
  font-weight: 400;
}
.contHours li{
  max-width: 320px;
  font-size: 28px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.contHours li strong{
  min-width: 175px;
  text-align: left;
}
.contHours li span {
    display: block;
}
.contHours li .hourCell{
  text-align: left;
  min-width: 140px;
}

.contAdr span {
    display: block;
}

.contForm {
    text-align: center;
    margin-bottom: 80px;
}

.contPar p {
    font-size: 36px;
    color: var(--blue);
}

.formHalfWrapper {
    display: flex;
    justify-content: space-between;
}

.sectionMap {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.sectionMap iframe {
    width: 100%;
    height: 400px;
    border: 0;
    display: block;
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .contnWrap {
        width: 100%;
        margin: 90px auto 35px;
    }

    .contactWrap h1 {
        font-size: 36px;
    }

    .contactWrap h1 span {
        font-size: 100px;
    }

    .contTel {
        font-size: 36px;
    }

    .contAdr,
    .contHours {
        font-size: 24px;
    }
    .contHours{
      max-width: 270px;
    }
    .contHours li{
      max-width: 270px;
      font-size: 22px;
    }
    .contHours li strong,
    .hourCell {
    	width: 50%;
    }
    .contHours li strong {
    	min-width: 140px;
    }
    .contnH2 {
        font-size: 38px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .contnWrap {
        width: 100%;
        margin: 60px auto 50px;
    }

    .contForm {
        width: 90%;
        margin: 0 auto;
    }

    .contactWrap h1 {
        font-size: 36px;
    }

    .contactWrap h1 span {
        font-size: 100px;
    }

    .contTel {
        font-size: 34px;
    }
    .contnH2 {
        font-size: 38px;
    }

    .contactbg {
        padding: 50px 0;
    }

    .contactWrap h1 span {
        font-size: 90px;
    }

    .contactWrap h1 {
        font-size: 32px;
    }

    .contAdr,
    .contHours {
        font-size: 21px;
    }
    .contHours {
        font-size: 21px;
    }
    .contHours{
      max-width: 260px;
    }
    .contHours li{
      max-width: 260px;
      font-size: 22px;
    }
    .contHours li strong,
    .hourCell {
    	width: 50%;
    }
    .contHours li strong {
    	min-width: 140px;
    }

}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .contnWrap {
        width: 100%;
        margin: 60px auto 50px;
        flex-direction: column;
    }

    .contnLeft,
    .contnRight {
        width: 100%;
    }

    .contnLeft {
        padding-top: 0;
        padding-bottom: 50px;
    }

    .contForm {
        width: 90%;
        margin: 0 auto;
    }

    .contactWrap h1 {
        font-size: 36px;
    }

    .contactWrap h1 span {
        font-size: 100px;
    }

    .contTel {
        font-size: 34px;
    }

    .contnH2 {
        font-size: 38px;
    }

    .contactbg {
        padding: 35px 0;
    }

    .contactWrap h1 span {
        font-size: 80px;
    }

    .contactWrap h1 {
        font-size: 29px;
    }

    .contAdr,
    .contHours {
        font-size: 21px;
    }
    .contHours{
      max-width: 260px;
    }
    .contHours li{
      max-width: 260px;
      font-size: 22px;
    }
    .contHours li strong,
    .hourCell {
    	width: 50%;
    }
    .contHours li strong {
    	min-width: 140px;
    }
    .sectionMap iframe {
        height: 300px;
    }
}

@media only screen and (max-width: 767px) {
    .contnWrap {
        width: 100%;
        margin: 35px auto 50px;
        flex-direction: column;
    }

    .contnLeft,
    .contnRight {
        width: 100%;
    }

    .contnLeft {
        padding-top: 0;
        padding-bottom: 50px;
    }

    .contactbg {
        padding: 50px 0 35px;
    }

    .contactWrap h1 span {
        font-size: 80px;
    }

    .contactWrap h1 {
        font-size: 30px;
    }

    .contTel {
        font-size: 28px;
    }

    .contAdr,
    .contHours {
        font-size: 21px;
    }
    .contHours{
      max-width: 260px;
    }
    .contHours li{
      max-width: 260px;
      font-size: 22px;
    }
    .contHours li strong,
    .hourCell {
    	width: 50%;
    }
    .contHours li strong {
    	min-width: 140px;
    }
    .contnH2 {
        font-size: 36px;
    }

    .sectionMap iframe {
        height: 300px;
    }
    .contForm {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 479px) {
    .contactWrap h1 span {
        font-size: 70px;
    }

    .contactWrap h1 {
        font-size: 30px;
    }

    .contTel {
        font-size: 28px;
    }

    .contPar p {
        font-size: 30px;
    }

    .contForm {
        margin-bottom: 35px;
    }

    .contnWrap {
        margin-bottom: 0;
    }

    .contnWrap-mb-25 { margin-bottom: 25px;}
}

/*========================================================
    Mobile Menu
=========================================================*/
@media only screen and (max-width: 1023px) {
  .logoMob,
  .telMob {
    display: inline-block;
  }
  .logoMob img {
    width: 155px;
  }
  .boxesWrap {
    width: 90%;
    height: 80px;
  }
  .boxes {
    height: 80px;
  }
  .three,
  .one {
    display: none;
  }
  .two {
    width: 100%;
    flex-direction: row;
  }
  .logoInMob {
    width: 80%;
  }
  nav {
    width: 20%;
    display: flex;
    align-items: center;
  }
  .telMob,
  .menu {
    width: 50%;
    text-align: right;
  }
  .smobitrigger,
  .mnuclose {
    display: inline-block;
  }
  .smobitrigger {
    color: transparent;
    width: 30%;
    margin: 0 auto;
  }
  .smobitrigger {
    background: url("../images/menuopen.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
  }
  .mnuclose {
    background: url("../images/menuclose.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 45px 45px;
    color: transparent;
    height: 45px;
    margin: 0 0 10px 0;
    width: 100%;
    text-align: right;
    display: inline-block;
  }
  .menu ul {
    padding: 0 15px 20px;
    overflow-y: auto;
    margin: 0 auto;
    text-align: left;
  }
  .menu ul li.dlink {
    display: block;
    text-align: left;
    padding: 0;
  }
  .menu li {
    line-height: inherit;
  }
  .menu ul li a {
    font-size: 18px;
  }
  .menu ul li.dlink .orderTopBtn{
    color: var(--white)!important;
    margin-top: 10px;
    padding: 6px 17px;
  }
  .menu ul li.mlogo {
    margin: 20px 0 0;
    display: inline-block;
    text-align: left;
  }
  .menu ul li.mlogo img {
    width: 195px;
    margin: 0 0 30px;
    text-align: left;
  }
  .menu ul li.mphone {
    display: block;
    margin-bottom: 10px;
    text-align: left;
  }
  .menu ul li.mphone span {
    display: block;
    font-size: 16px;
    font-weight: 300;
    color: #777;
  }
  .menu ul li.mphone a {
    font-size: 26px;
    color: var(--yellow-main) !important;
  }
  .directionsCla {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .menu ul li.maddress {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    text-transform: capitalize;
    margin: 25px auto 30px;
    color: #777;
    text-align: left;
  }
  .menu ul li.maddress span {
    display: block;
  }
  .menu ul li.mhours {
    display: block;
    font-size: 16px;
    line-height: inherit;
    margin: 30px 15px;
    color: #fff;
    font-family: barlowmedium, arial, sans-serif;
  }
  .menu ul li.mhours span {
    display: block;
  }
  .menu ul li.hoursNav{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 18px;
  }
  .menu ul li.hoursNav strong{
    width: 35%;
  }
  .menu ul li.hoursNav .hourCell{
    width: 65%;
  }
  .menu ul li.msocial {
  	display: flex;
  	margin: 35px 0 60px;
  }
  .menu ul li.msocial img {
  	margin: 0 10px 0 0;
  }
  .mobimenu {
    padding: 0;
    margin: 0px;
    width: 16.9375em;
    position: fixed;
    height: 100% !important;
    top: 0px;
    left: -24.625em;
  }
  .mnuopn {
    left: 0px !important;
  }
  .ovrActv {
    position: fixed;
    background: rgba(0, 0, 0, 0.79);
    width: 100%;
    height: 100%;
    z-index: 9998;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }

}
@media only screen and (max-width: 767px) {
    .logoInMob {
        width: 70%;
    }
    nav {
        width: 30%;
    }
}
@media only screen and (max-width: 479px) {
    .logoInMob {
        width: 60%;
    }
    nav {
        width: 40%;
    }
}