/*
Web69
*/

/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --white-color:                  #ffffff;	/* White colour #ffffff */
  --primary-color:                #ff5500;	/* Logo colour #ff5500 */
  --secondary-color:              #f1c522;  	/* Section heading colour #f1c522  */
  --section-bg-color:             #eef7fb;	/* >>  Section background colour #f9f9f9 */
  --table-head-bg-color:	  #fff6e5;	/* Table heading row backgroud colour #fff6e5 */
  --table-row-underline:	  #ddd; 	/* Grey underline #ddd  */
  --custom-btn-bg-color:          #f70f0f;	/* Button background colour on 1st section. #cb7575 */
  --dark-color:                   #000000;	/* Black colour #000000 */
  --p-color:                      #717275;	/* Grey font colout #717275 */
  --border-color:                 #e9eaeb;	/* Border - light grey colour under each section #e9eaeb */
  --icon-color:		          #28856b;	/* Green icon color #28856b */
  --icon-color2:		  #eb341c;	/* Red icon colour #eb341c  */

  --body-font-family:             'Source Sans Pro', sans-serif;
  --title-font-family:            'Amatic SC', cursive;

  --h1-font-size:                 72px;
  --h2-font-size:                 48px;
  --h3-font-size:                 36px;
  --h4-font-size:                 32px;
  --h5-font-size:                 24px;
  --h6-font-size:                 22px;
  --h7-font-size:                 15px;  
  --p-font-size:                  16px;  /* Template was originally 20px  */
  --menu-font-size:               14px;
  --copyright-font-size:          16px;

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

  --font-weight-light:            300;
  --font-weight-normal:           400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
}

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


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

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

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

h1 {
  font-size: var(--h1-font-size);
}

h2 {
  font-size: var(--h2-font-size);
  color: var(--secondary-color);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  font-size: var(--h5-font-size);
  line-height: normal;
}

h6 {
  font-size: var(--h6-font-size);
}

h7 {
  font-size: var(--h7-font-size);
}

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 {
  color: var(--p-color);
  text-decoration: none;
}

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

::selection {
  background: var(--secondary-color);
  color: var(--white-color);
}

::-moz-selection {
  background: var(--secondary-color);
  color: var(--white-color);
}

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

.custom-icon {
  color: var(--icon-color);
}

.custom-icon2 {
  color: var(--icon-color2);
}

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

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

.section-block {
  padding: 20px;
}

.section-divider {
  background: var(--border-color);
  width: 1px;
  height: 50%;
  margin: auto;
}




/*---------------------------------------
  SECTION TITLE               
-----------------------------------------*/
.section-title-wrap {
  display: block;
  margin: auto;
  position: relative;
  text-align: center;
}

.section-title-line {
  background: var(--border-color);
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 2px;
  margin: 0 auto;
}

.section-title-icon {
  color: var(--primary-color);
  font-size: var(--h5-font-size);
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-left: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
}


