
/* Dark Mode Off*/


:root {
  color-scheme: only light;
}


/* Fonts*/


@font-face {font-family: 'Candara'; src: local('Candara Light'), 
local('Candara'); font-weight: 300; font-style: normal;}
@font-face {font-family: 'Candara'; src: local('Candara Bold'), 
local('Candara'); font-weight: 700; font-style: normal;}
body {font-family: 'Candara', Arial, sans-serif;
 font-weight: 300;} strong, b {font-weight: 700;}
@font-face {font-family: 'Calisto MT'; src: local('Calisto MT'); font-weight: normal;font-style: normal;
}

/* Site settings */


body {background-color:#D4D8D8;margin:0px;font-family:Arial,sans-serif;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;text-rendering:optimizeLegibility;font-feature-settings:'kern', 'liga' 0, 'clig' 0, 'calt' 0;color:#000000;letter-spacing:0em;-webkit-print-color-adjust:exact;}
a:link,
a:visited,
a:hover,
a:active,
a * {
  color: #5e1a31;
  text-decoration: underline;
  cursor: pointer;
}


/* Navigation Menu */

#nav_menu_format {font-family:Arial; font-size:17px;}
#nav_menu_format li:hover > a {background-color:#CED2BD; color:#4C453F;}
#nav_menu_format li a {color:#4C453F; background-color:#FFFFFF; padding:12px; padding-right:30px;}
#nav_menu_format li > div {background-color:#FFFFFF; padding:12px;}
#nav_menu_format li {border-color:#4C453F;}
#nav_menu_format li:hover {border-color:#4C453F;}
#nav_menu_format ul {border: solid 0px #4C453F; background-color:#FFFFFF;}

#nav_menu_format  {background-color:#4C453F;}
#nav_menu_format .nav_b4 {display:block; padding:0px; margin:0px; opacity: 0.90;}

/* Navigation Menu Header Transition */

.nav_header {
  position: absolute;
  width: 260px;
  height: 42px;
  background-color: #FFFFFF;
   border-top-right-radius: 12px;
  color: #4C453F;
  font-family: "Calisto MT", serif; letter-spacing: 0.04em;
  font-size: 24px;
  line-height: 42px;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.3s ease;
}

.nav_header:hover {
  background-color: #E6E8DD; 
}

/* Navigation Menu Header Button */

.t {touch-action: none;}
.nav_b0:hover > .nav_b2, 
.nav_b1:hover > 
a:hover .xr_ro,
a:active .xr_rd,
.nav_b0:hover .xr_ro {visibility: visible; opacity: 0.9;}

/* Navigation Buttons */

.nav_b2 {white-space: nowrap; padding:0px; margin:0px; visibility: hidden; position: absolute; z-index:101;}
.nav_b2 li {display:block;}
.nav_b2 li a {display:block; text-decoration:none;}
.nav_b1 {position: relative;}
.nav_b1:after {content: ''; position: absolute; top: 50%; right: .5em; height: 0px; width: 0px; border: 5px solid transparent; margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: inherit;}
body {text-align:center;}


/* Desktop */


.float_img_left {
  float: left;
  margin: 0 15px 10px 0;
  display: block;
}


.float_img_right {
  float: right;
  margin: 0 15px 10px 0;
  display: block;
}


.d_header_container {
  position: absolute;
  top: 580px;   
  left: 0;
  width: 800px;   
  height: 0;
  pointer-events: none;
  z-index: 2;
}


.rotated_header_text {
	z-index: 2;
	position: absolute;
	left: 820px;
	top: 280px;		transform: rotate(-90deg);
	transform-origin: left top;
	font-size: 46px;
	font-family: "Calisto MT", serif; letter-spacing: 0.08em;
	color: #e6e8dd;
	font-weight: bold;
	font-style: italic;
}


.desktop_background {
	background: #E6E8DD; 
	border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
	padding: 0px;
	margin: 0 auto; 
	width: 880px;
    box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.4); 
}


