.hours {
   background-image: url(../images/AI/production/steak\ and\ roasted\ fingerling\ potatoes\ wider\ view\ of\ the\ table.jpg);
   background-position: center;
   background-size: cover;    
   text-align: center;  
   display: block;    
   width: 100%;
   height: auto;   
   position: relative;       
}
.hours-overlay {
   background-color: var(--bg-overlay);       
   width: 100%;
   height: 100%;  
}
.box {   
   height: 100%;
   width: 92%;
   box-sizing: border-box;
   display: inline-block;     
}
.hours h4 {   
   color: var(--color-white);
   text-align: center;   
   box-sizing: border-box;
   font-size: var(--fs-md-heading);
   font-family: var(--font-primary);
   letter-spacing: var(--ls-lg);
   padding: 70px 0 0 0;
}
.hours p {
   color: var(--color-primary);   
   font-size: var(--fs-sm-heading);
   font-family: var(--font-primary-cursive);
   text-align: center;
}
/* Start Separator decor */
.hours-separator:before {
   content: " ";   
   width: 7%;
   height: 1px;
   background: var(--color-primary);
   border: 0.25px solid var(--color-primary);
   font-weight: 100;
   left: 35%;   
   top: 345px;
   opacity: 0.3;   
   position: absolute;   
}
.hours-separator {    
   text-align: center;
   font-size: 50px;
   width: 6px;
   height: 6px;
   background: var(--color-white);
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;
   align-items: center;
}
.hours-separator:after {
   content: " ";   
   width: 7%;
   height: 1px;
   background: var(--color-primary);
   border: 0.25px solid var(--color-primary);
   font-weight: 100;
   right: 35%;     
   top: 345px;
   opacity: 0.3;
   position: absolute;   
}
/* End Separator decor */
.hours-container {
   display: flex;   
}
.hours-days {
   color: var(--color-primary);     
   box-sizing: border-box;
   font-size:var(--fs-sm-heading);
   font-family: var(--font-primary-cursive);   
   width: 50%;
   padding-top: 50px;   
}
.hours .hours-time p {   
   color: var(--color-white);
   box-sizing: border-box;
   font-size: var(--fs-2x1);
   font-weight: var(--fw-semibold);   
   font-family: var(--font-primary);    
}
.box .hours-reservation a {
   color: var(--color-white);
   font-size: var(--fs-2x1);
   font-weight: var(--fw-semibold);
   letter-spacing: 2px;
   font-family: var(--font-primary);
   cursor: pointer;
}
.box .hours-reservation a:hover {
   color: var(--color-primary);
   font-size: 32px;
   font-weight: 600;
   letter-spacing: 2px;
   font-family: var(--font-primary);
   cursor: pointer;
   transition: color 0.3s ease; 
}
/* Start Hours spike decor  */
.hours-spiked {
   height: 50px;   
   position: relative;    
 } 
 .hours-spiked:after {
   position: absolute;
   content: '';
   right: 0;
   left: 0;
   top: 100%;
   z-index: 1;
   display: block;
   height: var(--fs-sm);
   background-size: 14px 100%;
   background-image: 
   linear-gradient(135deg, rgb(15, 15, 15) 25%, transparent 25%), 
   linear-gradient(225deg, rgb(15, 15, 15) 25%, transparent 25%);           
 } 
/* End Hours spike decor  */

 /* *********Media Queries for 'Opening Hours' section  ************/     

 @media screen and (min-width: 769px) and (max-width:1500px) {
   .box h4 {      
      font-size: var(--fs-md-heading);
   }
   .hours p {      
      font-size: 30px;
      letter-spacing: var(--ls-lg);      
   }
   .hours-separator:before {
      content: " ";   
      width: 7%;
      height: 1px;
      background: var(--color-primary);
      border: 0.25px solid var(--color-primary);
      font-weight: 100;
      left: 35%;   
      top: 345px;
      opacity: 0.3;   
      position: absolute;   
   }
   .hours-separator {    
      text-align: center;
      font-size: 50px;
      width: 6px;
      height: 6px;
      background: var(--color-white);
      border-radius: 50%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
   }
   .hours-separator:after {
      content: " ";   
      width: 7%;
      height: 1px;
      background: var(--color-primary);
      border: 0.25px solid var(--color-primary);
      font-weight: 100;
      right: 35%;     
      top: 345px;
      opacity: 0.3;
      position: absolute;   
   }   
   .hours-days {
      font-size: 30px;
      letter-spacing: 2.0;
   }
 }
 @media screen and (max-width: 768px)  {
   .box h4 {      
      font-size: var(--fs-sm-heading);
   }
   .hours-separator {
      display: none;
   }
   .hours p {      
      font-size: 30px;
      letter-spacing: 2.0;      
   }
   .hours-days {
      font-size: 30px;
      letter-spacing: 2.0;
      text-wrap: pretty;     
      padding-top: 20px;      
   }
   /* ***** To handle the line break ******** */
   .hours-days .col1-break::before {
      content: "\A";
      white-space: pre;         
   }
   .hours-days .col2-break::before {
      content: "\A";
      white-space: pre;       
   }  
 }