@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}


/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		6;
	dw-num-cols-tablet:		10;
	dw-num-cols-desktop:	14;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */



.grid-Container{
	width: 100vw;
	height: auto;
}
	
	
/* Hero Section */
#hero-slide {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  margin-top: 0px;
  background-color: #f4e0d4;
  background: #FFF9F5;
background: linear-gradient(0deg, rgba(255, 249, 245, 1) 0%, rgba(244, 224, 212, 1) 70%);
}


#network-animation{
  position: absolute;
  top: 0vh;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .5;
}


.na-inner{
	width: 100%;
	height: 40%;
	background: #FFF9F5;
	background: linear-gradient(0deg, rgba(255, 249, 245, 1) 0%, rgba(244, 224, 212, 0) 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	float: left;
	clear: none;
	z-index: 20;
}


#hs-bg-animation {
  position: absolute;
  top: 35vh;
  left: 0;
  width: 100%;
  height: 70%;
  z-index: 10;
  
}


#hs-text-slide {
  position: absolute;
  top: 22vh;
  left: 0;
  width:85%;
  margin: auto 5%;
  height: auto;
  z-index: 10;
  display: flex;
  align-items: left;
  justify-content: left;
  
}


.hero-slide-content {
  position: relative;
  text-align:left;
  max-width: 100%;
  padding: 0 0rem;
  opacity: 1;
  /* Entrance animates transform only — never opacity — so the hero copy is
     always legible even if the animation is paused (e.g. loaded in a
     background tab) or disabled via reduced-motion preferences. */
  animation: heroRise 1s ease-out;
}


@keyframes heroRise {
  from { transform: translateY(28px); }
  to { transform: translateY(0); }
}


/* Soft light wash so the text always reads cleanly over the animated nodes */
.hero-slide-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 180%;
  z-index: -1;
  pointer-events: none;
}


@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-slide-content h2 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  margin-bottom: 1.5rem;
  color: var(--color-dark);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(250, 250, 248, 0.9);
}


.hero-slide-content p {
  font-size: inherit; 
  color: #5C4033;
  line-height: 1.2em;
  margin-bottom: 2rem;
  font-weight: 400;
  margin-top: 1em;
}


.slide-indicators {
  position: absolute;
  top: -2em;
  left: 3.5em;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 15;
}


.slide-indicator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: rgba(62, 39, 35, 0.5);
  cursor: pointer;
  transition: all var(--transition-base);
}


.slide-indicator.active {
  background-color: rgba(62, 39, 35, 1);
  transform: scale(1.3);
}


.slide-details{
	clear: both;
	display: block;
	position: absolute;
	float: left;
	bottom: 15vh;
	width: 90%;
	margin-left: 5vw;

}
    










/* Break Text Section */

#breakslide {
  position: relative;
  background-color: #352b29;
  width: 100vw;
  top: -20vh;
  height: 100vh;
  overflow: hidden;
  border-radius: 2em;
  transform: scale(0.85);
  transform-origin: center center;
  will-change: transform;
  z-index: 20;
  display: block;
  float: left;
  clear: none;
  margin: 0;
}

.bs-container {
  display: flex;
  flex-wrap: nowrap;
  width: 300vw;
  height: 100%;
  will-change: transform;
}

.bs-slide {
  width: 100vw;
  height: 100vh;
  float: left;
  clear: none;
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}



.bs-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background: rgba(33, 33, 33, 8.8);
	background: linear-gradient(0deg, rgba(33, 33, 33, 0.88) 0%, rgba(33, 33, 33, 0.15) 100%);	
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	 
}

.bsi-line{
	height: 1px;
	width: 100%;
	display: block;
	float: left;
	clear: none;
	background-color: white;
}



.bs-slide-1 { 
	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat; 
	position: relative;
}

.bs-slide-1 .bs-inner{
	width: calc(100% - 10vw);
	height: calc(100% - 10vh);
	padding: 10vh 0 0 10vw;
}

.bs-slide-1 .bsi-line{
	
}


.bs-slide-2 { 

}

.bs-slide-2 .bs-inner{
  display: block;
}

.bs-slide-2 .bs-inner{
	width: calc(100% - 0vw);
	height: calc(100% - 0vh);
	padding: 10vh 0 0 0vw;
}


.bs-slide-2 .bsi-line{
	height: 1px;
	width: 100%;
	display: none;
	float: left;
	clear: none;
	background-color: white;
}

.bs-main-text{
		width: 85%;
		margin: 7vh 7.5% auto;
	display: block;
	float: left;
	clear: none;
	color: #fff;
}

.bs-main-text h2{
  font-size: 1.8em;
}

.bs-main-text p{
	margin: 1em auto;
	width: 70%;
	float: left;
}

.bs-main-text span{
	 font-style: italic;
}


.bs-slide-3 { 
	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat; 
	position: relative;
	background-image: url(../img/small-pattaya-chonburi-thailand-28-may-2019-beautiful-landscape-cityscape-pattaya-city-is-popular-destination-thailand-with-white-cloud-blue-sky.jpg);
}


.bsi-indicators{
	height: auto;
	width: 60%;
	display: block;
	float: left;
	clear: none;
	padding: 2em auto;
	margin: 10vh 0;
	border: #fff solid;
	border-width: 2px 0 0 0;
	 display: grid;  
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". ."
    ". ."; 
}

.bsii{
	width: 100%;
	margin: 1em 0 0;
	height: auto;
	display: block;
	float: left;
	clear: none;
}

.bsii h6{
	color: #f4e0d4;
}

.bsii h2, .bsii p{
	color: #fff;
}





#client-list {
  position: relative;
  background-color: #212121;
  width: 100vw;
  top: -40vh;
  height: 90vh;
  overflow: hidden;
  border-radius: 2em;
  transform: scale(0.85);
  transform-origin: center center;
  will-change: transform;
  z-index: 30;
  display: block;
  float: left;
  clear: none;
  margin: auto 0 -40vh;
}


.cl-top{
	 display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    ". ."
    ". ."
    ". ."
    ". ."; 
	width: 100%;
	height: 70%;
	margin: 0 0% 0;
	float: left;
	clear: none;
}

.clt-img{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0;
}


.cl-bottom{
	width: 70%;
	height: 6%;
	margin: 5% 15% 0;
	display: block;
	float: left;
	clear: both;
	color: #fff;
	text-align: center;

}














/* Break Marquee */
.break-marquee {
  position: relative;
  margin: 2rem 0 5em;
  background: linear-gradient(90deg, var(--color-dark) 0%, #4B3A2F 50%, var(--color-dark) 100%);
  overflow: hidden;
  height: 20vh;
  width: 100%;
  display: block;
  clear: both;
  color: #cd9670;
}

.break-marquee::before,
.break-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, var(--color-dark) 0%, transparent 100%);
  z-index: 1;
}

.break-marquee::before {
  left: 0;
}

.break-marquee::after {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--color-dark) 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
  position: relative;
  z-index: 0;
}