/*---------------------------------------
  PRE LOADER - Pulsing red heart              
-----------------------------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background: none repeat scroll 0 0 var(--white-color);
}

.spinner {
  animation: pulse 1s infinite ease-in-out alternate;
}

.spinner svg {
  fill: var(--primary-color);
  font-size: var(--h4-font-size);
}

@keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}


/*---------------------------------------
  IMAGE HOVER               
-----------------------------------------*/
.image-hover-thumb {
  border-radius: var(--border-radius-medium);
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.image-hover-thumb .img-fluid {
  border-radius: var(--border-radius-medium);
  display: block;
  transition: transform 0.25s ease-in-out, border-radius 0.25s;
}

.image-hover-thumb:hover .img-fluid {
  transform: scale(1.05);
  border-radius: var(--border-radius-medium);
}




/*---------------------------------------
  CUSTOM BUTTON ON HOME SECTION               
-----------------------------------------*/
.custom-btn {
  background: var(--custom-btn-bg-color);
  border: 0;
  color: var(--white-color);
  font-family: var(--title-font-family);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  padding: 12px 24px;
  transition: background 0.5s, color 0.5s;  /* <--Smoother transition */
}

.custom-btn::after {
  content: "";
  background: var(--icon-color);
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
  position: absolute;
  top: 0;
  right: -10px;
  width: 30px;
  height: 20px;
  transform: translateY(-100%);
  transition: all 0.5s;
}

.custom-btn:hover::after {
  transform: translate(0);
}

.custom-btn:hover {
  background: var(--secondary-color);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
  color: var(--white-color);
}


/*---------------------------------------
  NAVIGATION              
-----------------------------------------*/
/*--  dead code
.sticky-wrapper {
  min-height: 98px;
}
--*/


.navbar {
  position: absolute;
  z-index: 9;
  right: 0;
  left: 0;
  padding-top: 5px;		/* Menu bar top padding */
  padding-bottom: 5px;		/* Menu bar bottom padding */
}

.is-sticky .navbar {
  background: var(--white-color);
}

.navbar-brand {
  font-family: var(--title-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--font-weight-bold);
}

.navbar-brand,
.navbar-brand:hover {
  color: var(--primary-color);
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
  margin-right: 20px;
  margin-left: 20px;
}

.navbar-nav .nav-link {
  display: inline-block;
  color: var(--p-color);
  font-size: var(--menu-font-size);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  padding-top: 15px;
  padding-bottom: 15px;
}

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

.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, -webkit-transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-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(--dark-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, -webkit-transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: var(--dark-color);
  width: 30px;
  height: 2px;
  content: '';
}

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

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



/*---------------------------------------*/
/*   Web69 - Navbar Brand Styling        */
/*---------------------------------------*/
.navbar-brand {
  display: flex;
  flex-direction: column;  /* Stack vertically on desktop */
  align-items: center;
  text-align: center;
  font-size: var(--h4-font-size);
  font-family: var(--title-font-family);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.brand-line {
  display: inline-flex;             	/* Gigi, heart, Yummy in a row */
  align-items: center;
  gap: 4px;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.phone-number {
  font-size: var(--h4-font-size);
  margin-top: 4px;
  font-family: var(--title-font-family);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}


/*---------------------------------------*/
/*   Web69 - Navbar Responsive (Mobile)  */
/*---------------------------------------*/
@media (max-width: 991.98px) {
  .navbar-brand {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex-direction: row;         /* Put Gigi/Heart/Yummy and phone on same line */
    white-space: nowrap;
    text-align: left;
  }

  .brand-line {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .phone-number {
    margin-left: 8px;
    margin-top: 0;              /* Remove vertical margin for row layout */
  }
}
/*   Web69 - End Navbar Brand Styling        */



/*---------------------------------------
  END NAVIGATION              
-----------------------------------------*/




/*---------------------------------------
  HOME PANEL              
-----------------------------------------*/
.hero-section {
  margin-top: -40px; /* or adjust to height of your navbar -60px */
  padding-top: 0 !important;
  position: relative;
  z-index: 0;
}

.hero-container {
  background-color: #d0ecff; /* Colour behind girl on home panel */
  background-image: url('../images/bannerpic.png'); /* bannerpic */
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--border-radius-small);
  position: relative; /* needed for absolute overlay */
  overflow: hidden;
  padding: 50px;
  height: auto !important;
}

/* Responsive adjustments for hero-container padding and height */
@media screen and (max-width: 991px) {
  .hero-container {
    padding: 40px;
    min-height: 650px;
  }
}

@media screen and (max-width: 575px) {
  .hero-container {
    margin-right: 12px;
    margin-left: 12px;
    padding: 30px;
  }
}

/* Overlay message inside hero-container */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0.8));
  display: none; /* Start hidden */
  justify-content: center;
  align-items: center;
  z-index: 10;
  pointer-events: none;
  border-radius: var(--border-radius-small);
  text-align: center;
  padding: 0 20px;
  flex-direction: column;
  font-weight: bold;
  font-size: 1.4rem;
  color: var(--p-color);
  user-select: none;
}



/* Show overlay when .holiday or .unavailable classes added */
.hero-container.holiday .hero-overlay,
.hero-container.unavailable .hero-overlay {
  display: flex;
}

/* Responsive font size for overlay message */
.overlay-message {
  background: transparent;
  padding: 0;
  margin: 0;
  pointer-events: none;
  font-size: 1.4rem;
  color: var(--p-color);
  text-shadow: 1px 1px 2px #fff;

  position: absolute;
  top: 50%;      /* example vertical position */
  left: 65%;     /* example horizontal position */
  transform: translate(-50%, -50%); /* center the message exactly at that point */
}

/* Smaller font on narrow screens */
@media screen and (max-width: 991px) {
  .overlay-message {
    top: 60%;
    left: 70%;
    font-size: 1.4rem;
    transform: translate(-50%, -50%);
  }
}