.desktop_contents {
  position: relative; 
  z-index: 1;
  width: 880px;
  margin-top: 50px;
  margin-right: 30px;
  padding: 0px 30px 20px 30px; /* top:0px, right:30px, bottom:20px, left:30px */
  box-sizing: border-box;
  font-family: 'Candara Light', sans-serif;
  font-weight: 300;
  font-size: 18px;
}


.desktop_footer {
  background: #D4D8D8; border-radius: 8px 8px 0 0;
  margin: 40px auto 0 auto; padding: 20px; width: 880px;
  text-align: center; font-size: 14px; color: #4C453F;
}


.header-container {
  width: 880px;
  margin: 0 auto;
  position: relative;
}


.header-img {
  width: 100%;
  height: auto;
  display: block;
}


.desk_img {
  border: 3px solid #5e1a31;
  border-radius: 8px;
  margin: 0 10px;
}


.desktop_gallery_block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}


.desktop_gallery_block img.d_img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 3px solid #5e1a31;
  border-radius: 8px;
  transition: transform 0.3s ease;
}


.desktop_gallery_block img.d_img:hover {
  transform: scale(1.05);
}


.desktop_gallery_block img.img_v {
  grid-row: span 2;
}


.nav-bar {
  background-color: #6c645c;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


.nav-bar ul {
  margin: 0;
  padding: 10px 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 40px;
}


.nav-bar li a {
  color: #e6e8dd;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 12px;
  display: block;
}


.nav-bar li a:hover {
  color: #5e1a31;
  font-weight: bold;
  text-shadow: 0 0 6px #9e727b;
}


.nav-bar li a.active {
  color: #5e1a31;
  font-weight: bold;
  text-shadow: 0 0 6px #9e727b;
}


/* Mobile */


.m_header_container {
  position: relative;
  height: 390px; 
}


.mobile_rotated_header_text  {
	position: absolute;
	left: 350px;
	bottom: -10px;
	transform: rotate(-90deg);
	transform-origin: left top;
	font-size: 46px;
	font-family: "Calisto MT", serif; letter-spacing: 0.08em;
	color: #e6e8dd;
	font-weight: bold;
	font-style: italic;

}

@media (max-width: 768px) {
  .mobile_bullet_list {
    list-style: none;        
    margin: 0;
    padding: 0;
    text-align: right;     
  }

  .mobile_bullet_list li {
    position: relative;
    margin: 0 0 0.5em 0;
    padding-right: 1.2em; 
  }

  .mobile_bullet_list li::before {
    content: "•";           
    position: absolute;
    right: 0;               
    color: #5e1a31;         
    font-weight: bold;
	font-size: 1.4em;  
    line-height: 1;
  }
}


@media (max-width: 768px) {
  ul.mobile_service_table {
    list-style: none !important; 
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    width: 100%;
  }

  ul.mobile_service_table > li {
    padding: 10px 14px;
    display: block;
  }

/* Row with background colour, no bold */
ul.mobile_service_table > li:nth-child(odd) {
  background-color: #f5f5f5;
  font-weight: normal;
  text-align: left;
}

/* Row with no background colour, bold */
ul.mobile_service_table > li:nth-child(even) {
  background-color: transparent;
  font-weight: bold;
  color: #5e1a31; /* match your theme colour */
  text-align: left;
}


}




.mobile_content {
  position: relative;
  z-index: 1;
  font-size: 24px;
  width: 420px;
  text-align: right;
  line-height: 1.5;
  margin-top: 50px;  
  margin-right: 30px; 
}


.mobile_background {
  background-color: #E6E8DD;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 20px;
  margin: 0 auto;
  width: 440px;
  box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.4); 
}


.mobile_footer {
  height: 100px;
}


.mobile_image {
  display: block;
  margin: 10px auto;
  width: 100%;
  max-width: 400px;
  height: auto;
  height: auto;
}