.marquee-item {
  flex-shrink: 0;
  font-size: 7em;
  font-family: var(--font-primary);
  font-weight: 100;
  color: var(--color-white);
  white-space: nowrap;
  letter-spacing: -0.02em;
  padding-right: 0;
  color: #cd9670;
  font-family: 'PF Regal Display Pro Italic';
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}











/* Tabs How We Do It */

#homepage-howwedoit {
  height: auto;
  width: 90%;
  margin: 0vh 5% 0vh;
  display: block;
  float: left;
  clear: both;
}


#homepage-howwedoit h1{
	color: #352b29;
	font-family: 'PF Regal Display Pro Italic';
}

.vtabs-wrapper {
	width: 100%;
	height: auto;
	float: left;
  
  gap: var(--space-2xl);
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  align-items: flex-start;
  display: block;
  grid-auto-flow: row dense; 
  grid-template-columns: .3fr; 
  grid-template-rows: auto auto; 
  gap: 1em 1em; 
  grid-template-areas: 
    "."
    "."; 
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: all .3s;
}


.vtabs-nav {
  transition: all .3s;
  align-items: left;
  text-align: left;
    display: flex; 
  grid-auto-flow: row dense; 
  grid-template-columns: auto auto auto auto auto; 
  grid-template-rows: auto; 
  gap: 1em 1em; 
  grid-template-areas: 
    ". . . . ."; 
    
    width: 100%;
    float: left;
    clear: none;
    overflow-x: scroll;
    padding: 1em auto;
}


.vtab {
  display: flex;
  align-items: left;
  gap: 0.75rem;
  padding: 1rem .5rem;
  background: none;
  border: none;
  border-radius: 2em;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--color-gray-dark);
  font-family: 'GeneralSans-Medium';
	font-weight: 500;
	font-size: 1em;
	opacity: .6;
  text-align: left;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  width: auto;
  transition: all .3s;
  grid-auto-flow: row dense; 
  grid-template-columns: 1em auto; 
  grid-template-rows: 1fr; 
  gap: 1em .5em; 
  grid-template-areas: 
    ". ."; 
    
	-webkit-box-pack: left;
      -ms-flex-pack: left;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: left;
      align-items: left;
      margin: auto auto 1em auto;
}

.vtab:hover {
  background: var(--color-accent-light);
  color: var(--color-dark);
   text-align: left;
   -webkit-box-pack: left;
      -ms-flex-pack: left;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: left;
      align-items: left;

}

.vtab.active {
  background: #fff;
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(139, 115, 85, 0.1);
  opacity: 1;
  font-size: 1em;
   text-align: left;
     display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1em auto; 
  grid-template-rows: 1fr; 
  gap: 1em .5em; 
  grid-template-areas: 
    ". ."; 
	transition: all .3s;
}

.vtab-icon {
  flex-shrink: 0;
  font-size: 0em;
  color: inherit;
  float: left;
  text-align: center;
  transition: all .3s;

}

.vtab.active .vtab-icon {
  flex-shrink: 0;
  font-size: 1em;
  color: inherit;
  float: left;
  transition: all .3s;
}



.vtabs-panel {
  min-width: 0;
  min-height: 40vh;
  height: 40vh;
  width: 100%;
  display: block;
  float: left;
  clear: none;
}

.vtab-content {
  display: none;
  align-items: center;
  min-height: 60vh;
  width: 100%;
  height: auto;
  
}

.vtab-content.active {
  display: block;
  animation: vtabEnter 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.vtab-content.exiting {
  display: grid;
  pointer-events: none;
  animation: vtabExit 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes vtabEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vtabExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}


.vtc-image {
  border-radius: 12px;
  overflow: hidden;
  height: 0;
  width: 0;
  background-color: #5c403313;
  display: none;
  float: left;
  clear: none;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      overflow: hidden;
}


.vtc-image svg{
  height: 0;
  width: auto;
  display: block;
  float: left;
  clear: none;
}

.vtc-image svg .st0 {
  fill: #bc805e;
}


.vtc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  float: left;
  clear: none;
}


.vtc-label {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: .9em;
  font-weight: 500;
  font-family: 'GeneralSans-Medium';
  margin: 1em 0;
  float: left;
  clear: both;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vtc-body h3 {
  font-size: 1;;
  color: #352b29;
  line-height: 1em;
  font-weight: 700;
  margin: 1em 0 0;
  font-family: 'PF Regal Display Pro';
	font-weight: 500;
  
}

.vtc-body p {
  color: var(--color-gray-dark);
  line-height: 1.2em;
  margin: 1em 0;
  font-family: 'GeneralSans-Regular';
}

.vtc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base);
  align-self: flex-start;
}

.vtc-cta:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}











/* Tabs How We Do It */

#homepage-services{
  width: 100%;
  height: auto;
  display: block;
  float: left;
  clear: none;
  position: relative;
  border: solid #212121;
  border-width: 1px 0 0 0;

}

.hs-inner{
  width: 90%;
  height: auto;
  display: block;
  float: left;
  clear: none;
  margin: 5vh 5%;
 
}

.hps-left{
  float: left;
  clear: none;
  display: block;
  height: auto;
  width: 100%;
  position: relative;
  top: 0vh;
}

.hps-left h1{
  font-family: 'PF Regal Display Pro Italic';
  margin: 1em 0 .2em;
}

.hpsl-robe {
  position: sticky;
  top: 0;
  float: left;
  clear: none;
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 280px;
  margin-top: 2em;
}

.hps-right{
  width: calc(100% - 2px);
  height: auto;
  display: block;
  float: left;
  clear: none;
  border: solid #212121;
  border-width: 0px 0 0 0px;
}


.service-tile{
  width: calc(100% - 2em);
  height: auto;
  display: block;
  padding: 4em 1em;

}

.service-tile h1{
  color: #cd9670;
  font-family: 'PF Regal Display Pro Italic';
}







/* ─── CEO Pane ──── */




#ceo-welcome{
  width: 90%;
  height: auto;
  display: block;
  float: left;
  clear: none;
  border-radius: 2em;
  margin: 5vh 5%;
  position: relative;
  overflow: hidden;
}

#ceo-bg-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
}

#ceo-welcome .break-marquee,
#ceo-welcome .ceo-inner {
  position: relative;
  z-index: 1;
}

#ceo-welcome .break-marquee {
  position: absolute;
  top: 5vh;
  left: 0;
  width: 100%;
}

#ceo-welcome .marquee-track{
  position: relative;
  top: auto;
  height: auto;
  display: flex;
  width: max-content;
}



.ceo-inner{
  width: 100%;
  height: 100%;
  z-index: 20;
  display: block;
  float: left;
  clear: none;
  position: absolute;
}


.ceo-img{
  width: 100%;
  height: 80vh;
  display: block;
  float: left;
  clear: none;
  background-image: url(../img/ceo.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}


.ceo-text{
  width: 90%;
  height: auto;
  margin: 0% 5% 5vh 5%;
  display: block;
  float: left;
  clear: none;
}












/* ─── Membership ──── */


#becomemember{
  width: 85%;
  height: auto;
  display: none;
  float: left;
  clear: none;
  margin: 15vh 7.5% 5vh;
}


