/*

Tooplate 2137 Barista

https://www.tooplate.com/view/2137-barista-cafe

*/

/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --white-color:                  #ffffff;
  --primary-color:                #BC6C25;
  --secondary-color:              #DDA15E;
  --section-bg-color:             #b78752;
  --custom-btn-bg-color:          #BC6C25;
  --custom-btn-bg-hover-color:    #DDA15E;
  --dark-color:                   #000000;
  --p-color:                      #ffffff;
  --border-color:                 #7fffd4;
  --link-hover-color:             #E76F51;

  --body-font-family:             'Plus Jakarta Sans', sans-serif;

  --h1-font-size:                 68px;
  --h2-font-size:                 46px;
  --h3-font-size:                 32px;
  --h4-font-size:                 28px;
  --h5-font-size:                 24px;
  --h6-font-size:                 22px;
  --p-font-size:                  20px;
  --btn-font-size:                16px;
  --form-btn-font-size:           18px;
  --menu-font-size:               16px;

  --border-radius-large:          100px;
  --border-radius-medium:         20px;
  --border-radius-small:          10px;

  --font-weight-thin:             200;
  --font-weight-light:            300;
  --font-weight-normal:           400;
  --font-weight-bold:             700;
}

/* -----------------------------------------------------------
   GLOBAL RESET — FIX #1
   The old rule at the bottom of this file forced
   `box-sizing: content-box !important` on every element,
   which made padding/border add ON TOP OF any width you set.
   That's the #1 cause of horizontal overflow / broken layout
   on phones. border-box is the correct, standard reset.
------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--white-color);
  font-family: var(--body-font-family);
  overflow-x: hidden;
}

/* Safe defaults so images/video/iframes never overflow their
   container on any screen size, without touching elements
   that already set an explicit height (object-fit combos). */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Cross-browser form control reset. Safari (and some Firefox
   versions) apply their own native chrome to buttons/inputs —
   different font, padding, border-radius, background — which
   can override your custom styling unless explicitly reset. */
button,
input,
select,
textarea {
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

button {
  cursor: pointer;
}


/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/

h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

/* Fluid type: scales smoothly between breakpoints instead of
   jumping in steps, so text fits well on every screen width
   (phones, foldables, tablets, desktop, ultra-wide). */
h1 {
  font-size: clamp(32px, 5.5vw + 10px, var(--h1-font-size));
}

h2 {
  font-size: clamp(24px, 4vw + 8px, var(--h2-font-size));
}

h3 {
  font-size: clamp(22px, 3vw + 8px, var(--h3-font-size));
}

h4 {
  font-size: clamp(20px, 2.2vw + 8px, var(--h4-font-size));
  padding: 0 0 0 10px;
}

h5 {
  font-size: clamp(18px, 1.6vw + 8px, var(--h5-font-size));
}

h6 {
  font-size: clamp(16px, 1.2vw + 8px, var(--h6-font-size));
  color: chocolate !important;
}

p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

ul li {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

a, 
button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
}

b,
strong {
  font-weight: var(--font-weight-bold);
}


/*---------------------------------------
  SECTION               
-----------------------------------------*/
.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-bg {
  background-color: var(--section-bg-color);
}

.section-overlay {
  background-color: var(--dark-color);
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.65;
}

.section-overlay + .container {
  position: relative;
  z-index: 22;
}

.back-top-icon {
  font-size: var(--h2-font-size);
}


/*---------------------------------------
  TIMELINE               
-----------------------------------------*/
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 5px;
  background-color: var(--white-color);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.timeline-container {
  padding: 10px 40px;
  padding-top: 0;
  position: relative;
  background-color: inherit;
  width: 50%;
  transition: padding 0.3s ease;
}

.timeline-container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -12px;
  background-color: var(--white-color);
  border: 5px solid #7c5c52;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.timeline-container-left {
  left: 0;
}

.timeline-container-right {
  left: 50%;
}

.timeline-container-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 9px;
  width: 0;
  z-index: 1;
  right: 25px;
  border: medium solid white;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent white;
}