/* Smaller font on narrow screens */
@media screen and (max-width: 767px) {
  .overlay-message {
    top: 70%;
    left: 68%;
    font-size: 1.3rem;
    transform: translate(-50%, -50%);
  }
}

/* Smaller font on narrow screens */
@media screen and (max-width: 575px) {
  .overlay-message {
    top: 70%;
    left: 68%;
    font-size: 1.1rem;
    transform: translate(-50%, -50%);
  }
}

/* Smaller font on narrow screens */
@media screen and (max-width: 502px) {
  .overlay-message {
    top: 75%;
    left: 68%;
    font-size: 1.1rem;
    transform: translate(-50%, -50%);
  }
}


.hero-container h1 {
  color: var(--custom-btn-bg-color);
  margin-top: 0 !important;
}

.hero-container h2 {
  color: var(--custom-btn-bg-color);
}





/*---------------------------------------
  HOME SECTION   - Location box.           
-----------------------------------------*/
/* The white box that wraps title and body */
.save-the-location-thumb {
  background: var(--white-color);
  border-radius: var(--border-radius-small);
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-align: left;
}

/* Title bar with orb effect and hover */
.save-the-location-title {
  position: relative;
  background: var(--primary-color);       /* original orange background */
  color: var(--white-color);
  margin-bottom: 0;
  padding: 10px 20px;
  transition: background 0.5s;
text-align: center;  
}

/* The green orb on the top right */
.save-the-location-title::after {
  content: "";
  background: var(--icon-color);           /* green orb */
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
  position: absolute;
  top: 0;
  right: -10px;
  width: 30px;
  height: 20px;
  transform: translateY(-100%);
  transition: all 0.5s;
}

/* On hover, background changes to yellow and orb slides down */
.save-the-location-title:hover {
  background: var(--secondary-color);     /* yellow background */
}

.save-the-location-title:hover::after {
  transform: translate(0);
}

/* Body text */
.save-the-location-body {
  font-size: 15px;
  color: grey;
  text-align: center;
  padding: 15px 20px;
}









/*---------------------------------------
  GOOGLE MAP DISPLAY Rounds corner on location map          
-----------------------------------------*/
.google-map {
  border-radius: var(--border-radius-small); /* e.g. 6px */
  display: block;
  line-height: normal;
  overflow: hidden;  /* critical for clipping corners */
}

/*------ forces the map to go full width on stack -------*/
.google-map iframe {
  min-width: 100%;
}



/*-- Style the leaflet map  --*/
#map-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--p-color);				/* White colour #007BFF */
  z-index: 1000;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/*---------------------------------------
  END GOOGLE MAP DISPLAY Rounds corner on location map          
-----------------------------------------*/




/*---------------------------------------
  ABOUT ME SECTION           
-----------------------------------------*/
.about-info-wrap {
  height: 100%;
  padding: 20px;
}

.about-tag {
  font-weight: var(--font-weight-light);
  text-transform: uppercase;
}

.nav-tabs {
  border-bottom: 0;
  margin-top: 20px;
}

.nav-tabs .nav-link {
  color: var(--p-color);
  display: block;
  text-align: left;
}

.nav-tabs .nav-link {
  border-radius: 0;
  border: 0;
  border-right: 2px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.nav-tabs .nav-link:last-child {
  border-bottom: 0;
}

.nav-tabs .nav-link::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 19px;
  height: 19px;
  background: transparent;
  text-indent: -9999px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  transition: all 250ms ease-in-out;
  text-decoration: none;
  color: transparent;
  top: 50%;
  right: -11px;
  transform: translate(0, -50%) rotate(135deg) ;
}

