/* common.css */

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Helvetica', sans-serif;  /* Using a clean, modern typeface as per the logo style */
    margin: 0;
    padding: 0;
}

header {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;	
	height: 90px; /* Ensures header height matches content */
    align-items: center; /* Align items vertically in the center */
    padding: 0; /* Remove padding if it affects the height */
}

.logo img {
    height: 60px;
    width: auto;  /* Ensure the aspect ratio of the logo is preserved */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    flex-wrap: wrap;  /* Allows items to wrap when there is limited space */
}

.menu {
    display: flex;
    gap: 8px;
    font-size: 1.1em;
}

/* .separator { color: red; } */


nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

nav .active {
    color: #ff0000; /* Highlight color for active menu item, similar to logo color */
    border-bottom: 2px solid #ff0000;  /* Indicating which section is active */
}

/* Hamburger menu style */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 3px;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 250px;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 150;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu a {
    display: block;
    margin: 1rem 0;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.mobile-menu .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Show hamburger icon in mobile view */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    .menu {
        display: none;
    }
    .mobile-menu {
        display: block;
    }
}

main {
    margin-top: 15px;  /* Adjusted to ensure the main content is not overlapped by the sticky header */
}

/* Center the main heading and tagline */
main h1 {
    text-align: center;
    font-size: 2em;
    margin:0 0 5px 0;
}

.tagline{
  font-size:1em;
  color:#555;
  text-align:center;
  margin:0;
}

footer {
    background: #FFFFFF;
    text-align: center;
    padding: 1rem 0 1rem 0; /* top right bottom left */
    font-size: 0.7em;
    color: #666;
}

footer a {
    color: #666;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.footer-icons {
    margin-top: 8px;
}

.footer-icons img {
    width: 15px;
    height: 15px;
    margin: 10px 5px 10px 5px; /* top right bottom left */
    vertical-align: middle;
}

/* Note Styling */
.note {
    text-align: center;
    font-size: 0.7rem;
    color: #777;
    margin-top: 20px;
    padding-bottom: 0px;
}

/* Note Styling */
.extranote {
    text-align: center;
    font-size: 0.7rem;
    color: #777;
    margin-top: 0px;
    padding-bottom: 0px;
}

/* Book Online Button Container Styling */
.inner-box button {
    display: block; /* Makes the button take up its own line */
    margin: 10px auto; /* Center the button horizontally with top and bottom padding */
    background-color: #007BFF; /* Blue color for the button */
    color: #fff; /* White text for contrast */
    padding: 5px 15px; /* Padding inside the button for comfort and better look */
    border: none; /* Remove the border */
    border-radius: 5px; /* Rounded corners for the button */
    cursor: pointer; /* Show pointer cursor to indicate the button is clickable */
    font-size: 12px; /* Make the font size easy to read */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effect */
}

/* Button Hover and Active States for Better UX */
.inner-box button:hover {
    background-color: #0056b3; /* Darker blue when hovering */
    transform: translateY(-3px); /* Slight upward movement for a nice visual feedback */
}

.inner-box button:active {
    background-color: #004494; /* Even darker blue when button is clicked */
    transform: translateY(1px); /* Button moves down slightly when clicked */
}

/* To show the info pop up */
.info-icon {
    margin-left: 10px;
    color: #007BFF; /* You can change this color to suit your design */
    font-size: 1.2em; /* Adjust size as needed */
    cursor: pointer;
}

.info-icon:hover {
    color: #0056b3; /* Darker shade on hover */
}

/* The Modal (background) */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
}

/* Modal Content Container */
/* Modal Content Container with Rounded Corners */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 75%;
    font-family: Arial, sans-serif;
    border-radius: 15px; /* Adds rounded corners to the modal */
}

/* Close Button */
.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Font Size for Heading in Modal */
.modal-content h2 {
    font-size: 1.2em; /* Adjust the font size for the heading */
    font-weight: bold; /* You can make it bold for more emphasis */
    margin-bottom: 15px; /* Adds some space after the heading */
}

/* Font Size for Paragraph in Modal */
.modal-content p {
    font-size: 0.9em; /* Adjust font size for paragraphs */
    line-height: 1.5; /* Increase line height for better readability */
    margin-bottom: 10px; /* Adds space between paragraphs */
}

.light-separator {
	color:gray;	
}

/* Desktop only view for SEO*/
@media (max-width: 1024px) {
    .desktop-only {
        display: none;
    }
}

/* Styling for the Article in the SEO Container */
.desktop-only article {
    line-height: 2; /* Increases the spacing between lines for readability */
    margin-bottom: 20px; /* Adds space between each section (paragraph, list, etc.) */
    padding: 20px; /* Adds padding inside the article for breathing space */
    font-size: 1rem; /* Adjust the font size to make it more readable */
    color: #333; /* A dark grey for a softer look, making text easier on the eyes */
    border-radius: 8px; /* Rounds the edges for a modern, professional look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds subtle shadow for a 3D look */
}

/* List Styling for Better Readability */
.desktop-only article ul {
    margin-left: 20px; /* Adds space on the left for indentation */
    margin-bottom: 15px; /* Adds space after the list for breathing room */
}

/* Paragraph Spacing */
.desktop-only article p {
    margin-bottom: 15px; /* Adds space below each paragraph */
}