.gallery_block {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
  display: block;
}


.img_h {
  width: 92%;
  height: auto;
  border: 3px solid #5e1a31;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  margin: 10px 0;
}


.img_v {
  width: 45%; 
  height: auto;
  border: 3px solid #5e1a31;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  margin: 10px 0;
}


/* Shortcut Styles */

.ap {position: absolute;}


/* Business Card Animation */
.card-container {
  perspective: 1000px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.card {
  width: 100%;
  padding-top: 63.71%; /* maintains 620x395 ratio */
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.card-container.flipped .card {
  transform: rotateY(-180deg);
}

.front, .back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front img, .back img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
}

.back {
  transform: rotateY(-180deg);
}

  /* Lightbox Gallery */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0.8s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 1.2s ease, opacity 0.8s ease;
}

.lightbox-overlay.active img {
  transform: scale(1);
  opacity: 1;
}

body.no-scroll {
  overflow: hidden;
}


@media screen, handheld {

  /* Nav Menu */
  
[id^="nav_b"] {
  font-family: Arial;
  font-size: 14px;
}

[id^="nav_b"] li {border-color: #000000;}
[id^="nav_b"] li:hover {border-color: #FFFFFF;}
[id^="nav_b"] li a {color: #000000; background-color: #B2B2B2; padding: 2px 20px 2px 2px;}
[id^="nav_b"] li:hover > a {background-color: #666666; color: #FFFFFF;}
[id^="nav_b"] li > div {background-color: #B2B2B2; padding: 2px;}
[id^="nav_b"] ul {border: 0 solid #000000; background-color: #B2B2B2;}

[id^="nav_b"] .nav_b2 {transition: visibility 300ms;}
[id^="nav_b"] .nav_b4 {opacity: 0.90;}
[id^="nav_b"] .nav_b5 {border-color: rgba(76, 69, 63, 0.70);}
[id^="nav_b"] .nav_b6 {background-color: #000000;}


  /* Navigation Bar Theme */
  
  
  #nav_b5 li a,
  #nav_b13 li a,
  #nav_b21 li a,
  #nav_b29 li a,
  #nav_b37 li a {
    color: #4C453F;
	background-color: #FFFFFF;
    padding: 12px;
    padding-right: 30px;
  }

  #nav_b5 li:hover > a,
  #nav_b13 li:hover > a,
  #nav_b21 li:hover > a,
  #nav_b29 li:hover > a,
  #nav_b37 li:hover > a {
    background-color: #CED2BD;
    color: #4C453F;
  }

  #nav_b5 li > div,
  #nav_b13 li > div,
  #nav_b21 li > div,
  #nav_b29 li > div,
  #nav_b37 li > div {
    background-color: #FFFFFF;
    padding: 12px;
  }

  #nav_b5 .nav_b6,
  #nav_b13 .nav_b6,
  #nav_b21 .nav_b6,
  #nav_b29 .nav_b6,
  #nav_b37 .nav_b6 {
    background-color: #4C453F;
  }

  #nav_b5 ul,
  #nav_b13 ul,
  #nav_b21 ul,
  #nav_b29 ul,
  #nav_b37 ul {
    background-color: #FFFFFF;
    border: solid 0px #4C453F;
  }
}


@media screen and (max-width: 717px) {
  .mview_mobile {
    display: block;
    width: 480px;
    background-color: transparent;
    box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.4);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: visible;
	padding-bottom: 100px;
  }

  .mview_desktop {
    display: none;
  }

  #mview_center {
    width: 480px;
  }
}

@media screen and (min-width: 718px) {
  .mview_mobile {display: none;}
  .mview_desktop {display: block;}
  #mview_center {width: 955px;}
}

h2, h2 a, a h2 {
  color:#5e1a31 !important;
  text-decoration:underline !important;
  font-family:'Calisto MT',serif !important;
}

