/* Custom Styling Overrides */
body {
  text-align: center;
  font-family: 'BeVietnamPro', sans-serif;
  letter-spacing: 1px;
  font-size: 18px;
  font-weight: 600;
  background-color: #000;
}

@font-face {
  font-family: 'BeVietnamPro';
  src: url("../font/BeVietnamPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}



h1,

h2,
h3,
h4,
h5,
h6 {
  font-family: 'BeVietnamPro';
  font-weight: bold;
  color: #fff;
}

/* @media (max-width: 454px) {
h1{
  font-size:20px;
}
}

@media (max-width: 350px) {
h1{
  font-size:18px;
}
} */

p{
  font-weight:lighter;
}

a{
  color:#fff;
}

a:hover{
color:gray;
}

.blockquote {
  position: relative;
  font-style: italic;
  padding: 1.5em 2em;
  font-size: 2.5rem;
  color: #333;
  line-height: 1.5;
}

@media (max-width: 767px) {
.blockquote{
  font-size: 1.5rem;
}
}


@media (max-width: 340px) {
.blockquote{
  font-size: 0.6rem;
}
}

.blockquote::before,
.blockquote::after {
  font-size: 7rem;
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
   font-family: 'BeVietnamPro'; /* Optional: for nice curly quotes */
   font-weight: 300;
}

.blockquote::before {
  content: '“';
  left: 0;
  transform: translate(20%, -50%); 
}

.blockquote::after {
  content: '”';
  right: 0;
   
  transform: translate(-70%, -50%);
}

@media (max-width: 560px) {
.blockquote::before,
.blockquote::after{
  font-size: 5rem;
}
}


/* .px-6 {
  padding-right: 6rem !important;
  padding-left: 6rem !important;
} */

/*Navbar*/
.navbar {
  padding: 0;
  background-color: #000;
 border-bottom: 2px solid #fff;
 padding-top:10px;
padding-bottom:10px;
height:142px;
}

nav .navbar-nav {
  margin: 0 auto;
  align-items: center;
}

strong {
   font-weight: bold !important;
}
.nav-link {
  font-size: 1rem; /* Default for larger screens */
}
.navbar .nav-item {
  padding: 0 0.5em;
  min-width: 80px;
  height: 120px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.navbar-collapse{
  background-color:#000;
 
}


.social-icons i{

  color: #fff;
  background-image: none;
  font-size: 1.5rem;
}

@media (max-width: 1325px) {
  .nav-link {
    font-size: 0.8rem; /* Adjust for tablets */
  }
  .navbar .nav-item {
    padding: 0 0.4em;
    min-width: 60px;
  }
  .social-icons i{
    font-size: 1rem
  }
}

@media (max-width: 1080px) {
  .nav-link {
    font-size: 0.7rem; /* Adjust for tablets */
  }
  .navbar .nav-item {
    padding: 0 0.3em;
    min-width: 50px;
  }
}

@media (max-width: 991px) {
  .nav-link {
    font-size: 1rem; /* Adjust for tablets */
  }
  .navbar .nav-item {
    padding: 0 0.3em;
    min-width: 50px;
    max-height:50px;
  }
  .social-icons i{
    font-size: 1.5rem
  }
  .nav-logo{
    display:none !important;
  }

  .navbar-nav{
    padding-bottom:10px;
  }

  .navbar-collapse{
  margin-top:22px;;
 
}
}



nav .navbar-nav a {
  color: #fff;
 
  margin: auto;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  
  
}



nav .navbar-nav a:hover {
  color: gray;
}

.dropdown-franchise{
  white-space: normal;
    display: block; /* Ensures full width */
    word-wrap: break-word;
}

.navbar-toggler-icon {
  padding-top: 0.2em;
  color: gray;
}

button.navbar-toggler .navbar-toggler-icon {
  background-image: none;
}

/* Style the Font Awesome icon */
button.navbar-toggler .navbar-toggler-icon i {
  color: #fff !important;
  /* Ensure your custom color */
  font-size: 1.5rem;
  /* Adjust size as needed */
}



.navbar-toggler:focus {
  box-shadow: 0 0 0 0;
}

.navbar-brand img {
  height: 100px;
}

.nav-item.menu-desktop {
  display: none;
}

.social-icons{
  margin-left:10px;
}

.social-icons i:hover{
  color: gray;
}

@media (min-width: 992px) {

  .navbar-brand,
  .nav-item.menu-mobile {
    display: none;
  }

  .nav-item.menu-desktop {
    display: flex;
  }

  
}

.dropdown-menu{
  background-color: #000;
  font-weight: bolder;
  border-left: 2px solid #fff;
}

.dropdown-item{
  font-weight: bold;
}


.nav-logo img {
  height: 100px;
}

.nav-link.active {
  color: gray;
}

.nav-link:focus,
.nav-link:hover {
  color: gray;
}

.nav-item>a {
  padding-top: 1.3em;
}

.nav-item.nav-logo .nav-link {
  padding-top: 0.7em;
}

.navbar-nav .nav-link.active {
  color: gray;
}

.navbar-nav .nav-link.show{
   color: #fff;
}


 

/* #formIframe {
  padding: 50px 0px 50px 0px;
} */

/*Footer*/

#footer {
  background-color: #000;
      border-top: 2px solid #fff;
}



#footer h5 {
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'lato', sans-serif;
}

#footer .footer-content-rows {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding-top: 2rem;
}