#becomemember h1:not(.bmi-membership h1){
  font-family: 'PF Regal Display Pro Italic';
  width: 60%;
  height: auto;
  margin: auto 0%;
  text-align: left;
}


.bm-inner{
  width: 100%;
  height: auto;
  margin: 5vh 0%;
  display: block;
  float: left;
  clear: both;
    display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 1em 2em; 
}


.bmi-membership{
  width: calc(100% - 0em);
  height:calc(85vh - 4em);
  display: block;
  float: left;
  clear: none;
  border-radius: 2em;
  padding: 2em 0;
  overflow: hidden;
  position: relative;
}


.bmi-membership h1{
  font-family: 'PF Regal Display Pro Italic';
  color: #cd9670;
  position: absolute;
  left: .5em;
  top: .5em;
  margin: 0;
  text-align: left;
}


.bmi-membership img{
  margin-left: 40%;
  width: 80%;
  height: auto;
  display: block;
}

.card-details {
  width: 100%;
  height: calc(20vh - 2em);
  overflow: hidden;
  display: block;
  float: left;
  clear: none;
  position: relative;
  margin: 2.5vh 0 0;
}


#card-details-down .cd-track {
  animation-direction: reverse;
}


.cd-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.2em;
  width: max-content;
  height: 95%;
  align-items: stretch;
  animation: cdScroll 18s linear infinite;

}


@keyframes cdScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cd-tile{
    width: 150px;
}

.cd-tile p {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}



.bmi-membership button{
  width: 90%;
  height: 4em;
  margin: 2em 5%;
  float: left;
  clear: none;
  border-radius: 2em;
 position: absolute;
 bottom: 0em;
}





.bmi-membership:nth-of-type(1){
  margin: 0;
  background-color: #f4e0d49e;
  border: 1px solid #f4e0d4;
}


.bmi-membership:nth-of-type(1) .cd-tile {
  flex-shrink: 0;
  height: calc(100% - 2em);
  background-color: rgba(255, 255, 255, 0.629);
  padding: 1.2em 1.4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.bmi-membership:nth-of-type(1) .cd-tile i {
  font-size: 1.4em;
  color: #cd9670;
}





.bmi-membership:nth-of-type(2), #diamond-member-card{
  margin: 10vh 0 0 0;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
}

.bmi-membership:nth-of-type(2) .cd-tile, #diamond-member-card .cd-tile {
  flex-shrink: 0;
  height: calc(100% - 2em);
  background-color: rgba(218, 218, 218, 0.15);
  padding: 1.2em 1.4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.bmi-membership:nth-of-type(2) .cd-tile i, #diamond-member-card .cd-tile i {
  font-size: 1.4em;
  color: #676767;
}





.bmi-membership:nth-of-type(3), #platinum-member-card{
  margin: 20vh 0 0 0;
  background-color: #888888e1;
  border: 1px solid #888888;
}

.bmi-membership:nth-of-type(3) .cd-tile, #platinum-member-card .cd-tile{
  flex-shrink: 0;
  height: calc(100% - 2em);
  background-color: rgba(82, 82, 82, 0.359);
  padding: 1.2em 1.4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: #fff;
  font-weight: 500;
}

.bmi-membership:nth-of-type(3) .cd-tile i, #platinum-member-card .cd-tile i{
  font-size: 1.4em;
  color: #ffffff;
}



.bmi-membershi-pricing{
  width: 90%;
  height: auto;
  margin: 0em 5%;
  display: block;
  float: right;
  text-align: right;
}


/* ─── Membership ──── */












/* ─── Resources ──── */


#resource-news {
  display: block;
  float: left;
  clear: none;
  width: 85%;
  height: auto;
  margin: 10vh 7.5%;
}

/* Header */
#resource-news .container {
    display: block;
  float: left;
  clear: none;
  width: 100%;
  height: auto;
  margin: auto;
}

#resource-news .resources-header {
  margin-bottom:0;
  position: relative;
  
}

#resource-news .resources-header::before {
  content: 'RESOURCES & SPOTLIGHTS';
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-family: 'GeneralSans-Medium';
}

#resource-news .resources-header::after {
  display: none;
}

#resource-news .resources-header h1 {
  color: #352b29;
  clear: both;
  float: left;
  display: block;
  font-family: 'PF Regal Display Pro Italic';
  margin: 0 0 .25em 0em;
}

#resource-news .resources-header p {
  color: #676767;
  font-size: 1em;
  line-height: 1.65;
  width: auto;
  margin: 0 0 2em;
  clear: both;
  float: left;
  display: block;
}

/* Grid — gold hairline borders */
#resource-news .stories-grid {
  clear: both;
  width:100%;
  height: auto;
  display: block;
  float: left;
   display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    "."
    "."
    "."
    "."; 
}


/* Events */
#resource-news .eventslide {
  clear: none;
  width: 100%;
  height: 100%;
  display: block;
  float: right;
}








/* ─── Resources ──── */







/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {




  /* Grid — gold hairline borders */
  #resource-news .stories-grid {
    clear: both;
    width:100%;
    height: auto;
    display: block;
    float: left;
    display: grid; 
    grid-auto-flow: row dense; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 0em 0em; 
    grid-template-areas: 
      ". ."
      ". ."; 
  }



  /* Events */
#resource-news .eventslide {
  clear: none;
  width: 100%;
  height: 100%;
  display: block;
  float: right;
}










}



/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {






.grid-Container{
	width: 100vw;
	height: auto;
}
	
	
/* Hero Section */
#hero-slide {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  margin-top: 0px;
  background-color: #f4e0d4;
  background: #FFF9F5;
background: linear-gradient(0deg, rgba(255, 249, 245, 1) 0%, rgba(244, 224, 212, 1) 70%);
}


#network-animation{
  position: absolute;
  top: 0vh;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .5;
}


.na-inner{
	width: 100%;
	height: 40%;
	background: #FFF9F5;
	background: linear-gradient(0deg, rgba(255, 249, 245, 1) 0%, rgba(244, 224, 212, 0) 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	float: left;
	clear: none;
	z-index: 20;
}


#hs-bg-animation {
  position: absolute;
  top: 20vh;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  
}


#hs-text-slide {
  position: absolute;
  top: 25vh;
  left: 0;
  width:90%;
  margin: auto 5%;
  height: auto;
  z-index: 10;
  display: flex;
  align-items: left;
  justify-content: left;
  
}


.hero-slide-content {
  position: relative;
  text-align:left;
  max-width: 40%;
  padding: 0 2rem;
  opacity: 1;
  /* Entrance animates transform only — never opacity — so the hero copy is
     always legible even if the animation is paused (e.g. loaded in a
     background tab) or disabled via reduced-motion preferences. */
  animation: heroRise 1s ease-out;
}


@keyframes heroRise {
  from { transform: translateY(28px); }
  to { transform: translateY(0); }
}


/* Soft light wash so the text always reads cleanly over the animated nodes */
.hero-slide-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 180%;
  z-index: -1;
  pointer-events: none;
}