.nav-tabs .nav-link.active::after {
  background: var(--white-color);
  border-top-color: var(--secondary-color);
  border-left-color: var(--secondary-color);
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus {
  border-color: var(--border-color);
  border-right-color: var(--secondary-color);
}

.nav-tabs .nav-link.active h3,
.nav-tabs .nav-link:focus h3, 
.nav-tabs .nav-link:hover h3 {
  color: var(--primary-color);
}


/*---------------------------------------
  GALLERY SECTION          
-----------------------------------------*/
.gallery-thumb,
.people-thumb {
/*  margin-bottom: 24px; */
}

.gallery-thumb-small {
  height: 100%;
}

.gallery-thumb-small .gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*---------------------------------------
  RSVP              

.rsvp-section {
  background-image: url('../images/closeup-shot-newlywed-couple-sitting-bench.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
-----------------------------------------*/

.rsvp-form-wrap {
  background: var(--white-color);
  border-radius: var(--border-radius-medium);
  padding: 50px 25px;
}


/*---------------------------------------
  CUSTOM FORM NOT USED              
-----------------------------------------*/
.custom-form .form-control {
  background: var(--white-color);
  box-shadow: none;
  border: 2px solid var(--border-color);
  color: var(--p-color);
  font-weight: var(--font-weight-light);

  margin-bottom: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  outline: none;
  transition: all 0.5s;
}

.input::placeholder,
.form-select {
  border: 2px solid var(--border-color);
  color: var(--p-color);
  font-weight: var(--font-weight-light);

  margin-bottom: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}

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

.custom-form button[type="submit"] {
  background: var(--primary-color);
  border: none;
  color: var(--white-color);
  font-size: var(--p-font-size);
  font-family: var(--title-font-family);
  font-weight: var(--font-weight-bold);
  transition: all 0.3s;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

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

.custom-form button[type="submit"]::after {
  content: "";
  background: var(--icon-color);
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
  position: absolute;
  top: 0;
  right: -10px;
  width: 30px;
  height: 20px;
  transform: translateY(-100%);
  transition: all 0.5s;
}

.custom-form button[type="submit"]:hover::after {
  transform: translate(0);
}


/*---------------------------------------
  SITE FOOTER              
-----------------------------------------*/
.site-footer {
  background-image: url('../images/floor.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  /* Default: feet on left, anchor image at top to keep head visible */
  background-position: left top;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  text-align: center;
  position: relative;
  transition: background-position 0.3s ease; /* smooth transition */
}

/* Puts an orange ting over the footer image. Primary colour #ff5500 */
.site-footer::after {
  content: "";
  background: var(--primary-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  pointer-events: none;
}

.site-footer .navbar-brand {
  color: var(--white-color);
  position: relative;
  z-index: 2;
}

.copyright-text {
  font-size: var(--copyright-font-size);
}

/*------ Responsive background repositioning  ------*/
@media (max-width: 991.98px) {
  .site-footer {
    /* On smaller screens, shift background to right and fix top */
    /* was using 'right top' that fixed image to top and right.  Now targetting the right position.  Google see different options */
    background-position: 75% top;  /* If person head on left use 'left top'. Head on right use 'right top' */
  }
}

/*---------------------------------------
  END SITE FOOTER              
-----------------------------------------*/






/*---------------------------------------
  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(--secondary-color);
  border-radius: var(--border-radius-large);
  font-size: var(--menu-font-size);
  color: var(--dark-color);
  display: inline-block;
  vertical-align: top;
  margin: 4px;
  width: 30px;
  line-height: 30px;
  line-height: 30px;
  text-align: center;
}

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


/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (max-width: 1200px) {
  .hero-container {
    background-size: contain;
    background-position: bottom;
  }
}

@media only screen and (min-width: 580px) and (max-width: 1170px) {
  .hero-container {
    height: inherit;
  }
}

@media screen and (min-width: 992px) {
  .the-wedding-section .image-hover-thumb,
  .the-wedding-section .google-map {
    height: 55%;
  }

  .the-wedding-section .section-block {
    height: 45%;
  }

  .save-the-location-thumb {
    text-align: right;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 42px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }
  
  h7 {
    font-size: 15px;
  }

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

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

  .navbar {
    background: var(--white-color);
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    margin-right: 0;
    margin-left: 0;
  }

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

  .hero-container {
    padding: 40px;
    min-height: 650px;
  }

  .about-info-wrap {
    padding: 10px 20px 40px 20px;
  }

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

@media screen and (max-width: 767px) {
  .section-divider {
    width: 100%;
    height: 1px;
  }

  .nav-tabs {
    margin-top: 0;
    margin-bottom: 50px;
  }

  .nav-tabs .nav-link {
    border-bottom: 2px solid var(--border-color);
    width: 50%;
    text-align: center;
  }

  .nav-tabs .nav-link:last-child {
    border-bottom: 2px solid var(--border-color);
  }

  .nav-tabs .nav-link:last-child {
    border-right: 0;
  }

  .nav-tabs .nav-link::after {
    top: inherit;
    right: 0;
    left: 50%;
    transform: translate(-50%, 0) rotate(225deg) ;
    bottom: -11px;
  }

  .nav-tabs .nav-item.show .nav-link, 
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-link:focus {
    border-color: var(--border-color);
    border-right-color: var(--border-color);
    border-bottom-color: var(--secondary-color);
  }

  .people-thumb {
    margin-bottom: 0;
  }

  .people-section .section-block {
    padding-top: 10px;
  }
}

@media screen and (max-width: 575px) {
  .hero-container {
    margin-right: 12px;
    margin-left: 12px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 26px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 20px;
  }

  .hero-container {
    padding: 30px;
  }
}



/*   ////////web69\\\\\\\\\   */
/* Improve spacing and layout for the services table */
#my-services-table {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border-collapse: separate;
  
  table-layout: fixed;
  padding: 10px;                              	/* Spacing inside */
  border: 2px solid var(--secondary-color);	/* Use the same orange border */
  border-radius: 6px;				/* Rounded corners */
  box-sizing: border-box;			/* Ensure padding doesn't add extra width */
  overflow: hidden; 				/* Needed to clip the table inside */
}


#my-services-table td {
  width: 50%;
  padding: 4px 4px;                       /* Cell padding */
  border-bottom: 1px solid var(--table-row-underline);  /* Table row underline */
  vertical-align: middle;
  font-size: 16px;
  color: var(--p-color);                  /* Use your body text color */
  
  margin: 0;
  align-items: center;
  gap: 20px;
}




@media (max-width: 1000px) {		/* 14px Small font size as screen wide shrinks below 1000px */
  #my-services-table td {
    font-size: 14px !important;
  }
}

@media (max-width: 767.98px) {		/* 15px font size as screen stacks at 767px */
  #my-services-table td {
    font-size: 14px !important;
  }
}



/* End Improve spacing and layout for the services table */








/* ////////web69\\\\\\\\ */
/* services offered */
.service-warning {
  text-align: center;
  font-weight: 900;
  color: var(--icon-color2); /* red tone from your palette */
  font-size: 22px;
  margin-bottom: 1rem;
  line-height: 1.4;
}
/* End services offered */




/*   ////////web69\\\\\\\\\   */
/* MY Rates - Dynamic table layout */
#dynamic-rates-table {
  padding: 10px;                              	/* Spacing inside */
  border: 2px solid var(--secondary-color);  	/* Use the same orange border */
  border-radius: 6px;                         	/* Rounded corners */
  box-sizing: border-box;                     	/* Ensure padding doesn't add extra width */

/*  overflow-x: auto;        			/* Enable horizontal scroll */
/*  -webkit-overflow-scrolling: touch; 		/* Smooth scroll on iOS */
}


#dynamic-rates-table table {

  width: max-content;      /* Allow the table to grow based on content */
  min-width: 100%;         /* Ensure it still fills container initially */
  table-layout: auto;      /* Allow natural column sizing */



/*  width: 100%;                  Full width */
  border-collapse: collapse;  /* Collapse borders */
/*  table-layout: fixed;         /* Fixed layout to respect col widths */
  margin: 0 auto;              /* center the table horizontally */

  border: none;
  border-radius: 0;
  
  /* 
  NOTE: max-width is controlled by these classes toggled in JS:
  - .max-width-three-columns: max width when Outcall column exists (3 columns)
  - .max-width-two-columns: max width when only 2 columns present
  */
}


