:root {
    --primary: #E88F2A;
    --secondary: #FAF3EB;
    --light: #FFFFFF;
    --dark: #2B2825;
    --descriptionColor: #717171;
 }
 
 
 *{
    box-sizing: border-box;
 }
 
 
 /* BreadCrumb Css  */
 
 body {
    overflow-y: auto;
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: #f4f4f4;
 }
 
 .container{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
 }
 
 .title-border{
    width:15%;
    border-top: 5px solid #E88F2A;
    margin-left: 43%;
 }
 
 /* header */
 .header {
    position: sticky; /* Allocates space for the element, but moves it with you when you scroll */
    top: 0; /* specifies the start position for the sticky behavior - 0 is pretty common */
    background-color: var(--dark) !important;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    width: 100%;
    z-index: 3;
    border-bottom: 3px solid var(--primary);
 }
 
 .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
 }
 
 .header li a {
    display: block;
    color: var(--light);
    text-decoration: none;
    margin-left: 10px;
 }
 
 .header li a:hover,
 .header .menu-btn:hover {
    color: var(--primary);
 }
 
 .header .logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 5px 20px;
    text-decoration: none;
 }
 /* menu */
 
 .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
    margin-left: 200px;
    line-height: 2.0em;
 }
 
 /* menu icon */
 
 .header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 35px 15px 0px 0px;
    /* position: relative; */
    user-select: none;
    /* margin-left: 200px; */
 } 
 
 .header .menu-icon .navicon {
    background: var(--light);
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
 }
 
 .header .menu-icon .navicon:before,
 .header .menu-icon .navicon:after {
    background: var(--light);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
 }
 
 .header .menu-icon .navicon:before {
    top: 5px;
    color: var(--light);
 }
 
 .header .menu-icon .navicon:after {
    top: -5px;
    color: var(--light);
 }
 
 /* menu btn */
 
 .header .menu-btn {
    display: none;
 }
 
 .header .menu-btn:checked ~ .menu {
    max-height: 240px;
 }
 
 .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
 }
 
 .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
 }
 
 .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
 }
 
 .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
 .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
 }
 
 /* 48em = 768px */
 
 @media (min-width: 58em) {
    .header li {
       /* float: left; */
       display: inline-flex;
       padding-left: 10px;
       padding-right:10px;
    }
    .header li a {
       font-family: 'Oswald', sans-serif;
       padding: 26px 15px;
       font-size: 20px;
       font-weight: 800;
       text-align: right;
       line-height: 1.2em;
    }
    .header .menu {
       clear: none;
       float: center;
       max-height: none;
    }
    .header .menu-icon {
       display: none;
    }
 
 }
 
 div.bodyContent {
    width: 100%;
    min-height: 150vh;
    background-color: var(--light);
    
 
 }
 /* BreadCrumb CSS end   */
 
 /* Menu item CSS  Start */
 /* Style the tab */
 .tab {
    overflow: hidden;
    border: 1px solid var(--primary);
    background-color: var(--dark);
    /* background-color: #f1f1f1; */
    padding: 0.5rem 1rem;
    align-items: center;
    width: 100%;
    /* position: absolute; */
 }
 
 /* Style the buttons inside the tab */
 .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px 10px;
    transition: 0.3s;
    font-size: 18px;
    text-align: center;
    color: var(--light);
    /* position: relative; */
 }
 
 /* Change background color of buttons on hover */
 .tab button:hover {
    background-color: var(--secondary);
    color: var(--dark);
 }
 
 /* Create an active/current tablink class */
 .tab button.active {
    background-color: var(--primary);
 }
 
 /* Style the tab content */
 .tabcontent {
    display: none;
    /* padding: 6px 12px; */
    border-top: none;
    height: 100%;
    flex-direction: column !important;
 
 }
 .tab-subcontent{
    width:100%;
    min-height:150px;
    margin:0;
 
 }
 .tab-menuItem{
    text-align: left;
    width:50%;
    margin: 0;
    flex-shrink: 0 !important;
    display: flex !important;
    position: relative;
    float:left;
    padding-right: 10px;
 }
 .tab-menuImg {
    float:left;
    text-align: left;
    background-color: var(--dark) !important;
    text-align: center;
    flex-shrink: 0 !important;
    position: relative;
    border: 1px solid var(--dark);
 }
 .tab-ImgPrice {
    background-color: var(--dark) !important;
    color: white;
    margin: auto;
    padding: 0.5rem !important;
    margin: 0 !important;
 }
 .tab-menuDescription{
    float:left;
    text-align: left;
    line-height: 1.2;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-top: 10px;
    color: var(--descriptionColor);
    background-color: var(--secondary);
    /*background-color: #eccca6;*/
 }
 .tab-menuTitle {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: 'Oswald',sans-serif;
    font-weight: 800;
    line-height: 1.2;
    color: var(--dark);
    width: 100%;
 }
 .tab-menuText {
    border: 2px solid #FFFFFF;
    min-height:80px;
    padding: 5px;
    min-width: 100%;
 }
 
 @media only screen and (max-width: 820px){
    .tab button {
       width: 100%;
    }
    h4{
       font-size: .9em;
    }
    .tab-menuDescription {
       float:left;
       text-align: left;
       line-height: 1em;
       padding-left: 1.5rem !important;
       padding-top: 10px;
       color: var(--descriptionColor);
       font-size: .8em;
       background-color: var(--secondary);
       width: 100%;
    }
    .tab-subcontent{
       width:100%;
       min-height:100%;
       margin:0;
       display: flex;
       flex-direction: column;
 
    }
    .sub-container {
       margin: auto;
       width: 100%;
       height: 100%;
    }
    .tab-menuItem{
       text-align: left;
       width:100%;
       margin: 0;
       flex-shrink: 0 !important;
       display: flex !important;
       position: relative;
       float:left;
       margin-bottom: 15px;
    }
    .tab-menuText {
       border: 2px solid #fff;
       min-height:80px;
       padding: 2px;
    }
 }
 /* Menu item CSS End */
 
 
 /* Common Font styles */
 .text-title{
    color: var(--primary) !important;
    font-family: 'Pacifico', cursive;
    text-align: center;
 }
 
 /* Footer content css starts*/
 .footer-container{
    width: 100%;
    background-color: var(--dark);
    margin: 0;
    /* min-height: 510px;
    position: relative; */
    display: inline-table
 }
 .footer-container-section{
    background-color: var(--dark);
    width: 25%;
    margin: 0;
    float: left;
    padding: 15px;
    position: relative;
 }
 .footer-bottom {
    margin-top: -4px;
    width: 100%;
    text-align: center;
    padding: 5px;
    color: var(--light);
    position: relative;
    border-top: 3px solid var(--primary);
    float: left;
    background-color: var(--dark);
 }
 @media only screen and (max-width: 1024px) {
    .footer-container-section{
       background-color: var(--dark);
       width: 100%;
       margin: 0;
       float: left;
       padding: 15px;
 
    }
 }
 .footer-text-title{
    color: var(--primary) !important;
    text-transform: uppercase !important;
    margin-bottom: 1.5rem !important;
    font-weight: 600 !important;
    text-align: left;
 }
 
 .footer-text{
    color: var(--light) !important;
    margin-bottom: 1.5rem !important;
    font-weight: 200 !important;
    text-align: left;
 }
 .footer-text, a {
    color: var(--light);
 }
 
 .sub-container {
    margin: auto;
    width: 100%;
    min-height: 420px;
 }
 
 .column-1 {
    margin: auto;
    width: 40%;
    text-align: center;
    padding: 5px;
    float: left;
    display: flex !important;
 }
 
 .column-12 {
    margin: auto;
    width: 60%;
    text-align: left;
    padding: 10px;
    float: left;
    position: relative;
 }
 @media only screen and (max-width: 700px) {
    .column-1 {
       margin: auto;
       width: 100%;
       text-align: center;
       padding: 5px;
       float: left;
       display: flex !important;
    }
    .column-12 {
       margin: auto;
       width: 100%;
       text-align: left;
       padding: 10px;
       float: left;
    }
 }
 .circular-portrait {
   position: relative;
   width: 145px;
   height: 145px;
   overflow: hidden;
   border-radius: 50%;
}
.circular-portrait img {
   width: 100%;
   height: auto;
}
 /* Footer content css starts*/
 
 /* contact us css starts*/
 .contactus-text{
    color: var(--dark) !important;
    margin-bottom: 1.5rem !important;
    font-weight: 200 !important;
    text-align: left;
 }
 .contactus-text a {
    color: var(--dark);
 }
 .contactus-container-section{
    background-color: var(--light);
    width: 35%;
    margin: 0;
    float: left;
    padding: 15px;
    position: relative;
 }
 @media only screen and (max-width: 700px) {
    .contactus-container-section{
       background-color: var(--light);
       width: 100%;
       margin: 0;
       float: left;
       padding: 15px;
       position: relative;
 
    }
 }
 /* contact us css ends*/
 
 /* Slider image text Start*/
 .imgTitle1 {
    position: absolute;
    top: 45%;
    left: 15%;
    transform: translate(-50%, -50%);
    color: var(--light);
    line-height: 5em;
    font-size: 80px;
    font-family: candara;
    font-weight: 800;
    text-transform: uppercase;
  }
  .imgTitle2 {
    position: absolute;
    top: 55%;
    left: 19%;
    transform: translate(-50%, -50%);
    color: var(--light);
    line-height: 5em;
    font-size: 80px;
    font-family: candara;
    font-weight: 800;
    text-transform: uppercase;
  }
  .imgText {
    position: absolute;
    top: 65%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: var(--light);
    line-height: 5em;
    font-size: 35px;
    font-family: candara;
    font-weight: 800;
    text-transform: uppercase;
 }
 @media only screen and (max-width: 912px) {
    .imgTitle1 {
       top: 30%;
       left: 18%;
       line-height: 3em;
       font-size: 40px;
    }
    .imgTitle2 {
       position: absolute;
       top: 35%;
       left: 25%;
       line-height: 3em;
       font-size: 40px;
     }
     .imgText {
       position: absolute;
       top: 40%;
       left: 40%;
       line-height: 3em;
       font-size: 20px;
    }
 }
 /* Slider image text Start*/
 
 /* Footer CSS  START */
 
 .footer-opening-hours {
    width: 100px;
    margin-left: 5px;
    display: inline-block;
 }
 /* Footer CSS END  */
 
.button-5 {
   align-items: center;
   background-clip: padding-box;
   background-color: var(--primary);
   /*background-color: #fa6400;*/
   border: 1px solid transparent;
   border-radius: .25rem;
   box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
   display: inline-flex;
   /* font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif; */
   font-size: 16px;
   font-weight: 600;
   justify-content: center;
   line-height: 1.25;
   margin: 0;
   min-height: 3rem;
   padding: calc(.875rem - 1px) calc(1.5rem - 1px);
   position: relative;
   text-decoration: none;
   transition: all 250ms;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   vertical-align: baseline;
   width: auto;
}