.timeline-container-right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 9px;
  width: 0;
  z-index: 1;
  left: 25px;
  border: medium solid white;
  border-width: 20px 20px 20px 0;
  border-color: transparent white transparent transparent;
}

.timeline-container-right::after {
  left: -13px;
}

.timeline-content {
  padding: 5px;
  background-color: var(--white-color);
  position: relative;
  border-radius: var(--border-radius-medium);
}

@media screen and (max-width: 991px) {
  .timeline::after {
    left: 31px;
  }

  .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .timeline-container::before {
    left: 58px;
    border: medium solid white;
    border-width: 20px 20px 20px 0;
    border-color: transparent white transparent transparent;
  }

  .timeline-container-left::after, .timeline-container-right::after {
    left: 6px;
  }

  .timeline-container-right {
    left: 0%;
  }
}


/*---------------------------------------
  CUSTOM BUTTON               
-----------------------------------------*/
.custom-btn {
  background: var(--custom-btn-bg-color);
  border: 2px solid transparent;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  transition: all 0.3s;
  padding: 12px 28px;
}

.custom-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  color: var(--white-color);
}

.custom-border-btn {
  background: transparent;
  border: 2px solid var(--white-color);
  color: var(--white-color);
}

.custom-border-btn:hover {
  background: var(--white-color);
  color: var(--secondary-color);
}

.custom-btn-bg-white {
  border-color: var(--white-color);
  color: var(--white-color);
}

.custom-btn-italic {
  font-style: italic;
}


/*---------------------------------------
  NAVIGATION BAR & OFFCANVAS              
-----------------------------------------*/
.sticky-wrapper {
  position: absolute !important;
  z-index: 999999;
  top: 0;
  right: 0;
  left: 0;
}

.sticky-wrapper.is-sticky .container {
  background: rgba(0, 0, 0, 0.88);
  border-radius: var(--border-radius-medium);
  padding: 15px 30px;
}

.navbar {
  background: transparent;
  z-index: 999999;
  padding-top: 20px;
  padding-bottom: 30px;
}

.navbar .container {
  /* FIX: was rgba(0,0,0,0.35) — see-through enough that whatever
     section scrolled underneath the fixed/sticky nav showed
     through it, producing the doubled/ghosted text you circled.
     A solid, near-opaque background stops that completely. */
  background: rgba(0, 0, 0, 0.88);
  border-radius: var(--border-radius-medium);
  padding: 15px 30px;
  transition: background 0.3s ease;
}

.navbar-brand,
.navbar-brand:hover {
  font-size: var(--h4-font-size);
  font-weight: var(--font-weight-bold);
  display: block;
  color: var(--white-color);
}

.navbar .navbar-brand-image {
  filter: brightness(0) invert(1);
}

.navbar-brand-image {
  width: 48px;
  height: auto;
  margin-right: 10px;
}

.navbar .custom-btn {
  padding: 10px 20px;
}

.navbar-expand-lg .navbar-nav .nav-link {
  border-radius: var(--border-radius-large);
  margin: 10px;
  padding: 10px;
}

.navbar-nav .nav-link {
  display: inline-block;
  color: var(--white-color);
  font-size: var(--menu-font-size);
  font-weight: var(--font-weight-bold);
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link:hover {
  color: var(--secondary-color);
}

.navbar .dropdown-menu {
  background: #291f02d1;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
  border: 0;
  display: block;
  opacity: 0;
  min-width: 9rem;
  margin-top: 20px;
  padding: 13px 0 10px 0;
  transition: all 0.3s;
  pointer-events: auto;
}

 .navbar .dropdown-menu::before {
  content: "";
  width: 0;
  height: 0;
  opacity: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 15px solid var(--white-color);
  position: absolute;
  top: -10px;
  left: 10px;
} 

.navbar .dropdown-item {
  display: inline-block;
  color: rgba(247, 244, 244, 0.945);
  font-size: var(--menu-font-size);
  font-weight: var(--font-weight-medium);
  position: relative;
}

.navbar .dropdown-item.active, 
.navbar .dropdown-item:active,
.navbar .dropdown-item:focus, 
.navbar .dropdown-item:hover {
  background: transparent;
  color: var(--link-hover-color);
}

.navbar .dropdown-toggle::after {
  content: "\f282";
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-size: var(--menu-font-size);
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  left: 2px;
  border: 0;
}

@media screen and (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
  }
  .col-lg-6{
    flex: min-content;
  }
  .navbar-nav .nav-link.active, 
  .navbar-nav .nav-link:hover {
    color: var(--secondary-color);
  }
}

