* {
	font-family: 'DM Sans', sans-serif;
}
.blueme {
	background-color:#C7E0DE  !important;
}

figure.jumbo {
	height:100%;
}

figure.jumbo img {
object-fit: cover;
	height: 100%;
  display: block;
}

.for-work {
	background:#649099;
}

.shimmer  p {

	text-align: left !important;

}

.vcard-width h1 {
	width:100%;
	background-color:white;
	text-align: center !important;
	border-radius:10px;
}

.vcard-three-icons {
 margin: auto;
  width:fit-content;
	 
}

.vcard-one-icon  {
	padding-left:15px;
	padding-right:15px;
	 display:inline;
}

.vcard-width p {
	width:100%;
	background-color:white;
	text-align: center !important;
	border-radius:10px;
}


.vcard-width-addme p {
	width:100%;
	background-color:white;
	text-align: center !important;
	border-radius:10px;
}


.vcard-width a {
	width:100%;
	background-color:white;
	text-align: center !important;
	border-radius:10px;
}

.vcard-width-addme a {
	width:100%;
	background-color:white;
	text-align: center !important;
	color:red;
	border-radius:10px;
}




a.vcard-nodec:link, a.vcard-nodec:visited, a.vcard-nodec:active, a.vcard-nodec:hover {
  text-decoration: none;
}



.jotter div {
	padding:30px;
}

.me-top-group-photo {
	padding-top:0px !important;
	padding-bottom:0px !important;
	padding-left:0px !important;
	padding-right:0px !important;
}

.me-group-title {
	padding-left:10px;
		padding-right:10px;
}
.me-row-photo {
	width:100%;
}

.me-group-photo {
		width:100%;
}


.me-photo {
	width:100%;
}

.me-group-text {
		padding-top:2vw !important;
	padding-bottom:2vw !important;
}

.me-group-table {
		padding-left:20px !important;
		padding-right:20px !important;
	margin-top:0px !important;
	
}

.me-table td,th{
	border: 0px;
}

.me-heading h2 {
	padding-top:10px;
		padding-bottom:10px;
}




/*used on the page template for all pages*/
.qme {
	padding-left:00px;
	padding-right:00px;
}

.qme .wp-block-group.has-background {

	padding-top:00px;
	padding-bottom:00px;
}









/*used on the page template for all pages*/
.qmg {
	padding-left:10px;
	padding-right:10px;
}
/*except this page, where it's hard edges*/
.page-id-2760 .qmg  {
	padding-left:0px;
	padding-right:0px;
}



.zzcontainer {
  position: relative;
  text-align: center;
  color: white;
	margin:0px;
	padding:0px;
	line-height:0;
}


@media  (max-width: 640px) {
	.zzcontainer {
		width:100%;
	}	
}


@media (min-width: 641px) {
	.zzcontainer {
	width:50%;
	}	
}

.help img {
	width:510px;
}

.mysize img {
	width:100%;
}


/* Bottom left text */
.zzbottom-left {
	
	/*this is coopied from the body to make the text not overlap. no idea what it does but had to override this in the container */
	line-height: var(--wp--custom--body--typography--line-height);
  position: absolute;
  bottom: 16px;
  left: 16px;
	margin:0px;
	padding:0px;
}

.zzname {
	margin:0px;
	padding:0px;
}


a.zzname:link, a.zzname:visited, a.zzname:active, a.zzname:hover {
  color: white;
	text-decoration: none;
}



.zzt {
	padding:0px;
	margin:0px;
}

.zzimg {
	width:100%;
	height:100%;
}

































.r2d3x  {
	width:100%;
	margin:0px !important;
	margin-left:0px !important;
	margin-right:unset;
	
	padding-left:0px !important;
	padding-right:0px !important;
	padding:0px !important;
}

.r2d2  {
	width:50% !important;
}

.r2d2 .wp-block-cover__inner-container {
	align-self:end;
}

.r2d2 p {
	xpadding-left:10px;
	xpadding-bottom:10px !important;
	xmargin:0px;
	xmargin-left:10px;
}

.jotter div:nth-of-type(1) {
background-color: #f1f1f1;
}

.jotter  div:nth-of-type(2) {
background-color: #e2e2e2;
} 


.jotter  div:nth-of-type(3) {
background-color: #d1d3d3;
} 


.jotter div:nth-of-type(4) {
background-color: #c1c1c1;
} 

.jotter div:nth-of-type(5) {
background-color: #b1b1b1;
} 

.jotter div:nth-of-type(6) {
background-color: #f1f1f1;
} 

.jotter div:nth-of-type(7) {
background-color: #e1e1e1;
} 


.tighter {
	gap:10px !important;
}

.redbar {
	color:#B01917;
	font-size:20px;
}



.wp-block-post-title {
	color:#649099
}
 /*this is how we get rid of the big gap after the logo on phones*/
.wp-site-blocks .site-header .logo-border {
	margin-top:5px;
	margin-bottom:0px;

}

.wp-site-blocks .site-header-linear .site-words-stack-small
{
	margin:auto;
    display: flex;
		row-gap:0;
}

.wp-container-6  {
	 background-color: #ffffff; 
}

/*make the white backgroup behind the header*/
.wp-container-4  {
	 background-color: #ffffff; 
}

.site-header {
	 background-color: #FFFFFF; 
}

/*make the website fill width of browser*/
.wp-site-blocks {
	padding-left:0px;
	padding-right:0px;
}

.smallme2 {
	width:25%;
}


.around-header {
	background-color:white;
}

.right-of-header {
	background-color:white;
}