#footer .col-sm-4 {
  margin: 0;
  padding: 0;
  
}

@media (max-width: 766px) {
  #footer .col-sm-4 {
    width: 100%;
    margin-top: 30px;
  }
}



#footer ul#footer-nav li.nav-item {
  color: white;
}

#footer ul#footer-nav li.nav-item a.nav-link {
  font-size: 12px;
  padding: 0px;
  text-transform: uppercase;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 0px;
  display: block;
  padding-bottom: 5px;
}

@media (max-width: 766px) {
  #footer ul#footer-nav li.nav-item a.nav-link {
    padding-bottom: 15px;
  }
}



#footer #copyrightinfo {
  margin-top: 20px;
}

#footer #copyrightinfo p {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 0px 30px;
  font-family: 'Source Sans Pro', sans-serif;
}

#footer #copyrightinfo a {
  color: #fff;
  text-decoration: none;
  padding: 0 5px;
  font-family: 'Source Sans Pro', sans-serif;
}

#footer #copyrightinfo a:hover {
  color: gray;
  
}

.footer-menu a{
  color:#fff;
  text-transform: uppercase;
  text-decoration: none;
  font-size:14px;
  
}

.footer-menu a:hover{
color: gray;
}

.footer-right{
text-align:right;
}

.footer-left{
text-align:left;
}

@media (max-width: 664px) {
.footer-menu a{
font-size:12px;
}


}

@media (max-width: 575px) {
.footer-right{
text-align:center;
}

.footer-left{
text-align:center;
}
}

@media (max-width: 290px) {
.footer-menu a{
font-size:10px;
}
}

/* Home page*/

/* .header-image {
  background-image: url('../img/Home/Video_Screenshot_Header_Image.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
} */

.home {
  background-color: #000;
  width: 100%;
  padding: 50px 0px;
  margin: 0 auto;
}
.homepage {
  position: relative;
  width: 100%;
  height: 100vh; /* Ensure the header fills the entire viewport */
  overflow: hidden; /* Prevent scrollbars */
  padding-top: 142px; 
  box-sizing: border-box;
}

@media (max-width: 1329px) {
.homepage {
  height: auto;
}
}


.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: white;
}




.home h1 {
  color: #fff;
}



.home p {
  color: #fff;
}

.home-learn-more {
  padding-top: 40px;
}


.home-img-buttons{

  color: #fff;
  text-decoration: none;
  top: 50%;
  
  border: 2px solid #fff;
  padding: 10px 50px;
  cursor: pointer;
  transition: ease-out 0.6s;
  transform: translate3d(-50%, -50%, 0px);
  left: 50%;
  min-width: 300px;

}

 .home-img-buttons:hover {
  background-color: #fff;
  color:#000;
}