/* Touch devices (tablets in landscape, laptops with touch, etc.)
   don't reliably support :hover, so make dropdowns openable on
   tap as well via the existing max-width block below (already
   forces opacity:1), which now also fires for any coarse-pointer
   device regardless of width. */
@media (hover: none) {
  .navbar .dropdown-menu {
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
  }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1100px;
    }
    .navbar-brand, .navbar-brand:hover {
    font-size: 20px;
}
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1300px;
    }
        .navbar-brand, .navbar-brand:hover {
    font-size: 20px;
}
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1520px;
    }
}
@media screen and (max-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
  }
  .navbar .dropdown-menu{
    background: #291f02d1;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    border: 0;
    display: block;
    opacity: 1;
    min-width: 9rem;
    margin-top: 20px;
    padding: 13px 0 10px 0;
    transition: all 0.3s;
    pointer-events: auto;
  }
  .navbar-nav .nav-link.active, 
  .navbar-nav .nav-link:hover {
    color: var(--secondary-color);
  }
  .navbar .container {
    background: rgba(0, 0, 0, 0.65);
  }
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 30px;
  height: 35px;
  outline: none;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
  background: var(--white-color);
  transition: background 10ms 300ms ease;
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: var(--white-color);
  width: 30px;
  height: 2px;
  content: '';
}

.navbar-toggler .navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 8px;
}


/*---------------------------------------
  HERO        
-----------------------------------------*/
.hero-section {
  background-color: var(--dark-color);
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 90vh, 620px);
  text-align: center;
}

/* FIX #2 — this decorative circle used to be redefined with
   fixed px values at 4 different, conflicting breakpoints
   spread across two files (480px/360px here, 412px/360px in
   the site-additions file), so its size depended on which
   stylesheet loaded last. clamp() makes it scale smoothly at
   every width with a single rule and no fighting overrides. */
.hero-section::after {
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 100%;
  content: "";
  position: absolute;
  top: 48%;
  left: 52.5%;
  transform: translate(-55%, -50%) rotate(45deg);
  width: clamp(220px, 60vw, 650px);
  height: clamp(220px, 55vw, 550px);
  pointer-events: none;
  transition: width 0.3s ease, height 0.3s ease;
}

@media screen and (min-width: 991px) {
  .hero-section {
    height: 100vh;
  }
}

.hero-section h1 {
  color: var(--white-color);
}

.small-text {
  color: var(--secondary-color);
}

.hero-section .custom-border-btn {
  border-color: transparent;
}

.hero-section .container {
  position: relative;
  z-index: 9;
}

.hero-slides {
  width: 100%;
  height: 100%;
  position: absolute !important;
}

.opening-hours-list {
  margin: 0;
  padding: 0;
}

.opening-hours-list li {
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(12px, 1vw + 10px, var(--btn-font-size));
  font-weight: var(--font-weight-normal);
  margin-bottom: 10px;
}

.opening-hours-list li .underline {
  background-color: rgba(255, 255, 255, 0.75);
  width: 35%;
  height: 1px;
  margin: auto 15px 0 15px;
}


/*---------------------------------------
  ABOUT              
-----------------------------------------*/
.about-section {
  background-color: var(--secondary-color);
  position: relative;
}

.about-section .ratio {
  border-radius: var(--border-radius-medium);
}

.custom-video {
  border-radius: var(--border-radius-medium);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-image-wrap {
  border-radius: var(--border-radius-medium);
  position: relative;
  overflow: hidden;
}

.about-video-info {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(188, 108, 37, 1));
  border-radius: var(--border-radius-medium);
  bottom: 0;
  height: auto;
  padding: 0px;
}

