/*=======================================
 	HellCrust PIZZA CSS
========================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, blockquote { list-style:none; margin:0; padding:0; border:0; font-size:100%; }

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; height:100%; margin:0; padding:0; }
*, *:before, *:after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit; }

body {background: url("../images/bg.png") #070707; color:#fff; font:normal 15px/1.5 "Josefin Sans", sans-serif; padding:80px 0 0; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; width:100%; }
body.menu-pg, body.home-pg { padding-top: 148px;}
body.overflow, body.no-scroll { overflow:hidden; }

a { border:none; color:#EB0029; font-weight:700; text-decoration:none; transition: all 250ms ease; }
a:hover { color:#ac0909; }

ul, li { display:inline-block; list-style-type:none; }
p { display:inline-block; height:auto; padding:0 0 15px 0; width:100%; }

.img-fluid { display: block; max-width:100%; width:100%; }
.no-padding { padding:0; }
.no-padding-left { padding-left:0; }
.no-padding-right { padding-right:0; }
.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.transition { transition:500ms cubic-bezier(1,0,0,1); }

button { background:none; border:none; font-family:'Josefin Sans',sans-serif; }
.btn { border-radius:3px; display:inline-block; font-size:14px; font-weight:700; height:auto; margin:0; position:relative; padding:9px 20px; text-align:center; text-decoration:none; text-transform:uppercase; width:auto; }
.btn-primary { background:#EB0029; color:#FFF; }
.btn-primary:hover { background:#CA0124; color:#FFF; }
.btn-secondary { background:#1C1D20; color:#FFF; }
.btn-secondary:hover { background: #CA0124; color: #fff}
button, button span { color:#fff; }

h1, h2, h3, h4, h5, h6 { font-weight:800; line-height:1em;}
h1 { color:#fff; font-size:28px; }
h2 { color:#fff; font-size:24px; }
h3 { color:#fff; font-size:22px; }
h4 { color:#fff; font-size:20px; }
h5 { color:#fff; font-size:18px; }
h6 { color:#fff; font-size:16px; }

h3 span { display:block; }

.btn, .paynow, .cancel { border-radius:3px; }
.rounded { border-radius:8px; } 
.bordered { border:1px solid #DDD; }

b, b font, b i { color:#fff; font-style:normal; }

.container { display:flex; flex-direction:column; height:100%; padding:0 15px; margin:0 auto; width:100%; max-width:640px; }

/*=======================================
 	HEADER
========================================*/
header { background: #181818;display:flex; height:80px; justify-content:center; position:fixed; top:0; left:0; width:100%; z-index:9; }
#header { align-items:center; display:flex; height:100%; width:100%; max-width:1400px; }

.nav-brand { display:flex; flex-grow:1; padding:0 20px;  }
#logo { display:flex; width:72px; }

#orderOnline span { display:none; }
#navShow { align-items:center; display:flex; justify-content:center; height:60px; width:60px; }

#nav-main { background: #161616; display:flex; flex-direction:column; height:100vh; overflow-y:auto; position:fixed; top:0; right:0; width:100%;  z-index:10; pointer-events: none;opacity: 0; }

.nav-header { align-items:center; display:flex; height:65px; padding:10px; width:100%; }
.nav-toggle-close { align-items:center; border-radius:50%; color:#FFF; cursor:pointer; display:flex; justify-content:center; margin-left:auto; height:40px; width:40px; }
.nav-body { display:flex; flex-direction:column; padding:0 50px; width:100%; }
.nav-footer { display:flex; flex-direction:column; padding:10px 50px 20px; }
button.nav-toggle-close span { color:#FFF; }

.nav-tray { color:#FFF; display:flex; flex-direction:column; width:100%; }
.nav-tray .nav-title { color:#FFF; font-size:16px; font-weight:300; opacity:0.65; position:relative; width:100%; text-transform:capitalize; z-index:1; }
.nav-tray > ul { display:flex; flex-direction:column; margin:0 0 20px 0; }
.nav-tray > ul > li { display:flex; margin:5px 0; }
.nav-tray > ul > li > a { letter-spacing: 1px; color:#FFF; border-bottom: 1px solid #393939; display:block; font-weight:500; padding:8px 0; text-transform: uppercase; width:100%; }
.nav-tray > ul > li > a:hover, .nav-tray > ul > li.active > a { opacity: .6;}

.nav-tray > ul.social-links, .footer-social > ul { flex-direction:row; justify-content:flex-start; padding:0; margin:10px 0; }
.nav-tray > ul.social-links > li, .footer-social > ul > li { padding:0 10px; }
.nav-tray > ul.social-links > li > a, .footer-social > ul > li > a { font-size:20px; font-weight:400; padding:5px; }
.nav-tray > ul.social-links > li > a:hover, .footer-social > ul > li > a:hover { background:none; }
.nav-tray > ul.social-links > li:first-child, .nav-tray > ul.social-links > li:first-child a { padding-left:0px; }


/* show nav */
.nav-show { overflow:hidden; }

#nav-main.visible { opacity: 1; transition: opacity 0.2s linear; pointer-events: auto; }



/*=======================================
 	CONTENT / MAIN
========================================*/
main { align-items:center; display:flex; flex-direction:column; margin: 30px 0; }

section { align-items:center; display:flex; flex-direction:column; justify-content:center; width:100%; }
.content { display:flex; flex-direction:column; width:100%; }



/*=======================================
 	FOOTER
========================================*/

#footer { background: #232223; position: relative; padding: 50px 0 0; text-align: center;}
#footer .logo { width: 150px; margin-bottom: 20px; }
#footer .container { align-items: center;}

.social { display: flex; justify-content: center; align-items: center; margin: 20px 0; }
.social a { color: #fff; width: 20px; display: flex; align-items: center; justify-content: center;  margin: 0 7px; }
.social a:hover { opacity: .7;}

.footer-list { margin-bottom: 20px;}
.footer-list ul { display: flex; flex-direction: column; justify-content: center;}
.footer-list ul li { margin: 0 10px 10px; }
.footer-list ul li a { color: #fff; font-weight: 500; text-transform: uppercase;}
.footer-list ul li a:hover { opacity: .6; }

.copyright { color: #fff; padding-bottom: 20px; }
.copyright a { align-items: center; margin-left: 5px;}
.copyright a img { position: relative; top: 2px;}

.copyright-links { margin-top: 10px;}
.copyright-links .privacy-link, .restaurant-link { display:  inline-block; margin: 0 5px 0 5p; color: #fff; text-decoration: underline; pointer-events: unset !important; font-weight: 400;}
.copyright-links .privacy-link:hover, .restaurant-link :hover { opacity: .6;}
.copyright-links .brygid-link { display: block; margin-bottom: 10px;}


/*=======================================
 	PAGES
========================================*/
.page, .page-header, .page-body { align-items:flex-start; display:flex; flex-direction:column; text-align:left; width:100%; }
.page-header { align-items: center; margin:0 0 30px; text-align: center; }
.page h1 { color: #fff; text-align: center; width: 100%; margin-bottom: 30px;}
.page-body { font-size:16px; }

/* page */
#page { color: #191919 }
#page .mobile-toggle { color: #FEF3C6; font-size: 18px; font-weight: 700;}
#page .page-side { border-radius: 10px; border: 1px solid #fef3c6; padding:15px 20px; background: #181818;  margin: 0 0 20px 0; position: fixed; z-index: 6; top: 100px; left: 20px; right: 20px}
#page .page-nav li a { border-bottom: 1px solid #313131; display: block; color: #fff; font-size: 16px; display: flex; align-items: center; padding: 10px 0;}
#page .page-nav li a:hover { color: #FEF3C6;}
#page .page-nav li { width: 100%}
#page .page-nav li a span { color: #EB0029; font-size: 24px; margin-right: 10px; }
#page .page-side .social span { color: #fff; display: block; padding: 10px 0; font-size: 18px; font-weight: 600; font-style: italic;}
#page .page-side .social ul li a { display: inline-block; margin-right: 15px; width: 20px;}
#page .page-side .social ul li a:hover { opacity: .6;}
#page .page-nav, .social {display: none; }
#page .page-nav{ border-top: 1px solid #313131; margin-top: 15px; width: 100%;}
#page .mobile-toggle { display: flex; display: flex; align-items: center; gap: 8px; cursor: pointer; }
#page .mobile-toggle a {color: #FEF3C6;}
#page .dropdown-icon { transition: transform 0.3s ease; font-size: 24px; margin-left: auto; }
#page .dropdown-icon.rotate { transform: rotate(180deg); }

#page .deals-list li  { position: relative; margin-bottom: 20px; border-radius: 10px; border: 1px solid #313131; overflow: hidden;}
#page .deals-list { display: flex; flex-direction: column;}
#page .deals-list .btn { padding: 9px 12px 6px; font-size: 13px; position: absolute; right: 8px; bottom: 8px; }

/* modal */
.app-modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto;background-color: rgba(0,0,0,0.6); }
.app-modal-content { background-color: #fff;  margin: 15% auto;padding: 30px 20px 20px;border-radius: 10px; width: 90%;max-width: 450px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); position: relative }
.app-modal .close-btn { position: absolute; color: #000; top: 10px; right: 15px;font-size: 24px; cursor: pointer; }
.app-modal .close-btn span { color: #000}
.app-modal .app-btns { display: flex; flex-direction: row;}
.app-modal .app-btns .btn { margin-top: 10px;}
.app-modal h2 { color: #191919; font-size: 23px; margin-bottom: 15px; margin-top: 20px;}

/* menu */
#page.menu .page-nav li a { padding: 8px 0; font-weight: 400;}
#page.menu h2 { margin: 60px 0px 20px}
#page.menu #hotDeals h2:first-child { margin: 20px 0}

.menu-item-list { display: flex; flex-direction: column; flex-flow: row wrap; flex-direction: row; margin: 0 -15px 0;}
.menu-item-list li { display: flex; flex-direction: column; position: relative; margin-bottom: 20px; border-radius: 10px; background: #fff; overflow: hidden; margin: 13px 10px; width: calc(50% - 20px); flex-basis: calc(50% - 20px);}
.menu-item-list li .item-info { display: flex; flex-direction: column; width: 100%; padding: 10px; text-align: center;}
.menu-item-list li .item-name { color: #191919; font-size: 16px; display: block; font-weight: 700; margin-bottom: 10px;}
.menu-item-list li .btn { margin-top: auto; margin: auto 10px 10px}
.menu-item-list li .btn span { display: none;}
#page.menu .page-nav li a.active, #page.menu .page-nav li a:hover { color: #EB0029; }

/* about */
#about { display:flex; flex-direction:column;}
#about h1 { margin-top: 20px; margin-bottom: 20px;}
.about-graphic { margin-top:20px; order: 1;}
.about-text p:last-child { padding-bottom:0; }
.about-graphic { overflow: hidden; position: relative; }
.about-graphic img { transition: transform 0.3s ease, opacity 0.8s ease; opacity: 0; transform: scale(1); display: block;
  width: 100%; height: auto; }
.about-graphic img.fade-in { opacity: 1; animation: floatSideways 1.5s ease-in-out infinite; }
.about-graphic:hover img { transform: scale(1.05) }

.page-header{ background: url("../images/franchise/header.jpg") #AD040B; background-size: cover; border-radius: 10px; text-align: left;}
.page-header-text, .page-header-img { width: 100%}
.page-header-text { padding: 30px 20px}
.page-header-text h1 { margin-bottom: 20px; font-size: 30px; text-align: left;}
.page-header-img { margin-top: -85px;}

.page-franchise { max-width: 1200px; margin: 0 auto}
.page-franchise .franchise-section { margin: 30px 0 0; width: 100%; }
.page-franchise h3 { background: #242424; border-radius: 5px; color:#fff; padding: 15px 20px; font-size: 20px; line-height: 1.2; margin-bottom: 30px; }

.page-franchise .franchise-why h2 { background: none; color: #fff; padding: 0; margin-bottom: 40px; font-size: 28px;}
.page-franchise .franchise-why ul li strong { font-size: 18px; color: #FFF9C4}
.page-franchise .franchise-body { padding:  0 20px;}

/* coupons */
#coupons ul { display: flex; flex-direction: column; justify-content: center; }
#coupons ul li { margin: 13px 15px; }
#coupons ul li a { display: block; background: #fff; border-radius: 10px; overflow: hidden; padding: 5px;}

/* contact */
.contact .page-body p { text-align: center; font-size: 1.2em;}
.contact .page-body ul { display: flex; justify-content: center;}
.contact .page-body ul li { margin: 0 10px; width: 25px;}
.contact .page-body .contact-map { border-radius: 10px; overflow: hidden; margin-top: 50px;}
.contact .page-header { max-width: 900px; margin: 60px auto 0; overflow: hidden;}
.contact .page-header-text p { text-align: left;}
.contact .page-header h1 { font-size: 25px; text-align: center;}
.contact .page-header-img { margin-left: auto; width: auto; display: none;}
.contact .page-header-text { padding: 30px; text-align: center;}

/* privacy Policy */
#privacy-policy { max-width: 950px; margin: 0 auto;}
#privacy-policy h3 { margin-bottom: 15px; margin-top: 15px;}
#privacy-policy ul li { display: block; margin-bottom: 10px;}
#privacy-policy ul { list-style-type: disc; padding-left: 10px; margin-bottom: 30px; display: block;}
#privacy-policy li { display: list-item !important; list-style-type: disc !important; }

/* Coupon*/
.coupon-guide { width: 100%; margin: 0 auto; padding: 1rem; }
.coupon-guide h2 { text-align: center; font-size: 2rem; color: #FFF9C4; text-shadow: 1px 1px 2px rgba(0,0,0,0.25); margin-bottom: 2.5rem; }
.steps-container { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; align-items: stretch;  flex-direction: column; }
.step-text { align-items: center; background: #fff3b0; color: #6a4602; display: flex; padding: 1rem; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.1);
line-height: 1.5; position: relative; font-size: 1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; flex: 1; }
.step-number { display: inline-block; background: #644601; color: #fff; font-weight: bold; font-size: 1.1rem; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; margin-right: 0.4rem; flex-shrink: 0; }
.step-text:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.step-des { margin-left: 5px}
.coupon-code { font-weight: bold; color: #eb0029; }
.step { flex: 1 1 45%; }
.coupon-guide h2 { font-size: 1.8rem; margin-bottom: 2rem; }


/* Extra Small */
@media (min-width:480px){
  
  /* promos */
  .promo-group-two { flex-direction:row; margin:0 -10px; width:auto; }  
  .promo-secondary { margin:0 10px; }

  .banner  { margin-top:20px; }

}

/* Small */
@media (min-width:768px){
  
  /* coupons */
  #coupons ul { display: flex; flex-flow: row wrap;}
  #coupons ul li { width: calc(50% - 30px);flex: 0 1 50%; flex-basis: 50%; flex-basis: calc(50% - 30px); margin: 13px 15px;}

}

/* Medium */
@media (min-width:992px){
  body, body.menu-pg, body.home-pg { padding-top:100px; }

	h1 { font-size:60px; }
	h2 { font-size:36px; }

  /* content */
  main { padding:60px 0; }
  .container { max-width:1400px; }

  /* header */
  header, #header { height:100px; }
  .nav-brand { flex-grow:0; order:0; }
  #logo { width:90px; }
  #orderOnline { margin:0 20px; order:3; }
  #orderOnline span { display:inline; }


  #nav-main { align-items:center; background:none; flex-direction:row; margin-left:auto; height:100%; position:relative; top:auto; right:auto; width:auto; transform:translateX(0%); max-width:none; order:2; opacity: 1;  pointer-events: auto;}

  .nav-body { flex-direction:row; overflow-y:auto; padding:0; width:auto; }
  .nav-footer { flex-direction:row; margin:0; padding:0; }

  .nav-tray { flex-direction:row; width:auto; }
  .nav-tray .nav-title { display:none; }
  .nav-tray > ul { flex-direction:row; margin:0; }
  .nav-tray > ul > li { margin:5px 7px; }
  .nav-tray > ul > li > a { border: none; }
  .nav-tray > ul > li > a.nav-active { border-bottom: 2px solid #FFF9C4; }

  #navShow, .nav-header, .nav-footer, .nav-tray > ul > li.nav-hidden { display:none; }

  .nav-show #nav-main { background:none; transform:none; width:auto; }

  /* footer */
  #copyright { flex-direction:row; margin:0 auto; max-width:1400px; }
  #copyright > span { margin: 0 5px}

  /* page */
  #page .container { flex-direction: row;}
  #page .page-sid-content {  width: 20%; min-width: 280px;}
  #page .page-deals { width: 76%; margin-left: auto;}
  #page .mobile-toggle { font-size: 24px; margin-top: 10px; margin-bottom: 10px;}
  #page .page-side-content{ width: 20%; min-width: 280px; margin-right: 30px;}
  #page .page-side { border-radius: 10px; border: none; background: #181818; padding: 30px; width: 20%; min-width: 280px; margin: 0 0 30px; position: sticky; top: 139px; }
  #page .page-nav li a {  font-size: 17px; padding: 15px 0; }
  #page .page-nav li a span {  font-size: 30px;  }
  #page .page-side .social span { font-size: 18px; margin-top: 10px; }
  #page .page-side .social ul li a {width: 20px;}
  #page .page-side .social ul li a:hover { opacity: .6;}

  #page .deals-list { flex-flow: row wrap;  flex-direction: row; margin: 0 -15px 0; } 
  #page .deals-list li { margin: 13px 14px; width: calc(50% - 30px); flex-basis: calc(50% - 30px); }
  #page .deals-list .btn {  right: 15px; bottom: 15px;}

  #page .page-nav, .social { display: block;}
  #page .dropdown-icon { display: none;}

	/* menu */
  #page.menu .page-nav li a { padding: 8px 0}
  
  .menu-item-list li .item-name { font-size: 20px;}
  .menu-item-list li .btn span { display: inline;}

  .menu-item-list li .item-info {  padding: 20px;}
  .menu-item-list li .btn { margin-top: auto; margin: auto 20px 20px}

	/* about */
	#about { flex-direction:row; padding:60px 50px; align-items: center; justify-content: center; }
	.about-graphic { min-width:380px; margin-top:0;  }
	.about-text { align-items:flex-start; padding-left:50px; order: 2;}
	.about-text p { line-height:2; font-size: 18px; }

  /* franchise */
  .page-header { flex-direction: row; margin-bottom: 0; text-align: left;}
  .page-header h1 { text-align: left; font-size: 38px;}
  .page-header-text { padding: 50px;}
  .page-header-text, .page-header-img { width: 100%;}
  .page-header-img { margin-top: 0;}
  .page-header .btn { font-size: 16px;}

  .franchise-section { margin: 80px 0 0 }
  .page-franchise h2 { font-size: 40px;}
  .page-franchise h3 { font-size: 25px;}
  .page-franchise .franchise-why h2 { font-size: 40px; margin-bottom: 50px;}
  .page-franchise .franchise-why ul { display: flex; flex-flow: row wrap; margin: 10px -15px 0;}
  .page-franchise .franchise-why ul li { width: calc(33.333% - 30px); margin: 13px 15px; flex: 0 1 33.3333%; flex-basis: 33.3333%; flex-basis: calc(33.3333% - 30px); display: flex; flex-flow: column nowrap;}
  .page-franchise .franchise-why p { font-size: 17px !important;}
  .page-franchise .franchise-section { margin: 80px 0 0}
  .page-franchise .franchise-section p { font-size: 19px;}

  .page-franchise .franchise-structure ul { display: flex; }
  .page-franchise .franchise-structure ul li strong { font-size: 20px; border-radius: 120px; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; background: #FFF9C4; color: #000; min-width: 120px; margin-right: 20px;}
  .page-franchise .franchise-structure ul li { display: flex; align-items: center; justify-content: center; margin-right: 50px;}

  .contact .page-header-img { display: block;}
  .contact .page-header h1 { font-size: 35px; text-align: left;}
  .contact .page-header-text { text-align: left;}

  /* privacy Policy */
  #privacy-policy { margin: 50px auto;}

  /* Footer */
	.footer-list ul { flex-direction: row;}
	.footer-list ul li { margin: 0 10px; }
	.copyright-links .brygid-link { display: inline-block; margin-bottom: 0;}

  /*Modal*/
  .app-modal .app-btns { flex-direction: row;}

  /*Coupons*/
  .step { flex: 1 1 30%; min-width: 250px; display: flex;  }
  .steps-container { flex-direction: row; gap: 1.5rem; }
 
}

/* Large */
@media (min-width:1200px){

  .page-header h1 { font-size: 50px;}

  .menu-item-list li { margin: 13px 15px; width: calc(33.3333% - 30px); flex-basis: calc(33.3333% - 30px);} 
  #coupons ul li { width: calc(33.3333% - 30px);flex: 0 1 50%; flex-basis: 33.3333%; flex-basis: calc(33.3333% - 30px); margin: 13px 15px;}

}

@media (min-width:1400px){

  .page-header h1 {font-size: 53px; max-width: 550px;}
   .nav-tray > ul > li > a { border: none; margin: 0 5px; }
}

@keyframes floatSideways {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-10px); }
  50%  { transform: translateX(10px); }
  75%  { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}