@media (max-width: 425px) {
  .home-img-buttons {
    padding: 10px 10px;
    min-width: 150px;
  }
}


@media (max-width: 344px) {
  .home-img-buttons {
   font-size:12px;
  }
}

@media (max-width: 298px) {
  .home-img-buttons {
   font-size:10px;
  }
}

.home-brands {
  background-color: #000;
  width: 100%;
  padding: 50px 0px;
  margin: 0 auto;
}

.brands-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
  margin-bottom:20px;
}

.brands-img:hover {
  transform: scale(1.05); /* Slight zoom */
  filter: brightness(1.1); /* Slightly brighter on hover */
}


.brands-logos {
  /*max-height: 100%; */
 /* max-width: 300px;*/
  height: auto;
  width: 100%;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.brands-logos:hover {
  transform: scale(1.05); /* Slight zoom */
  filter: brightness(1.1); /* Slightly brighter on hover */
}

.home-brands p {
  color: #fff;
}



.logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px; /* Adjust to match the tallest logo comfortably */
  margin-bottom: 20px;
}

/* About page*/



.about {
  background-color: #000;
  padding: 30px 0px;
  margin: 0 auto;
  z-index: 3;
  position: relative;
  padding-top: 142px; 
}

.about h1{
  margin-top:60px;
  margin-bottom:40px;
  color: #fff;
}

.about-logos{
  margin-bottom:20px;
  width:100%;
  max-width:231px;
}



.about-book-now {
  padding-top: 40px;
}



.about p {
  color: #fff;
}

.about-links {
  color: #fff;
  overflow: hidden;
}



.about-dot {
  display: block;
  width: 16px !important;
  height: 16px !important;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 auto;
  line-height: 0;
  font-size: 0;
}

.dot-row{
  margin-top:30px;
}


.restaurant-logos{
  margin-bottom:20px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.restaurant-logos:hover {
  transform: scale(1.05); /* Slight zoom */
  filter: brightness(1.1); /* Slightly brighter on hover */
}

/* Store Pages*/

.stores-header {
  
  background-size: cover;
  background-position: center;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  margin-top: 142px; 
  
}

.ctfm{
background-image: url('../img/Stores/CTFM_SA_Banner.jpg');
}

.ctfm-int{
background-image: url('../img/Stores/CTFM_RoA_Banner.jpg');
}

.kb{
background-image: url('../img/Stores/KB_Banner.jpg');
}

.hf{
background-image: url('../img/Stores/HF_Banner.jpg');
}
 .stores {
  background-color: #000;
  width: 100%;
  padding: 30px 0px;
  margin: 0 auto;
  text-align: center;
  z-index: 3;
  position: relative;
  
} 

.stores .img-buttons{

  font-weight:100 !important;
  padding:10px 10px;
  font-size:1rem;
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  width:100%;
  cursor: pointer;
}

@media (max-width: 369px) {

  .stores .img-buttons {
    font-size: 0.6rem;
  }


  
}


.stores-learn-more {
  margin-top: 40px;
 
}

.stores h1{
  padding-top:20px;
}

.stores .img-buttons:hover {
  background-color: #fff;
  color:#000;
}

.store-images{
  margin-bottom:20px;
}

/* Contact page*/




.contact {
  background-color: #000;
  width: 100%;
  padding: 30px 0px;
  margin: 0 auto;
  text-align: center;
  z-index: 3;
  position: relative;
  padding-top:142px;
}


.contact h1{
  margin-top:60px;
  margin-bottom:40px;
}

.contactForm{
  text-align:left;
}

.contactForm label{
  font-weight:300;
  padding-top:20px;
  padding-bottom:10px;
}


#SendResult{
  margin-top: 10px;
}


.form-check-input{
   margin-top:20px;
  margin-bottom:10px;
}

.form-check-label{
  padding-top:16px !important;
}