/* Max width when table has 3 columns (with Outcall) */
#dynamic-rates-table table.max-width-three-columns {
  max-width: 450px;  /* Adjust max width as needed */
}

/* Max width when table has only 2 columns */
#dynamic-rates-table table.max-width-two-columns {
  max-width: 250px;  /* Adjust max width as needed */
}

/* Use colgroup to control column widths */
/* Make sure your table has this structure:
   <table>
     <colgroup>
       <col>  <!-- Column 1 -->
       <col>  <!-- Column 2 -->
       <col>  <!-- Column 3 -->
     </colgroup>
     ...
   </table>
*/

#dynamic-rates-table table colgroup col:nth-child(1) {
  width: 110px;                /* Fixed width for first column */
}

#dynamic-rates-table table colgroup col:nth-child(2),
#dynamic-rates-table table colgroup col:nth-child(3) {
  width: calc((100% - 110px) / 2); /* Remaining width split evenly */
}

#dynamic-rates-table th,
#dynamic-rates-table td {
  padding: 4px 4px;           /* Cell padding */
  border-bottom: 1px solid var(--table-row-underline);		/*   table row underline     */
  vertical-align: middle;     /* Vertically center text */
  white-space: nowrap;        /* Prevent wrapping */
  overflow: hidden;           /* Hide overflow */
  text-overflow: ellipsis;    /* Ellipsis for overflow */
  color: var(--p-color);      /* Use your body text color */
}