.about-video-info h4 {
  color: var(--white-color);
}

.about-section h6 {
  color: var(--secondary-color);
}

.team-block-wrap {
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-medium);
  position: relative;
  overflow: hidden;
  max-height: 450px;
  cursor: pointer;
}

.team-block-wrap:hover .team-block-image {
  transform: scale(1.2);
}
.team-block-image-wrap .team-block-image:hover {
  transform: scale(1.04);
}

.team-block-image-wrap {
  width: 100%;
}

.team-block-image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
  border-radius: 20px;
}

.team-block-info {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(188, 108, 37, 1));
  position: relative;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px;
}

.team-block-info .badge {
  margin: auto;
  top: 2px;
  bottom: 0;
}


/*---------------------------------------
  OUR MENU              
-----------------------------------------*/
/* FIX #3 — this rule was declared twice: once with
   background-image:url(...), then again lower in the file
   using the `background:` SHORTHAND, which silently wiped out
   the photo and left only the gradient. Combined into one
   rule that layers the gradient over the photo correctly. */
.menu-section {
  background-image: linear-gradient(179deg, #b4682599, #ffffff),
                     url('../images/happy-waitress-giving-coffee-customers-while-serving-them-coffee-shop.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.menu-block-wrap {
  background: rgba(0, 0, 0, 0.75);
  border-radius: var(--border-radius-medium);
  padding: 45px;
}

.menu-block .border-top {
  border-top-color: rgba(255, 255, 255, 0.35) !important;
}

.menu-block h6 {
  color: var(--white-color);
}

.menu-block small {
  color: rgba(255, 255, 255, 0.35);
}

.menu-block strong {
  color: var(--secondary-color);
}

.menu-block-image {
  border-radius: 100%;
  width: min(350px, 55vw);
  height: min(350px, 55vw);
  object-fit: cover;
  display: block;
  margin: auto;
  cursor: pointer;
}

.badge {
  background-color: var(--primary-color);
  font-size: 12px;
  position: relative;
  bottom: 4px;
  padding-bottom: 6px;
}

.badge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--primary-color);
}


/*---------------------------------------
  REVIEWS              
-----------------------------------------*/
.reviews-section {
  background-color: #7c5c52;
}

.reviews-block {
  background-color: var(--section-bg-color);
  border-radius: var(--border-radius-medium);
  position: relative;
  overflow: hidden;
}

.reviews-block .border-top {
  border-top-color: rgba(255, 255, 255, 0.35) !important;
}