#submit_btn{
  margin-top:20px;
   font-weight:100 !important;
  padding:10px 10px;
  font-size:1rem;
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  width:100%;
  cursor: pointer;
  background-color: #000;
}

@media (max-width: 369px) {

  #submit_btn {
    font-size: 0.6rem;
  }
  #ContactForm{
    font-size:14px;
  }

  
}

#submit_btn:hover {
  background-color: #fff;
  color:#000;
}


.franchise-setup{
  padding:40px;
  border: 2px solid #fff;
  
}



.franchise {
  background-color: #000;
  padding: 30px 0px;
  margin: 0 auto;
  z-index: 3;
  position: relative;
  padding-top: 142px; 
}

.franchise h1{
  margin-top:40px;
  margin-bottom:40px;
  color: #fff;
}

.franchise p {
  color: #fff;
}

.franchise .dot-row{
  margin-top:60px;
}


ul, li{
  color: #fff;
  text-align: left;
}
li{
  padding: 10px 0;
}



.franchise .province-buttons{

  font-weight:100 !important;
  padding:10px 10px;
  font-size:1rem;
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  width:100%;
  cursor: pointer;
}


.franchise-learn-more {
  padding-top: 40px;
 
}


.franchise .province-buttons:hover {
  background-color: #fff;
  color:#000;
}

@media (min-width: 768px) and (max-width:991px) {
.franchise .province-buttons, .stores .img-buttons{
  font-size:14px;;
}
}



@media (max-width: 369px) {

  .franchise .province-buttons {
    font-size: 0.6rem;
  }
  
}

@media (max-width: 310px) {
.franchise{
  font-size:12px;;
}
.franchise h4{
  font-size:14px;;
}
}

.franchise-hidden{
  display:none;
 color: #fff;
 font-size:14px;
 padding-top:10px;
 font-weight:300;
}

.franchise-support{
  padding-top:40px;
  padding-bottom:40px;
}

.franchise-logos{
  padding-top:60px;
  padding-bottom:20px;
  width:100%;
  max-width: 360px;

}

.franchise-opp-logos{
   padding-top:60px;
  padding-bottom:20px;
  width:100%;
  max-width: 200px;
}

.happy-folks{
  padding-bottom:40px;
}
@media (max-width: 767px) {
.empty-col{
  display:none;
}
}

/* Cookie*/
#cookieNotice {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 95vw;
  background-color: #fff;
  color: #000;
  padding: 20px 30px;
  border-radius: 20px;
  box-shadow: 6px 6px 15px -3px black;
  z-index: 9999;

  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#cookieNotice.show {
  visibility: visible;
  opacity: 1;
}

#cookieNotice .content-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

@media (min-width: 992px) {
  #cookieNotice .content-wrap {
    flex-wrap: nowrap;
  }
}

#cookieNotice .msg-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (min-width: 992px) {
  #cookieNotice .msg-wrap {
    max-width: 60%;
    text-align: left;
  }
}

#cookieNotice .msg-wrap h4 {
  flex-basis: 100%;
  font-size: 16px;
  text-transform: uppercase;
}

#cookieNotice .msg-wrap p {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
}

#cookieNotice .msg-wrap a {
  color: white;
  text-decoration: underline;
}

#cookieNotice h4{
   color: #000;
}

.btn-wrap {
  margin-top: 20px;
}

@media (min-width: 992px) {
  .btn-wrap {
    margin-left: auto;
    margin-top: 0;
  }
}

.btn-wrap button {
  background-color: #000;
  border: none;
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
  border-radius: 10px;
  padding: 6px 20px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 991px) {
  .navbar-nav .nav-item {
    display: block;
    text-align: center;
    width: 100%;
  }

  .navbar-nav .nav-link {
    display: block;
    width: 100%;
    padding: 1rem 0;
    text-align: center;
  }

  .navbar-nav .dropdown-menu {
    position: static !important;
    width: 100% !important;
    margin: 0;
    border-left: none !important;
  }

  .navbar-nav .dropdown-menu .dropdown-item {
    text-align: center;
  }

}