/* Center all headers */
#dynamic-rates-table th {
  font-weight: bold;
  background-color: var(--table-head-bg-color);  	/* Table head background colour */
  text-align: center;         /* Center headings */
}

/* Align data columns */
#dynamic-rates-table tbody td:nth-child(1) {
  text-align: center;          /* Column 1 center aligned */
  white-space: nowrap;         /* Prevent wrapping */
}

#dynamic-rates-table tbody td:nth-child(2),
#dynamic-rates-table tbody td:nth-child(3) {
  text-align: center;          /* Columns 2 and 3 center aligned */
  white-space: normal;         /* Allow wrapping if needed */
}




@media (max-width: 1000px) {		/* 14px Small font size as screen wide shrinks below 1000px */
  #dynamic-rates-table th,
  #dynamic-rates-table td {
    font-size: 14px !important;
  }
}

@media (max-width: 767.98px) {		/* 15px font size as screen stacks at 767px */
  #dynamic-rates-table th,
  #dynamic-rates-table td {
    font-size: 15px !important;
  }
}
/* End MY Rates - Dynamic table layout */





/*   ////////web69\\\\\\\\\   */
/* Stats - Dynamic table layout */
#stats-content {
  padding: 10px;                              	/* Spacing inside */
  border: 2px solid var(--secondary-color);  	/* Use the same orange border */
  border-radius: 6px;                         	/* Rounded corners */
  box-sizing: border-box;                     	/* Ensure padding doesn't add extra width */

  max-width: 250px;     /* Limit the container width itself */
  width: 100%;          /* Allow scaling within parent */
  margin: 0 auto; 	/* Center horizontally */
}

#stats-content .stat-row {
  display: flex;
  flex-wrap: wrap;
  color: var(--p-color);      /* Use your body text color */
  padding: 2px 4px 2px 6px;           /* Cell padding */
  border-bottom: 1px solid var(--table-row-underline);		/*   table row underline     */
  font-size: 13px !important;
}

#stats-content .stat-label {
  text-align: left;          /* Column 2 center aligned */
  font-weight: bold;
  flex: 1 1 40%;
  white-space: nowrap;        /* Prevent wrapping */
  overflow: hidden;           /* Hide overflow */
}

#stats-content .stat-value {
  text-align: center;          /* Column 2 center aligned */
  flex: 1 1 60%;
  padding-left: 10px;
  white-space: nowrap;        /* Prevent wrapping */
  overflow: hidden;           /* Hide overflow */
}

	/* 4 column table */
@media (max-width: 991px) {
  #stats-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 400px; /* ⬅️ Override max-width at this breakpoint */

    color: var(--p-color);      /* Use your body text color */
    padding: 1px 2px 1px 10px;           /* Cell padding */
    font-size: 8px !important;
  }

#stats-content .stat-row {
  width: 48%;               /* Two stat-rows per line → 4 columns total */
  margin-bottom: 3px;
  border-bottom: 1px solid var(--table-row-underline);		/*   table row underline     */
  color: var(--p-color);      /* Use your body text color */
  display: flex;
  flex-wrap: wrap;
  }


#stats-content .stat-label {
  text-align: left;          /* Column 2 center aligned */
  font-weight: bold;
  flex: 1 1 40%;
  white-space: nowrap;        /* Prevent wrapping */
  overflow: hidden;           /* Hide overflow */

  padding: 1px 0;     /* Reduce vertical padding inside cells */
  line-height: 1.1;   /* Tighter line height */
}

#stats-content .stat-value {
  text-align: center;          /* Column 2 center aligned */
  flex: 1 1 60%;
  padding-left: 10px;
  white-space: nowrap;        /* Prevent wrapping */
  overflow: hidden;           /* Hide overflow */

  padding: 1px 0;     /* Reduce vertical padding inside cells */
  line-height: 1.1;   /* Tighter line height */
}


}
/* End Stats - Dynamic table layout */