.reviews-block-image-wrap {
  background-image: url('../images/mid-section-waitress-wiping-espresso-machine-with-napkin-cafa-c.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
}

.reviews-block-image {
  border-radius: var(--border-radius-large);
  width: 65px;
  height: 65px;
  object-fit: cover;
  margin-right: 10px;
}

.reviews-block-info {
  padding: 20px 30px;
}

.reviews-block-info p {
  font-size: var(--btn-font-size);
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
}

.reviews-group i {
  color: var(--white-color);
}


/*---------------------------------------
  BOOKING SECTION              
-----------------------------------------*/
.booking-section {
  background-image: url('../images/young-female-barista-wear-face-mask-serving-take-away-hot-coffee-paper-cup-consumer-cafe.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}

.booking-form-wrap {
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: var(--border-radius-medium);
  position: relative;
  overflow: hidden;
  margin-top: 100px;
}

.booking-form {
  padding: 55px 65px;
}

.booking-form-image-wrap {
  position: relative;
  height: 100%;
  min-height: 260px;
}

.booking-form-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booking-form-text span {
  color: var(--white-color);
  font-size: var(--btn-font-size);
}

.reservation-page .custom-border-btn {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.reservation-page .custom-border-btn:hover {
  border-color: transparent;
}


/*---------------------------------------
  CONTACT               
-----------------------------------------*/
.contact-section {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(188, 108, 37, 1)), url('../images/young-female-barista-wear-face-mask-serving-take-away-hot-coffee-paper-cup-consumer-cafe.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.google-map {
  border-radius: var(--border-radius-medium);
  filter: grayscale(100);
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.contact-block-wrap {
  background: var(--primary-color);
  border-radius: var(--border-radius-medium);
  padding: 0;
  min-height: 200px;
}

.contact-block {
  background: var(--secondary-color);
  border-radius: var(--border-radius-medium);
  transform: rotate(8deg);
  height: 100%;
  padding: 20px 40px;
}

.contact-block h6 {
  transform: rotate(-8deg);
}

.contact-block .custom-icon {
  background: var(--primary-color);
  border-radius: var(--border-radius-large);
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
}

.contact-block strong {
  display: block;
  color: var(--white-color);
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* FIX: contact cards (Address / Mail Us / Telephone) use flex
   layout, and flex children default to a minimum width equal to
   their content's natural width — so a long phone number or
   email address could refuse to shrink and stick out past the
   card's rounded background instead of wrapping onto a new line.
   This forces them to wrap and stay inside the box. */
.contact-card,
.contact-card > * {
    /*min-width: 0;*/
}

.contact-card p,
.contact-card a,
.contact-card h6 {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/*---------------------------------------
  CUSTOM FORM               
-----------------------------------------*/
.custom-form .form-control {
  color: var(--p-color);
  border-radius: var(--border-radius-small);
  margin-bottom: 30px;
  padding-top: 13px;
  padding-bottom: 13px;
  box-shadow: none;
  outline: none;
  transition: all 0.3s;
  width: 100%;
}

.custom-form .form-control:hover,
.custom-form .form-control:focus {
  background: var(--primary-color);
  border-color: transparent;
}

.custom-form .form-label {
  color: var(--white-color);
  font-style: italic;
  margin-bottom: 15px;
}

.custom-form button[type="submit"] {
  background: var(--custom-btn-bg-color);
  border: none;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--form-btn-font-size);
  font-weight: var(--font-weight-bold);
  transition: all 0.3s;
  margin-bottom: 0;
}

.custom-form button[type="submit"]:hover,
.custom-form button[type="submit"]:focus {
  background: var(--white-color);
  border-color: transparent;
  color: var(--primary-color);
}

.contact-form .form-control,
.booking-form .form-control {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

.booking-form .form-control {
  color: var(--white-color);
}

.custom-form input::-webkit-input-placeholder,
.custom-form textarea::-webkit-input-placeholder {
   color: var(--white-color);
}

.booking-form input:-moz-placeholder,
.booking-form textarea:-moz-placeholder {
  color: var(--white-color);
}


/*---------------------------------------
  SITE FOOTER              
-----------------------------------------*/
.site-footer {
  background-color: var(--primary-color);
  padding-top: 100px;
  padding-bottom: 100px;
}

.site-footer strong {
  color: var(--white-color);
}

.site-footer p,
.site-footer-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--btn-font-size);
}

.site-footer-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--btn-font-size);
  transition: all 0.3s;
}

.site-footer-link:hover {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}

.copyright-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--menu-font-size);
}

.copyright-text a {
	color: rgba(255, 200, 160, 0.75);
}


/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon {
  margin: 0;
  padding: 0;
}

.social-icon-item {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}

.social-icon-link {
  background: var(--primary-color);
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--menu-font-size);
  display: block;
  margin: 0 5px;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 35px;
  transition: background 0.2s, color 0.2s;
}

.social-icon-link:hover {
  background: var(--white-color);
  color: var(--primary-color);
}

.social-icon-link span {
  display: block;
}


/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (max-width: 1200px) {
  h1 { font-size: clamp(32px, 5vw + 8px, 62px); }
  
}