@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-slide-content h2 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  margin-bottom: 1.5rem;
  color: var(--color-dark);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(250, 250, 248, 0.9);
}


.hero-slide-content p {
  font-size: 1em;
  color: #5C4033;
  line-height: 1.2em;
  margin-bottom: 2rem;
  font-weight: 400;
  margin-top: 1em;
}


.slide-indicators {
  position: absolute;
  top: -2em;
  left: 3.5em;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 15;
}


.slide-indicator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: rgba(62, 39, 35, 0.5);
  cursor: pointer;
  transition: all var(--transition-base);
}


.slide-indicator.active {
  background-color: rgba(62, 39, 35, 1);
  transform: scale(1.3);
}


.slide-details{
	clear: both;
	display: block;
	position: absolute;
	float: left;
	bottom: 15vh;
	width: 50%;
	margin-left: 10vw;

}
    










/* Break Text Section */

#breakslide {
  position: relative;
  background-color: #352b29;
  width: 100vw;
  top: -20vh;
  height: 100vh;
  overflow: hidden;
  border-radius: 2em;
  transform: scale(0.85);
  transform-origin: center center;
  will-change: transform;
  z-index: 20;
  display: block;
  float: left;
  clear: none;
  margin: 0;
}

.bs-container {
  display: flex;
  flex-wrap: nowrap;
  width: 300vw;
  height: 100%;
  will-change: transform;
}

.bs-slide {
  width: 100vw;
  height: 100vh;
  float: left;
  clear: none;
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}



.bs-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background: rgba(33, 33, 33, 8.8);
	background: linear-gradient(0deg, rgba(33, 33, 33, 0.88) 0%, rgba(33, 33, 33, 0.15) 100%);	
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	 
}

.bsi-line{
	height: 1px;
	width: 100%;
	display: block;
	float: left;
	clear: none;
	background-color: white;
}



.bs-slide-1 { 
	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat; 
	position: relative;
}

.bs-slide-1 .bs-inner{
	width: calc(100% - 10vw);
	height: calc(100% - 10vh);
	padding: 10vh 0 0 10vw;
}

.bs-slide-1 .bsi-line{
	
}


.bs-slide-2 { 
	 
}

.bs-slide-2 .bs-inner{
	width: calc(100% - 0vw);
	height: calc(100% - 10vh);
	padding: 10vh 0 0 0vw;
}

.bs-slide-2 .bs-inner{
  display: flex;
}


.bs-slide-2 .bsi-line{
	height: 1px;
	width: 100%;
	display: block;
	float: left;
	clear: none;
	background-color: white;
}

.bs-main-text{
		width: 300%;
		margin: auto 5%;
	display: block;
	float: left;
	clear: none;
	color: #fff;
}

.bs-main-text h2{
  font-size: 2.4em;
}

.bs-main-text p{
	margin: 1em auto;
	width: 70%;
	float: left;
}

.bs-main-text span{
	 font-style: italic;
}


.bs-slide-3 { 
	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat; 
	position: relative;
	background-image: url(../img/small-pattaya-chonburi-thailand-28-may-2019-beautiful-landscape-cityscape-pattaya-city-is-popular-destination-thailand-with-white-cloud-blue-sky.jpg);
}


.bsi-indicators{
	height: auto;
	width: 80%;
	display: block;
	float: left;
	clear: none;
	padding: 2em auto;
	margin: 10vh 0;
	border: #fff solid;
	border-width: 2px 0 0 0;
	 display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". . . ."; 
}

.bsii{
	width: 100%;
	margin: 2em 0;
	height: auto;
	display: block;
	float: left;
	clear: none;
}

.bsii h6{
	color: #f4e0d4;
}

.bsii h2, .bsii p{
	color: #fff;
}





#client-list {
  position: relative;
  background-color: #212121;
  width: 100vw;
  top: -40vh;
  height: 90vh;
  overflow: hidden;
  border-radius: 2em;
  transform: scale(0.85);
  transform-origin: center center;
  will-change: transform;
  z-index: 30;
  display: block;
  float: left;
  clear: none;
  margin: auto 0 -40vh;
}


.cl-top{
	 display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    ". . . ."
    ". . . ."; 
	width: 90%;
	height: 70%;
	margin: 0 5% 0;
	float: left;
	clear: none;
}

.clt-img{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0;
}


.cl-bottom{
	width: 70%;
	height: 6%;
	margin: 5% 15% 0;
	display: block;
	float: left;
	clear: both;
	color: #fff;
	text-align: center;

}














/* Break Marquee */
.break-marquee {
  position: relative;
  margin: 2rem 0 5em;
  background: linear-gradient(90deg, var(--color-dark) 0%, #4B3A2F 50%, var(--color-dark) 100%);
  overflow: hidden;
  height: 20vh;
  width: 100%;
  display: block;
  clear: both;
  color: #cd9670;
}

.break-marquee::before,
.break-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, var(--color-dark) 0%, transparent 100%);
  z-index: 1;
}

.break-marquee::before {
  left: 0;
}

.break-marquee::after {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--color-dark) 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
  position: relative;
  z-index: 0;
}

.marquee-item {
  flex-shrink: 0;
  font-size: 10em;
  font-family: var(--font-primary);
  font-weight: 100;
  color: var(--color-white);
  white-space: nowrap;
  letter-spacing: -0.02em;
  padding-right: 0;
  color: #cd9670;
  font-family: 'PF Regal Display Pro Italic';
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}











/* Tabs How We Do It */

#homepage-howwedoit {
  height: 70vh;
  width: 85%;
  margin: 5vh 7.5% 10vh;
  display: block;
  float: left;
  clear: both;
}


#homepage-howwedoit h1{
	color: #352b29;
	font-family: 'PF Regal Display Pro Italic';
}

.vtabs-wrapper {
	width: 100%;
	height: auto;
	float: left;
  display: flex;
  gap: var(--space-2xl);
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  align-items: flex-start;
    display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: .3fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 1em 1em; 
  grid-template-areas: 
    ". ."; 
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: all .3s;
}


.vtabs-nav {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: all .3s;
  align-items: left;
  text-align: left;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: left;
      align-items: left;
}


.vtab {
  display:flex;
  align-items: left;
  gap: 0.75rem;
  padding: 1rem .5rem;
  background: none;
  border: none;
  border-radius: 2em;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--color-gray-dark);
  font-family: 'GeneralSans-Medium';
	font-weight: 500;
	font-size: 1em;
	opacity: .6;
  text-align: left;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  width: auto;
  transition: all .3s;
  grid-auto-flow: row dense; 
  grid-template-columns: 1em auto; 
  grid-template-rows: 1fr; 
  gap: 1em .5em; 
  grid-template-areas: 
    ". ."; 
	-webkit-box-pack: left;
      -ms-flex-pack: left;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: left;
      align-items: left;
}

.vtab:hover {
  background: var(--color-accent-light);
  color: var(--color-dark);
   text-align: left;
   -webkit-box-pack: left;
      -ms-flex-pack: left;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: left;
      align-items: left;

}