/* ////////web69\\\\\\\\ */
/* stops 'about me' image getting too large */
.about-image {
  max-width: 250px;
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--border-radius-medium);
}
/* End stops 'about me' image getting too large */


/* ////////web69\\\\\\\\ */
/* Refined gallery mobile fix: keep vertical images centered and better sized */
@media screen and (max-width: 991px) {		/* 767px orginally */
  .gallery-thumb.image-hover-thumb {
    max-width: 100%;
    margin: 0 auto 16px auto; /* Center horizontally */
  }

  .gallery-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-medium);
    display: block;
  }

  /* Target tall images: center and widen slightly */
  .gallery-thumb:not(.gallery-thumb-small) img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 420px;
    max-width: 95%;
  }
}

@media screen and (max-width: 991px) {		/* 767px orginally */
  .gallery-thumb.image-hover-thumb {
    max-width: 100%;
    margin: 0 auto 16px auto; /* centers container */
  }

  .gallery-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-medium);
    display: block;
    margin-left: auto;
    margin-right: auto; /* centers image */
  }

  .gallery-thumb:not(.gallery-thumb-small) img {
    max-height: 420px;
    max-width: 95%;
  }
}



/*---------------------------------------
  CONTACT SECTION - Small screen container padding
-----------------------------------------*/
@media (max-width: 575.98px) {
  #section_7 > .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


/* ============================== */
/* /////////web69\\\\\\\\\ */								
/* Status update from database */
/* ============================== */
.available-text {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #007BFF; 				/* Blue color */
  display: block !important;
  margin-bottom: 1rem;

  animation: blinkFade 10s linear infinite;  	/* Blinking animation */
}


.rates-text {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: Grey; 				/* Grey color */
  display: block !important;
  margin-bottom: 1rem;

  animation: blinkFade 10s linear infinite;  	/* Blinking animation */
}




@keyframes blinkFade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.40;
  }
}
/* End Status update from database */


/* /////////web69\\\\\\\\\ */
/* Opri */
#stopOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.9);
  color: white;
  z-index: 999999;
  text-align: center;
  padding-top: 20vh;
  font-size: 2rem;
  font-weight: bold;
  user-select: none;
}
/* End Opri */


/* /////////web69\\\\\\\\\ */
/* Prevent modal leaks + force modal priority on page load */

/* Force modal backdrop to be fully opaque black and cover entire screen */
.modal {
  background-color: rgba(0, 0, 0, 1) !important; /* solid black, no transparency */
  z-index: 999999 !important;                   /* ultra high z-index to cover everything */
  display: none;                                /* default hidden; revealed via .show-modal */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;

}

/* Prevent modal content from fading in/out */
.modal.fade {
  opacity: 1 !important;
  transition: none !important;
}

/* Optional: prevent clicking outside modal content to close */
.modal-backdrop {
  display: none !important; /* hides Bootstrap backdrop */
}

/* Disable scrolling and clicks behind modal */
body.modal-open {
  overflow: hidden !important;
  pointer-events: none !important; 
}

/* Allow pointer events inside the modal content */
.modal-dialog {
  pointer-events: auto !important;
}


/* ///////// NEW: Early modal show logic ///////// */
/* When the JS detects age not confirmed */
/*
.show-modal body > *:not(#ageModal) {
  display: none !important;
}
*/

#ageModal {
  background-color: rgba(0, 0, 0, 1) !important;
  z-index: 999999 !important;
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  visibility: hidden;          /* Initially hidden */
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* When age not confirmed */
.show-modal #ageModal {
  visibility: visible !important;
  opacity: 1 !important;
}

body.prevent-reveal {
  visibility: hidden;
}
/* End Prevent modal leaks */


/* /////////web69\\\\\\\\\ */
/* Overlay container for gallery images */

.status-overlay-container {
  position: relative; 
  display: block; 
margin-bottom: 24px; /* move spacing here */
}

.status-overlay-container:not(:last-child) {
  margin-bottom: 24px;
}


.status-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  color: var(--p-color);
  font-weight: bold;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 1px 1px 2px #fff;
  pointer-events: none;
  user-select: none;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}


.status-overlay-container.holiday .holiday-overlay,
.status-overlay-container.unavailable .unavailable-overlay {
  opacity: 1;
}

.status-overlay-container.holiday .popup-image,
.status-overlay-container.unavailable .popup-image {
  cursor: default !important;
}




/* END Overlay container for gallery images */