@media screen and (max-width: 991px) {
  /* Scale down the whole type scale on phones/tablets — the
     desktop sizes (h1 68px etc.) were still driving the fluid
     clamp() ceilings, so text read as "too big" even though it
     shrank a little. Lowering the variables themselves lowers
     every clamp() that references them. */
  :root {
    --h1-font-size: 42px;
    --h2-font-size: 30px;
    --h3-font-size: 24px;
    --h4-font-size: 20px;
    --h5-font-size: 18px;
    --h6-font-size: 16px;
    --p-font-size: 16px;
    --btn-font-size: 14px;
    --form-btn-font-size: 16px;
  }

  .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .hero-section {
    padding-top: 0;
    padding-bottom: 60px;
    min-height: clamp(420px, 78vh, 560px);
  }

  .navbar-brand,
  .navbar-brand:hover {
    font-size: var(--h5-font-size);
  }

  .navbar-expand-lg .navbar-nav {
    padding-bottom: 20px;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 0;
    margin-bottom: 0;
  }

  .navbar .custom-btn {
    margin-bottom: 10px;
  }

  .booking-form {
    padding: 45px;
  }

  .contact-section .container {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
    padding: 35px;
  }

  .site-footer {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media screen and (max-width: 767px) {
  .custom-btn {
    font-size: 14px;
    padding: 12px 20px;
  }

  .menu-block-wrap,
  .reviews-block-image-wrap,
  .reviews-block-info {
    padding: 20px;
  }

  .booking-form-wrap {
    margin-top: 40px;
  }
}


@media screen and (max-width: 578px) {
  .navbar .container,
  .sticky-wrapper.is-sticky .container {
    margin-right: 10px;
    margin-left: 10px;
  }
}


@media screen and (max-width: 480px) {
  :root {
    --h1-font-size: 32px;
    --h2-font-size: 24px;
    --h3-font-size: 20px;
    --h4-font-size: 18px;
    --h5-font-size: 16px;
    --h6-font-size: 15px;
    --p-font-size: 15px;
  }

  .section-padding {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .hero-section {
    /*min-height: clamp(360px, 72vh, 480px);*/
    min-height: 100dvh;
  }

  .menu-block-image {
    width: min(220px, 45vw);
    height: min(220px, 45vw);
  }

  .menu-block-wrap {
    padding: 28px;
  }

  .custom-btn {
    padding: 10px 18px;
  }

  .contact-block-wrap {
    min-height: 150px;
  }

  .contact-block {
    padding: 16px 24px;
  }

  .booking-form {
    padding: 35px;
  }

  .opening-hours-list li {
    font-size: 12px;
  }

  /* Stack the review avatar above the text on narrow screens
     instead of squeezing them side by side. */
  .reviews-block-image-wrap {
    flex-direction: column;
  }

  .reviews-block-image {
    margin-bottom: 15px;
    margin-right: 0;
  }

  .timeline-container {
    padding-left: 55px;
  }

  .timeline-container::before {
    left: 44px;
    border: medium solid white;
    border-width: 15px 15px 15px 0;
    border-color: transparent white transparent transparent;
  }

  .timeline-container-left::before,
  .timeline-container-right::before {
    top: 13px;
  }
}

/* FIX #4 — very small phones (older/compact Androids, iPhone SE,
   folded foldables) down to 320px. Previously the 360px block
   duplicated the 480px block almost verbatim but then flipped
   .reviews-block-image-wrap back to `row`, squashing the avatar
   and text together on the narrowest screens — the opposite of
   what you want. Removed that regression; only true small-screen
   tweaks remain, and a 320px floor is added below. */
@media screen and (max-width: 360px) {
  .booking-form {
    padding: 24px;
  }

  .menu-block-wrap {
    padding: 24px;
  }
}

@media screen and (max-width: 320px) {
  .navbar .container {
    padding: 10px 16px;
  }

  .custom-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
}

.menu-section {
  background-image: linear-gradient(179deg, #b4682599, #ffffff),
                     url('../images/happy-waitress-giving-coffee-customers-while-serving-them-coffee-shop.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.row {
  align-content: center;
  justify-content: space-around;
  /* FIX: Bootstrap's default .row uses negative side margins that
     only get cancelled out by matching padding on a wrapping
     .container. Wherever that padding wasn't present, the row
     (and the images inside it, like the Gallery grid you circled)
     bled past the right edge of the phone screen.Zeroing the
     margins and capping width removes that overflow everywhere,
     without needing the HTML/markup to change. */
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

.row > * {
  min-width: 0;
  max-width: 100%;
}

em.text-white {
  font-size: clamp(18px, 3vw + 8px, 30px);
}