.vtab.active {
  background: #fff;
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(139, 115, 85, 0.1);
  opacity: 1;
  font-size: 1.2em;
   text-align: left;
     display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 2em auto; 
  grid-template-rows: 1fr; 
  gap: 1em .5em; 
  grid-template-areas: 
    ". ."; 
	transition: all .3s;
}

.vtab-icon {
  flex-shrink: 0;
  font-size: 0em;
  color: inherit;
  float: left;
  text-align: center;
  transition: all .3s;

}

.vtab.active .vtab-icon {
  flex-shrink: 0;
  font-size: 1.2em;
  color: inherit;
  float: left;
  transition: all .3s;
}



.vtabs-panel {
  min-width: 0;
  height: 60vh;
  width: 100%;
  display: block;
  float: left;
  clear: none;
}

.vtab-content {
  display: none;
  grid-template-columns: 1fr 1.25fr;
  gap: 1em 2em; 
  align-items: center;
  height: 60vh;
  width: 100%;
  height: 100%;
  
}

.vtab-content.active {
  display: grid;
  animation: vtabEnter 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.vtab-content.exiting {
  display: grid;
  pointer-events: none;
  animation: vtabExit 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes vtabEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vtabExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}


.vtc-image {
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #5c403313;
  display: block;
  float: left;
  clear: none;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}


.vtc-image svg{
  height: 60%;
  width: auto;
  display: block;
  float: left;
  clear: none;
}

.vtc-image svg .st0 {
  fill: #bc805e;
}


.vtc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}


.vtc-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: .9em;
  font-weight: 500;
  font-family: 'GeneralSans-Medium';
  margin: 1em 0;
  float: left;
  clear: both;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vtc-body h3 {
  font-size: 1;;
  color: #352b29;
  line-height: 1em;
  font-weight: 700;
  margin: 0;
  font-family: 'PF Regal Display Pro';
	font-weight: 500;
}

.vtc-body p {
  color: var(--color-gray-dark);
  line-height: 1.2em;
  margin: 1em 0;
  font-family: 'GeneralSans-Regular';
}

.vtc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base);
  align-self: flex-start;
}

.vtc-cta:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}











/* Tabs How We Do It */

#homepage-services{
  width: 100%;
  height: auto;
  display: block;
  float: left;
  clear: none;
  position: relative;
  border: solid #212121;
  border-width: 1px 0 0 0;

}

.hs-inner{
  width: 85%;
  height: auto;
  display: block;
  float: left;
  clear: none;
  margin: 10vh 7.5%;
 
}

.hps-left{
  float: left;
  clear: none;
  display: block;
  height: auto;
  width: 50%;
  position: sticky;
  top: 5vh;
}

.hps-left h1{
  font-family: 'PF Regal Display Pro Italic';
  margin: 1em 0 .2em;
}

.hpsl-robe {
  position: sticky;
  top: 0;
  float: left;
  clear: none;
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 280px;
  margin-top: 2em;
}

.hps-right{
  width: calc(50% - 2px);
  height: auto;
  display: block;
  float: left;
  clear: none;
  border: solid #212121;
  border-width: 0px 0 0 1px;
}


.service-tile{
  width: calc(100% - 10em);
  height: auto;
  display: block;
  padding: 5em 6em;

}

.service-tile h1{
  color: #cd9670;
  font-family: 'PF Regal Display Pro Italic';
}







/* ─── CEO Pane ──── */




#ceo-welcome{
  width: 85%;
  height: 80vh;
  display: block;
  float: left;
  clear: none;
  border-radius: 2em;
  margin: 5vh 7.5%;
  position: relative;
  overflow: hidden;
}

#ceo-bg-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
}

#ceo-welcome .break-marquee,
#ceo-welcome .ceo-inner {
  position: relative;
  z-index: 1;
}

#ceo-welcome .break-marquee {
  position: absolute;
  top: 5vh;
  left: 0;
  width: 100%;
}

#ceo-welcome .marquee-track{
  position: relative;
  top: auto;
  height: auto;
  display: flex;
  width: max-content;
}



.ceo-inner{
  width: 100%;
  height: 100%;
  z-index: 20;
  display: block;
  float: left;
  clear: none;
  position: absolute;
}


.ceo-img{
  width: 50%;
  height: 100%;
  display: block;
  float: left;
  clear: none;
  background-image: url(../img/ceo.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}


.ceo-text{
  width: 40%;
  height: auto;
  margin: 30% 5% 0 0;
  display: block;
  float: left;
  clear: none;
}












/* ─── Membership ──── */


#becomemember{
  width: 85%;
  height: auto;
  display: none;
  float: left;
  clear: none;
  margin: 15vh 7.5% 5vh;
}


#becomemember h1:not(.bmi-membership h1){
  font-family: 'PF Regal Display Pro Italic';
  width: 60%;
  height: auto;
  margin: auto 0%;
  text-align: left;
}


.bm-inner{
  width: 100%;
  height: auto;
  margin: 5vh 0%;
  display: block;
  float: left;
  clear: both;
    display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 1em 2em; 
}


.bmi-membership{
  width: calc(100% - 0em);
  height:calc(85vh - 4em);
  display: block;
  float: left;
  clear: none;
  border-radius: 2em;
  padding: 2em 0;
  overflow: hidden;
  position: relative;
}


.bmi-membership h1{
  font-family: 'PF Regal Display Pro Italic';
  color: #cd9670;
  position: absolute;
  left: .5em;
  top: .5em;
  margin: 0;
  text-align: left;
}


.bmi-membership img{
  margin-left: 40%;
  width: 80%;
  height: auto;
  display: block;
}

.card-details {
  width: 100%;
  height: calc(20vh - 2em);
  overflow: hidden;
  display: block;
  float: left;
  clear: none;
  position: relative;
  margin: 2.5vh 0 0;
}


#card-details-down .cd-track {
  animation-direction: reverse;
}


.cd-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.2em;
  width: max-content;
  height: 95%;
  align-items: stretch;
  animation: cdScroll 18s linear infinite;

}


@keyframes cdScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cd-tile{
    width: 150px;
}

.cd-tile p {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}



.bmi-membership button{
  width: 90%;
  height: 4em;
  margin: 2em 5%;
  float: left;
  clear: none;
  border-radius: 2em;
 position: absolute;
 bottom: 0em;
}





.bmi-membership:nth-of-type(1){
  margin: 0;
  background-color: #f4e0d49e;
  border: 1px solid #f4e0d4;
}


.bmi-membership:nth-of-type(1) .cd-tile {
  flex-shrink: 0;
  height: calc(100% - 2em);
  background-color: rgba(255, 255, 255, 0.629);
  padding: 1.2em 1.4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.bmi-membership:nth-of-type(1) .cd-tile i {
  font-size: 1.4em;
  color: #cd9670;
}





.bmi-membership:nth-of-type(2), #diamond-member-card{
  margin: 10vh 0 0 0;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
}

.bmi-membership:nth-of-type(2) .cd-tile, #diamond-member-card .cd-tile {
  flex-shrink: 0;
  height: calc(100% - 2em);
  background-color: rgba(218, 218, 218, 0.15);
  padding: 1.2em 1.4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.bmi-membership:nth-of-type(2) .cd-tile i, #diamond-member-card .cd-tile i {
  font-size: 1.4em;
  color: #676767;
}