/* Headings Styling for Better Emphasis */
.desktop-only article h2 {
	margin-top: 20px; /* Adds space before headings */
    margin-bottom: 10px; /* Adds space after headings */
    font-weight: bold; /* Makes headings bold for emphasis */
    color: #222; /* Darker shade for headings */	
    text-align: center; /* Aligns text in the center */
} 
.desktop-only article h3 {
    margin-top: 20px; /* Adds space before headings */
    margin-bottom: 10px; /* Adds space after headings */
    font-weight: bold; /* Makes headings bold for emphasis */
    color: #222; /* Darker shade for headings */
}

.contact-locations {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between locations */
    font-size: 14px;
}

.location {
    display: flex;
    align-items: center; /* Aligns icons and text vertically */
    gap: 10px; /* Space between elements within a location */
}

.location-name {
    font-weight: bold;
    margin-right: 5px; /* Optional for slight space after location name */
	color: #333333;
}

.phone-link {
    display: flex;
    align-items: center; /* Align icons and text vertically */
    text-decoration: none;
    gap: 5px; /* Space between icon and text */
 }
 
.whatsapp-link {
    display: flex;
    align-items: center; /* Align icons and text vertically */
    text-decoration: none;
    gap: 5px; /* Space between icon and text */
}

.separator {
    margin: 0 5px; /* Uniform space around the separator */
    color: #999; /* Optional: gray color for separator */
}

.contact-link {
    color: #fff; /* Ensure links are readable */
    text-decoration: none;
    margin: 0 5px;  /* Reduced margin to bring elements closer */
    font-size: 0.8rem;
}

/* X Mas Banner */

/* Banner Styles */

body .xmasdiscount-banner {
    background-color: #FF2400; /* Christmas red */
    color: #fff; /* White text */
    text-align: center;
    position: relative;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Prevent content overflow */
    height: 140px; /* Fixed height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Styling for the Santa GIF */
.santa-gif {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 74px;
    z-index: 2;
    border-radius: 50%; /* Rounded edges */
    border: 2px solid #fff; /* Optional border */
}

/* Text Styling */
.xmasdiscount-banner h2 {
    font-size: 1.5em;
    margin: 10px 0;
    z-index: 2;
}

.xmasdiscount-banner p {
    margin: 0;
    z-index: 2;
}

.xmasdiscount-banner a {
    color: #FFD700; /* Gold links */
    text-decoration: underline;
    font-weight: bold;
}

.xmasdiscount-banner a:hover {
    text-decoration: none;
    color: #fff;
}

/* Canvas for Snowfall */
#snowfall-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind content */
    pointer-events: none; /* Allow interaction with links */
}

/* Added 28Nov24 */
.discount-banner {
    background-color: #FF4433; /* Bright orange to grab attention */
    color: #fff; /* White text for contrast */
    text-align: center;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.discount-banner h2 {
    margin: 0 0 10px;
    font-size: 1.5em;
}

.discount-banner a {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
}

.discount-banner a:hover {
    text-decoration: none;
}


/* Contact Strip Styling */
.contact-strip {
    position: fixed;  /* Stays at the bottom of the viewport */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333; /* Use a subtle color, like a dark gray */
    color: #fff;
    display: flex;  /* Flexbox for alignment */
    justify-content: center;  /* Align items closer together */
    align-items: center;  /* Vertically center align items */
    padding: 5px 0px;  /* Padding around the strip */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    gap: 10px;  /* Control the space between flex items */
    font-size: 0.8rem;
}

.contact-link {
    color: #fff; /* Ensure links are readable */
    text-decoration: none;
    margin: 0 5px;  /* Reduced margin to bring elements closer */
    font-size: 0.8rem;
}

.contact-link:hover {
    color: #ffcc00; /* Change color on hover for better user experience */
}

.contact-link i {
    margin-right: 3px; /* Reduced space between icon and text */
}

/* Mobile View Styling */
@media (max-width: 768px) {
    .contact-strip {
       padding: 5px 0px;
       flex-wrap: wrap; /* Wrap items if they don't fit on small screens */
    }
    .contact-link {
        margin: 3px 0; /* Reduced margin for even closer alignment on mobile */
        font-size: 0.8rem;
    }
}

/* Strip CSS for Offers */

.offer-strip {
  position: sticky;
  top: 0;
  z-index: 9999;

  display: block;
  width: 100%;
  padding: 5px 12px;

  background: #d80000; /* brand red */
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;

  text-decoration: none;
}

.offer-strip strong {
  font-weight: 800;
}

.offer-strip:hover {
  background: #b80000;
}


/* ==========================================
   DND Contact Locations For Header
========================================== */

.dnd-contact-locations {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.dnd-location-item {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 6px;
   font-size: 14px;
}

.dnd-location-name {
   width: 140px;
   font-weight: 600;
   color: #222222;
}

.dnd-contact-icon {
   text-decoration: none;
   font-size: 16px;
   display: flex;
   align-items: center;
}

.dnd-contact-icon .fa-phone-alt {
   color: #DC3545;
}

.dnd-contact-icon .fa-whatsapp {
   color: #05a81e;
}

.dnd-separator {
   color: #333333;
   font-weight: bold;
}

/* Mobile Responsive */

@media (max-width: 576px) {

   .dnd-location-item {
      gap: 4px;
      font-size: 13px;
   }

   .dnd-location-name {
      width: 120px;
   }

   .dnd-contact-icon {
      font-size: 15px;
   }
}


@media (min-width: 768px) {
  .offer-strip {
    font-size: 15px;
  }
}