.behind-header {
	background-color:white;
}

.around-menu {
	background-color:#FFFFFF;
}


.right-of-menu {
	background-color:#FFFFFF;
}


.lightblue {
	
}



body { 
	background-color: #C7E0DE;
}


#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

div.blackbox figure figcaption
{
	margin:0px
}

div.blackbox figure figcaption a
{
	color:white;
	margin:0px;
	text-decoration:none;
}

.blackbox {

    background-color: #649099;
    display: inline-block;
}

.team-member-wrapper {
	height:100%;
  background: white;
	border-radius:10px;
	padding-top:5px;
	padding-right:5px;
	padding-bottom:5px;
	padding-left:5px;
}

.team-member-super-wrapper {
	display:contents;
	padding:10px;
}

.team-member-picture{
  float: left;
  width: 150px;
	height: 150px;
	padding-right:5px;
	
}

.team-member-figure {
	margin:0px;
}


.team-member-name {
	font-size:22px;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
}

.team-member-title {
  font-size:14px;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
}

.team-member-text {
  font-size:12px;
	margin-left:0px;
	margin-top:5px;
	margin-bottom:0px;
}


.footer-img {
	max-width:200px;
}

.site-footer-container {
	background-color:#649099;
	color:white;
}

.site-footer-container a{
	color:#284B9B;
}


h1 {
	color:#649099;
	font-size:40px;
	font-weight:bold;
}

h2 {
	color:#649099;
	font-size:30px;
	font-weight:bold;
}

h2 {
	color:#649099;
	font-size:28px;
	font-weight:bold;
}


/*need this as the below p one just dominates when we don't want justify*/
.has-text-align-center {
    text-align: center !important;
}

/*need this as the below p one just dominates when we don't want justify*/
.has-text-align-left {
    text-align: left !important;
}


p {
	text-align:justify !important;
}


h3 {
	color:#649099;
	font-size:20px;
}

.help-image img{
	
}



/* not too sure why this works but if the screen is narrow then this forces it to be centred rather than left aligned on the what we can help with images*/
@media screen and (max-width: 480px) {
  .help figure {
    width: 100%;
  }
}
#mega-menu-wrap-max_mega_menu_2 {
	width:418px; !important;
}

#mega-menu-wrap-max_mega_menu_3 {
	width:418px; !important;
}


/* this might need to be tuned to only affect the megaman menu */
a.mega-menu-link  {
	margin-bottom:5px !important;
	width:auto !important;
	height:46px !important;
	/*margin-left: 5px !important;*/
  margin-right: 5px !important;
}



.nopadding {
	padding:0px !important;
}
.nomargin {
	margin:0px;
}

/* used in the header to remove the underline from the clinic name*/
.nounderline a {  
	text-decoration: none; 
}
.site-footer-container a {
	color:#C7E0DE;
		text-decoration: none; 
}

.lighten {
	filter: opacity(55%);
}


td.lightblue {
    color: #649099;
}



/**/

figure > table   {
	border: 0px !important;
  border-width: 0px !important;
  border-bottom-width: 0px !important;
}
figure > table   {
  border: none !important;

}

figure > table > tbody  {
	border: none !important;

}


figure > table > tbody >tr {
	border: none !important;

}

figure > table > tbody >tr > td {
	border: none !important;

}


figure > table > thead {

	border: none !important;

}

figure > table  >thead >tr {
	border: none !important;
}

figure > table  >thead >tr > th {
	border: none !important;
}


figure > table > tbody > tr > td:nth-child(1) {
	background-color:#8AC6BC;
}

figure > table > tbody > tr > td:nth-child(2) {
	background-color:#D9EAE9;
}


figure > table > thead > tr > th:nth-child(1) {
	background-color:#8AC6BC;
}

figure > table > thead > tr > th:nth-child(2) {
	background-color:#D9EAE9;
}

.why-toc {
	background-color:#8AC6BC;
	padding:10px;
}

.why-toc-no-bullet {
	background-color:#8AC6BC;
	padding:10px;
}

.why-toc::before{
	content:url('https://theotherclinic.sg/wp-content/uploads/2025/03/SMALLER-15-Bird-alone.png');
	display:inline;
	margin-right:10px;
	width:10px;
	height:auto;
}

.why-question {
	padding:10px;
	background-color:#649099;
}

.why-others {
	padding:10px;
		background-color:#D9EAE9;
}

.why-others-no-bullet {
	padding:10px;
		background-color:#D9EAE9;
}



.why-others::before{
	content:url('https://theotherclinic.sg/wp-content/uploads/2025/03/SMALLER-15-Blank-black.png');
	display:inline;
	margin-right:10px;
	width:10px;
	height:auto;
}


.white-border-image {
	border: '50px solid white'
}

img.wp-image-1513 {
  border: 15px solid white;
}


.leaf-me {
 background-image: url("https://theotherclinic.sg/wp-content/uploads/2025/03/green-banana-leaf-texture-background_45024-1231.jpg"); /* Replace with your image URL */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover; /* Scales the image to cover the entire element */
  background-position: center; /* Centers the image within the element */	
}


header {
  position: sticky; /* Or use 'sticky' for a more modern approach */
  top: 0;
  width: 100%;
  z-index: 1000; /* Ensure it stays on top of other content */
}





@media screen and (max-width: 694px)   {
	.wp-block-site-logo img {
		height:50px;
		width:auto;
	}	
}


@media screen and (min-width: 695px)  {
	.wp-block-site-logo img {
		height:152px;
		width:auto;
	}	
}