.bmi-membership:nth-of-type(3), #platinum-member-card{
  margin: 20vh 0 0 0;
  background-color: #888888e1;
  border: 1px solid #888888;
}

.bmi-membership:nth-of-type(3) .cd-tile, #platinum-member-card .cd-tile{
  flex-shrink: 0;
  height: calc(100% - 2em);
  background-color: rgba(82, 82, 82, 0.359);
  padding: 1.2em 1.4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: #fff;
  font-weight: 500;
}

.bmi-membership:nth-of-type(3) .cd-tile i, #platinum-member-card .cd-tile i{
  font-size: 1.4em;
  color: #ffffff;
}



.bmi-membershi-pricing{
  width: 90%;
  height: auto;
  margin: 0em 5%;
  display: block;
  float: right;
  text-align: right;
}


/* ─── Membership ──── */












/* ─── Resources ──── */


#resource-news {
  display: block;
  float: left;
  clear: none;
  width: 85%;
  height: auto;
  margin: 10vh 7.5%;
}

/* Header */
#resource-news .container {
    display: block;
  float: left;
  clear: none;
  width: 100%;
  height: auto;
  margin: auto;
}

#resource-news .resources-header {
  margin-bottom:0;
  position: relative;
  
}

#resource-news .resources-header::before {
  content: 'RESOURCES & SPOTLIGHTS';
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-family: 'GeneralSans-Medium';
}

#resource-news .resources-header::after {
  display: none;
}

#resource-news .resources-header h1 {
  color: #352b29;
  clear: both;
  float: left;
  display: block;
  font-family: 'PF Regal Display Pro Italic';
  margin: 0 0 .25em 0em;
}

#resource-news .resources-header p {
  color: #676767;
  font-size: 1em;
  line-height: 1.65;
  width: auto;
  margin: 0 0 2em;
  clear: both;
  float: left;
  display: block;
}

/* Grid — gold hairline borders */
#resource-news .stories-grid {
  clear: both;
  width:70%;
  height: auto;
  display: block;
  float: left;
   display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    ". ."
    ". ."; 
}


/* Events */
#resource-news .eventslide {
  clear: none;
  width: 30%;
  height: 100%;
  display: block;
  float: right;
}








/* ─── Resources ──── */




















}









    /* Desktop Layout: 769px to a max of 1080px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1080px) {


.grid-Container{
	width: 100vw;
	height: auto;
}
	
	
/* Hero Section */
#hero-slide {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  margin-top: 0px;
  background-color: #f4e0d4;
  background: #FFF9F5;
background: linear-gradient(0deg, rgba(255, 249, 245, 1) 0%, rgba(244, 224, 212, 1) 70%);
}


#network-animation{
  position: absolute;
  top: 0vh;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .5;
}


.na-inner{
	width: 100%;
	height: 40%;
	background: #FFF9F5;
	background: linear-gradient(0deg, rgba(255, 249, 245, 1) 0%, rgba(244, 224, 212, 0) 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	float: left;
	clear: none;
	z-index: 20;
}


#hs-bg-animation {
  position: absolute;
  top: 20vh;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  
}


#hs-text-slide {
  position: absolute;
  top: 20vh;
  left: 0;
  width:85%;
  margin: auto 7.5%;
  height: auto;
  z-index: 10;
  display: flex;
  align-items: left;
  justify-content: left;
  
}


.hero-slide-content {
  position: relative;
  text-align:left;
  max-width: 40%;
  padding: 0 2rem;
  opacity: 1;
  /* Entrance animates transform only — never opacity — so the hero copy is
     always legible even if the animation is paused (e.g. loaded in a
     background tab) or disabled via reduced-motion preferences. */
  animation: heroRise 1s ease-out;
}


@keyframes heroRise {
  from { transform: translateY(28px); }
  to { transform: translateY(0); }
}


/* Soft light wash so the text always reads cleanly over the animated nodes */
.hero-slide-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 180%;
  z-index: -1;
  pointer-events: none;
}


@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-slide-content h2 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  margin-bottom: 1.5rem;
  color: var(--color-dark);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(250, 250, 248, 0.9);
}


.hero-slide-content p {
  font-size: 1em;
  color: #5C4033;
  line-height: 1.2em;
  margin-bottom: 2rem;
  font-weight: 400;
  margin-top: 1em;
}


.slide-indicators {
  position: absolute;
  top: -2em;
  left: 3.5em;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 15;
}


.slide-indicator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: rgba(62, 39, 35, 0.5);
  cursor: pointer;
  transition: all var(--transition-base);
}


.slide-indicator.active {
  background-color: rgba(62, 39, 35, 1);
  transform: scale(1.3);
}


.slide-details{
	clear: both;
	display: block;
	position: absolute;
	float: left;
	bottom: 15vh;
	width: 50%;
	margin-left: 10vw;

}
    










/* Break Text Section */

#breakslide {
  position: relative;
  background-color: #352b29;
  width: 100vw;
  top: -20vh;
  height: 100vh;
  overflow: hidden;
  border-radius: 2em;
  transform: scale(0.85);
  transform-origin: center center;
  will-change: transform;
  z-index: 20;
  display: block;
  float: left;
  clear: none;
  margin: 0;
}

.bs-container {
  display: flex;
  flex-wrap: nowrap;
  width: 300vw;
  height: 100%;
  will-change: transform;
}

.bs-slide {
  width: 100vw;
  height: 100vh;
  float: left;
  clear: none;
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}



.bs-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background: rgba(33, 33, 33, 8.8);
	background: linear-gradient(0deg, rgba(33, 33, 33, 0.88) 0%, rgba(33, 33, 33, 0.15) 100%);	
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	 
}

.bsi-line{
	height: 1px;
	width: 100%;
	display: block;
	float: left;
	clear: none;
	background-color: white;
}



.bs-slide-1 { 
	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat; 
	position: relative;
}

.bs-slide-1 .bs-inner{
	width: calc(100% - 10vw);
	height: calc(100% - 10vh);
	padding: 10vh 0 0 10vw;
}

.bs-slide-1 .bsi-line{
	
}


.bs-slide-2 { 
	 
}

.bs-slide-2 .bs-inner{
	width: calc(100% - 0vw);
	height: calc(100% - 10vh);
	padding: 10vh 0 0 0vw;
}

.bs-slide-2 .bs-inner{
  display: flex;
}


.bs-slide-2 .bsi-line{
	height: 1px;
	width: 100%;
	display: block;
	float: left;
	clear: none;
	background-color: white;
}

.bs-main-text{
		width: 300%;
		margin: auto 5%;
	display: block;
	float: left;
	clear: none;
	color: #fff;
}

.bs-main-text h2{
  font-size: 3.6em;
}

.bs-main-text p{
	margin: 1em auto;
	width: 70%;
	float: left;
}

.bs-main-text span{
	 font-style: italic;
}


.bs-slide-3 { 
	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat; 
	position: relative;
	background-image: url(../img/small-pattaya-chonburi-thailand-28-may-2019-beautiful-landscape-cityscape-pattaya-city-is-popular-destination-thailand-with-white-cloud-blue-sky.jpg);
}


.bsi-indicators{
	height: auto;
	width: 60%;
	display: block;
	float: left;
	clear: none;
	padding: 2em auto;
	margin: 10vh 0;
	border: #fff solid;
	border-width: 2px 0 0 0;
	 display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". . . ."; 
}

.bsii{
	width: 100%;
	margin: 2em 0;
	height: auto;
	display: block;
	float: left;
	clear: none;
}

.bsii h6{
	color: #f4e0d4;
}

.bsii h2, .bsii p{
	color: #fff;
}





#client-list {
  position: relative;
  background-color: #212121;
  width: 100vw;
  top: -40vh;
  height: 90vh;
  overflow: hidden;
  border-radius: 2em;
  transform: scale(0.85);
  transform-origin: center center;
  will-change: transform;
  z-index: 30;
  display: block;
  float: left;
  clear: none;
  margin: auto 0 -40vh;
}


.cl-top{
	 display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    ". . . ."
    ". . . ."; 
	width: 90%;
	height: 70%;
	margin: 0 5% 0;
	float: left;
	clear: none;
}

.clt-img{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: none;
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0;
}


.cl-bottom{
	width: 70%;
	height: 6%;
	margin: 5% 15% 0;
	display: block;
	float: left;
	clear: both;
	color: #fff;
	text-align: center;

}














/* Break Marquee */
.break-marquee {
  position: relative;
  margin: 2rem 0 5em;
  background: linear-gradient(90deg, var(--color-dark) 0%, #4B3A2F 50%, var(--color-dark) 100%);
  overflow: hidden;
  height: 20vh;
  width: 100%;
  display: block;
  clear: both;
  color: #cd9670;
}

.break-marquee::before,
.break-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, var(--color-dark) 0%, transparent 100%);
  z-index: 1;
}

.break-marquee::before {
  left: 0;
}

.break-marquee::after {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--color-dark) 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
  position: relative;
  z-index: 0;
}

.marquee-item {
  flex-shrink: 0;
  font-size: 10em;
  font-family: var(--font-primary);
  font-weight: 100;
  color: var(--color-white);
  white-space: nowrap;
  letter-spacing: -0.02em;
  padding-right: 0;
  color: #cd9670;
  font-family: 'PF Regal Display Pro Italic';
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}











/* Tabs How We Do It */

#homepage-howwedoit {
  height: 70vh;
  width: 85%;
  margin: 5vh 7.5% 10vh;
  display: block;
  float: left;
  clear: both;
}


#homepage-howwedoit h1{
	color: #352b29;
	font-family: 'PF Regal Display Pro Italic';
}

.vtabs-wrapper {
	width: 100%;
	height: auto;
	float: left;
  display: flex;
  gap: var(--space-2xl);
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  align-items: flex-start;
    display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: .3fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 1em 1em; 
  grid-template-areas: 
    ". ."; 
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: all .3s;
}


.vtabs-nav {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: all .3s;
  align-items: left;
  text-align: left;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: left;
      align-items: left;
}


.vtab {
  display:flex;
  align-items: left;
  gap: 0.75rem;
  padding: 1rem .5rem;
  background: none;
  border: none;
  border-radius: 2em;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--color-gray-dark);
  font-family: 'GeneralSans-Medium';
	font-weight: 500;
	font-size: 1em;
	opacity: .6;
  text-align: left;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  width: auto;
  transition: all .3s;
  grid-auto-flow: row dense; 
  grid-template-columns: 1em auto; 
  grid-template-rows: 1fr; 
  gap: 1em .5em; 
  grid-template-areas: 
    ". ."; 
	-webkit-box-pack: left;
      -ms-flex-pack: left;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: left;
      align-items: left;
}

.vtab:hover {
  background: var(--color-accent-light);
  color: var(--color-dark);
   text-align: left;
   -webkit-box-pack: left;
      -ms-flex-pack: left;
      -webkit-justify-content: left;
      justify-content: left;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -webkit-align-items: left;
      align-items: left;

}

.vtab.active {
  background: #fff;
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(139, 115, 85, 0.1);
  opacity: 1;
  font-size: 1.2em;
   text-align: left;
     display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 2em auto; 
  grid-template-rows: 1fr; 
  gap: 1em .5em; 
  grid-template-areas: 
    ". ."; 
	transition: all .3s;
}

.vtab-icon {
  flex-shrink: 0;
  font-size: 0em;
  color: inherit;
  float: left;
  text-align: center;
  transition: all .3s;

}

.vtab.active .vtab-icon {
  flex-shrink: 0;
  font-size: 1.2em;
  color: inherit;
  float: left;
  transition: all .3s;
}



.vtabs-panel {
  min-width: 0;
  height: 60vh;
  width: 100%;
  display: block;
  float: left;
  clear: none;
}

.vtab-content {
  display: none;
  grid-template-columns: 1fr 1.25fr;
  gap: 1em 2em; 
  align-items: center;
  height: 60vh;
  width: 100%;
  height: 100%;
  
}

.vtab-content.active {
  display: grid;
  animation: vtabEnter 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.vtab-content.exiting {
  display: grid;
  pointer-events: none;
  animation: vtabExit 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes vtabEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vtabExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}


.vtc-image {
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #5c403313;
  display: block;
  float: left;
  clear: none;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}


.vtc-image svg{
  height: 60%;
  width: auto;
  display: block;
  float: left;
  clear: none;
}

.vtc-image svg .st0 {
  fill: #bc805e;
}


.vtc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}


.vtc-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: .9em;
  font-weight: 500;
  font-family: 'GeneralSans-Medium';
  margin: 1em 0;
  float: left;
  clear: both;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vtc-body h3 {
  font-size: 1;;
  color: #352b29;
  line-height: 1em;
  font-weight: 700;
  margin: 0;
  font-family: 'PF Regal Display Pro';
	font-weight: 500;
}

.vtc-body p {
  color: var(--color-gray-dark);
  line-height: 1.2em;
  margin: 1em 0;
  font-family: 'GeneralSans-Regular';
}

.vtc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base);
  align-self: flex-start;
}

.vtc-cta:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}











/* Tabs How We Do It */

#homepage-services{
  width: 100%;
  height: auto;
  display: block;
  float: left;
  clear: none;
  position: relative;
  border: solid #212121;
  border-width: 1px 0 0 0;

}

.hs-inner{
  width: 85%;
  height: auto;
  display: block;
  float: left;
  clear: none;
  margin: 10vh 7.5%;
 
}

.hps-left{
  float: left;
  clear: none;
  display: block;
  height: auto;
  width: 50%;
  position: sticky;
  top: 5vh;
}

.hps-left h1{
  font-family: 'PF Regal Display Pro Italic';
  margin: 1em 0 .2em;
}

.hpsl-robe {
  position: sticky;
  top: 0;
  float: left;
  clear: none;
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 280px;
  margin-top: 2em;
}

.hps-right{
  width: calc(50% - 2px);
  height: auto;
  display: block;
  float: left;
  clear: none;
  border: solid #212121;
  border-width: 0px 0 0 1px;
}


.service-tile{
  width: calc(100% - 10em);
  height: auto;
  display: block;
  padding: 5em 6em;

}

.service-tile h1{
  color: #cd9670;
  font-family: 'PF Regal Display Pro Italic';
}







/* ─── CEO Pane ──── */




#ceo-welcome{
  width: 85%;
  height: 80vh;
  display: block;
  float: left;
  clear: none;
  border-radius: 2em;
  margin: 5vh 7.5%;
  position: relative;
  overflow: hidden;
}

#ceo-bg-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
}

#ceo-welcome .break-marquee,
#ceo-welcome .ceo-inner {
  position: relative;
  z-index: 1;
}

#ceo-welcome .break-marquee {
  position: absolute;
  top: 5vh;
  left: 0;
  width: 100%;
}

#ceo-welcome .marquee-track{
  position: relative;
  top: auto;
  height: auto;
  display: flex;
  width: max-content;
}



.ceo-inner{
  width: 100%;
  height: 100%;
  z-index: 20;
  display: block;
  float: left;
  clear: none;
  position: absolute;
}


.ceo-img{
  width: 50%;
  height: 100%;
  display: block;
  float: left;
  clear: none;
  background-image: url(../img/ceo.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}


.ceo-text{
  width: 40%;
  height: auto;
  margin: 20% 5% 0 0;
  display: block;
  float: left;
  clear: none;
}












/* ─── Membership ──── */


#becomemember{
  width: 85%;
  height: auto;
  display: block;
  float: left;
  clear: none;
  margin: 15vh 7.5% 5vh;
}


#becomemember h1:not(.bmi-membership h1){
  font-family: 'PF Regal Display Pro Italic';
  width: 60%;
  height: auto;
  margin: auto 0%;
  text-align: left;
}


.bm-inner{
  width: 100%;
  height: auto;
  margin: 5vh 0%;
  display: block;
  float: left;
  clear: both;
    display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 1em 2em; 
}


.bmi-membership{
  width: calc(100% - 0em);
  height:calc(85vh - 4em);
  display: block;
  float: left;
  clear: none;
  border-radius: 2em;
  padding: 2em 0;
  overflow: hidden;
  position: relative;
}


.bmi-membership h1{
  font-family: 'PF Regal Display Pro Italic';
  color: #cd9670;
  position: absolute;
  left: .5em;
  top: .5em;
  margin: 0;
  text-align: left;
}


.bmi-membership img{
  margin-left: 40%;
  width: 80%;
  height: auto;
  display: block;
}

.card-details {
  width: 100%;
  height: calc(20vh - 2em);
  overflow: hidden;
  display: block;
  float: left;
  clear: none;
  position: relative;
  margin: 2.5vh 0 0;
}


#card-details-down .cd-track {
  animation-direction: reverse;
}


.cd-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.2em;
  width: max-content;
  height: 95%;
  align-items: stretch;
  animation: cdScroll 18s linear infinite;

}


@keyframes cdScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cd-tile{
    width: 150px;
}

.cd-tile p {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}



.bmi-membership button{
  width: 90%;
  height: 4em;
  margin: 2em 5%;
  float: left;
  clear: none;
  border-radius: 2em;
 position: absolute;
 bottom: 0em;
}





.bmi-membership:nth-of-type(1){
  margin: 0;
  background-color: #f4e0d49e;
  border: 1px solid #f4e0d4;
}


.bmi-membership:nth-of-type(1) .cd-tile {
  flex-shrink: 0;
  height: calc(100% - 2em);
  background-color: rgba(255, 255, 255, 0.629);
  padding: 1.2em 1.4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.bmi-membership:nth-of-type(1) .cd-tile i {
  font-size: 1.4em;
  color: #cd9670;
}





.bmi-membership:nth-of-type(2), #diamond-member-card{
  margin: 10vh 0 0 0;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
}

.bmi-membership:nth-of-type(2) .cd-tile, #diamond-member-card .cd-tile {
  flex-shrink: 0;
  height: calc(100% - 2em);
  background-color: rgba(218, 218, 218, 0.15);
  padding: 1.2em 1.4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.bmi-membership:nth-of-type(2) .cd-tile i, #diamond-member-card .cd-tile i {
  font-size: 1.4em;
  color: #676767;
}





.bmi-membership:nth-of-type(3), #platinum-member-card{
  margin: 20vh 0 0 0;
  background-color: #888888e1;
  border: 1px solid #888888;
}

.bmi-membership:nth-of-type(3) .cd-tile, #platinum-member-card .cd-tile{
  flex-shrink: 0;
  height: calc(100% - 2em);
  background-color: rgba(82, 82, 82, 0.359);
  padding: 1.2em 1.4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: #fff;
  font-weight: 500;
}

.bmi-membership:nth-of-type(3) .cd-tile i, #platinum-member-card .cd-tile i{
  font-size: 1.4em;
  color: #ffffff;
}



.bmi-membershi-pricing{
  width: 90%;
  height: auto;
  margin: 0em 5%;
  display: block;
  float: right;
  text-align: right;
}


/* ─── Membership ──── */












/* ─── Resources ──── */


#resource-news {
  display: block;
  float: left;
  clear: none;
  width: 85%;
  height: auto;
  margin: 10vh 7.5%;
}

/* Header */
#resource-news .container {
    display: block;
  float: left;
  clear: none;
  width: 100%;
  height: auto;
  margin: auto;
}

#resource-news .resources-header {
  margin-bottom:0;
  position: relative;
  
}

#resource-news .resources-header::before {
  content: 'RESOURCES & SPOTLIGHTS';
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-family: 'GeneralSans-Medium';
}

#resource-news .resources-header::after {
  display: none;
}

#resource-news .resources-header h1 {
  color: #352b29;
  clear: both;
  float: left;
  display: block;
  font-family: 'PF Regal Display Pro Italic';
  margin: 0 0 .25em 0em;
}

#resource-news .resources-header p {
  color: #676767;
  font-size: 1em;
  line-height: 1.65;
  width: auto;
  margin: 0 0 2em;
  clear: both;
  float: left;
  display: block;
}

/* Grid — gold hairline borders */
#resource-news .stories-grid {
  clear: both;
  width:70%;
  height: auto;
  display: block;
  float: left;
   display: grid; 
  grid-auto-flow: row dense; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    ". ."
    ". ."; 
}


/* Events */
#resource-news .eventslide {
  clear: none;
  width: 30%;
  height: 100%;
  display: block;
  float: right;
}








/* ─── Resources ──── */




























}


    /* Desktop Layout:1080px to a max of 1440px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1440px) {
	
	
	
	
	
	
	
	
	
	
}
    
        /* Desktop Layout: 1440px to a max of 1920px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1920px) {
	


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	
	
	
}
            /* Desktop Layout: 1920px to a max of 2400px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 2400px) {
	



	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	


}