:root{
	/* Colors */
	--cloud-tint-1:#F3F3F0;
	--cloud-tint-2:#E3DED7;
	--cloud-tint-3:#C8C0B8;
	--cloud-tint-4:#6B635C;
	--peach:#E99F7B;
	--white:#FFFFFF;
	--black:#000000;
	--ocean-90:#0E2349;
	--ocean-60:#4A73B6;
	--ocean-30:#87A7DC;
	--ocean-10:#BDD4F7;
	--ocean-05:#D9E8FF;
	--ocean-subtle:#D9E8FF;
	--sunbeam-40:#F0F3BB;
	--crimson:#641B2E;
	--crimson-subtle:#F0D5DC;
	--seaglass:#08908C;
	--harvest-subtle:#FFD7C7;
	--sunflower-subtle:#FFEABA;
	--text-neutral:#5A5A58;
	--accentyellow:#F0F3BB;
	--accentpink: #D84B8A;
	--harvest-stark: #3D2218;


	/* Sizing */
	--size-4: 4px;
	--size-8: 8px;
	--size-12: 12px;
	--size-14: 14px;
	--size-15: 15px;
	--size-16: 16px;
	--size-18: 18px;
	--size-20: 20px;
	--size-24: 24px;
	--size-28: 28px;
	--size-32: 32px;
	--size-36: 36px;
	--size-40: 40px;
	--size-44: 44px;
	--size-48: 48px;
	--size-56: 56px;
	--size-64: 64px;
	--size-72: 72px;
	--size-80: 80px;
	--size-88: 88px;
	--size-96: 96px;
	--size-104: 104px;

	  /* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;

	/* Typography */
	--font-body: 'Inter', sans-serif;
	--font-heading: 'STIX Two Text', serif;

	/* Transitions */
	--transition: all 0.3s ease;

}


*{ margin:0px; padding:0px; outline:0px; box-sizing: border-box;}
*, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
a{text-decoration:none; color:var(--ocean-90); transition: var(--transition);}
a:hover{transition: var(--transition); color:var(--accentpink);}
a img, img{border:0px; outline:none;}
img{max-width:100%; height:auto;}
a, input[type="submit"], button{outline:none;  }
.clear{clear:both;}
::-moz-placeholder{ opacity:1; }
input[type=submit], button, select{ -moz-appearance: none;-webkit-appearance: none;}
input, select, button, textarea{font-family: var(--font-body); font-weight:400;}
input[type=submit], button{ cursor:pointer;transition: var(--trns);}
input[type="submit"], input[type="text"], input[type="date"], input[type="time"], input[type="search"], button, input[type="email"], input[type="tel"], textarea, select{-webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; border:0;}
h1, h2, h3, h4, h5, h6, p, ul, li, label, input, textarea, img, submit, button, a{ margin: 0px; padding: 0px; outline: none; list-style: none;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {order: 0;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align:baseline;}
html {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-size: 62.5%;overflow-y: scroll;-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;scroll-behavior: smooth;}
q {-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none;quotes: none;}
a:focus {outline:0;outline: 0;}
a:hover,
a:active {outline: 0;}
a img {border: 0;}
input::-webkit-input-placeholder { opacity: 1; }
input::-moz-placeholder { opacity: 1; }

body{color: var(--black); font-family: var(--font-body); font-weight:400; font-size:var(--size-16); line-height:calc(var(--size-16) + 4px); position:relative;}
strong, b{ font-weight:700;}

/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; margin: var(--size-20) 0; }

h1, .x-large{ font-size: var(--size-56); line-height: calc(var(--size-56) + 4px); }
h2, .large{ font-size: var(--size-48); line-height: calc(var(--size-48) + 4px); }
h3, .medium{ font-size: var(--size-40); line-height: calc(var(--size-40) + 4px); }
h4, .small{ font-size: var(--size-32); line-height: calc(var(--size-32) + 4px); }
h5, .title-large{ font-size: var(--size-28); line-height: calc(var(--size-28) + 4px); }
h6, .title-medium{ font-size: var(--size-24); line-height: calc(var(--size-24) + 4px); }
.title-small{ font-size: var(--size-20); line-height: calc(var(--size-20) + 4px); }
.body-large{ font-size: var(--size-18); line-height: calc(var(--size-18) + 2px); }
.body-medium{ font-size: var(--size-16); line-height: calc(var(--size-16) + 4px); }
.body-small{ font-size: var(--size-14); line-height: calc(var(--size-14) + 4px); }
.label-small{ font-size: var(--size-12); line-height: calc(var(--size-12) + 4px); }

/* Width Utilities */
.w-100 { width: 100%; }
.w-90  { width: 90%; }
.w-80  { width: 80%; }
.w-75  { width: 75%; }
.w-70  { width: 70%; }
.w-66  { width: 66.666%; }
.w-60  { width: 60%; }
.w-50  { width: 50%; }
.w-40  { width: 40%; }
.w-33  { width: 33.333%; }
.w-30  { width: 30%; }
.w-25  { width: 25%; }
.w-20  { width: 20%; }


/* Font Weights and Families */
.regular{ font-weight: 400;}
.fontmedium{ font-weight: 500;}
.fontbold{ font-weight: 700;}
.semibold{ font-weight: 600;}
.stixtwo{ font-family: 'STIX Two Text', serif;}
.inter{ font-family: 'Inter', sans-serif;}

p{margin: var(--size-20) 0;}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child{ margin-bottom: 0;}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child{ margin-top: 0;}

p:empty{ display: none!important;}

.btn{display: inline-flex; padding: var(--size-15) var(--size-24); font-size: var(--size-16); line-height: 20.4px; font-weight: 600; color: var(--white); background-color: var(--ocean-90); border: 1px solid var(--ocean-90); border-radius: 50px; justify-content: center; align-items: center; gap: var(--size-8); }
.btn:hover{ background-color: var(--ocean-60); color: var(--white); transition: var(--transition); border-color: var(--ocean-60);}

.btn-secondary{ padding: var(--size-12) var(--size-16) 10.4px; font-size: var(--size-12); line-height: 15px; letter-spacing: 0.7px; text-transform: uppercase; font-weight: 700; }

.btn.ocean-10{ background-color: var(--ocean-10); border-color: var(--ocean-10); color: var(--ocean-90);}
.btn.ocean-10:hover{ background-color: var(--ocean-30); border-color: var(--ocean-30);}

.btn.ocean-60{ background-color: var(--ocean-60); border-color: var(--ocean-60); color: var(--white);}
.btn.ocean-60:hover{ background-color: var(--ocean-90); border-color: var(--ocean-90);}

.btn.border-white{ background-color: transparent; border-color: var(--white); color: var(--white);}
.btn.border-white:hover{ background-color: var(--white); border-color: var(--white); color: var(--ocean-90);}

.btn.border-ocean90{ background-color: transparent; border-color: var(--ocean-90); color: var(--ocean-90);}
.btn.border-ocean90:hover{ background-color: var(--ocean-90); border-color: var(--ocean-90); color: var(--white);}


.btn.accentyellow{ background-color: var(--accentyellow); border-color: var(--accentyellow); color: var(--ocean-90);}
.btn.accentyellow:hover{ background-color: var(--cloud-tint-3); border-color: var(--cloud-tint-3);}


.gap-24{ gap: var(--size-24);}
.gap-20{ gap: var(--size-20);}
.gap-16{ gap: var(--size-16);}
.gap-12{ gap: var(--size-12);}
.gap-8{ gap: var(--size-8);}



/* Background Color Utilities */
.cloudtint10{ background-color: var(--cloud-tint-1);}
.sunbeam40{ background-color: var(--sunbeam-40);}
.ocean05{ background-color: var(--ocean-05);}
.ocean90{ background-color: var(--ocean-90);}
.white{ background-color: var(--white);}
.ocean10{ background-color: var(--ocean-10);}
.peach{ background-color: var(--peach);}

/* Text Color Utilities */
.textocean90{ color: var(--ocean-90);}
.textoceansubtle{ color: var(--ocean-subtle);}


/* Padding Utilities */
.py8{ padding: var(--size-8) 0;}
.py12{ padding: var(--size-12) 0;}
.py16{ padding: var(--size-16) 0;}
.py20{ padding: var(--size-20) 0;}
.py24{ padding: var(--size-24) 0;}
.py32{ padding: var(--size-32) 0;}
.py40{ padding: var(--size-40) 0;}
.py64{ padding: var(--size-64) 0;}
.py104{ padding: var(--size-104) 0;}
.pb64{ padding-bottom: var(--size-64);}


/* Margin Utilities */
.mt8{ margin-top: var(--size-8);}
.mt16{ margin-top: var(--size-16);}
.mt20{ margin-top: var(--size-20);}
.mt24{ margin-top: var(--size-24);}
.mt32{ margin-top: var(--size-32);}
.mt40{ margin-top: var(--size-40);}
.mt50{ margin-top: 50px;}
.mb40{ margin-bottom: var(--size-40);}
.mb50{ margin-bottom: 50px;}
.mb32{ margin-bottom: var(--size-32);}
.mb24{ margin-bottom: var(--size-24);}
.mb20{ margin-bottom: var(--size-20);}
.mb16{ margin-bottom: var(--size-16);}

.block{ display: block;}

.hubcontainer{ max-width: 1352px; margin: 0 auto; padding: 0 20px; width: 100%;}

.text-center { text-align: center; }
.text-white { color: var(--white); }
.flex { display: flex;}
.flex-between { display: flex; justify-content: space-between; align-items: center;}
.flex-center { display: flex; justify-content: center; align-items: center;}

.menutoggle{ display: none;}
.buttonwrap{ width: 100%; display: block;}
.buttonwrap span{ display: inline-block;}


/* Header Style */
body{ padding-top: 120px;}
.hubheader{ width: 100%; position: fixed; top: 0; left: 0; will-change: transform;  transition: transform 0.3s ease; z-index: 9999; background-color: var(--ocean-90); }
.hubheader.is-fixed{ transform: translateY(-32px); transition: transform 0.3s ease;}

.promoribbon{ width: 100%; background-color: var(--peach); text-align: center; padding: var(--size-8) var(--size-32);}
.promoribbon p{ color: var(--black); font-weight: 700; font-size: var(--size-14); line-height: var(--size-16);  margin: 0;}
.promoribbon p i{ font-style: italic;}

.hubheadermain{ padding: var(--size-24) 0; position: relative;}
.hublogo{ width:350px; }
.hublogo img{ display: block; margin: 0; width: 133px;}

.hubnav{ width: calc(100% - 700px); display: flex; justify-content: center;}
.hubnav ul{ display: flex; gap: var(--size-12);}
.hubnav ul li a{ color: var(--cloud-tint-1); font-size: var(--size-16); line-height: var(--size-18); font-weight: 500; transition: var(--transition); padding: var(--size-8);}
.hubnav ul li a:hover{ color: var(--accentyellow); transition: var(--transition);}

.hubaction{ display: flex; align-items: center; gap: var(--size-12); justify-content: end; width: 360px;}
.hubsearch{ width: 220px; position: relative; }
.hubsearch input{ width: 100%; height: var(--size-40); background: transparent; padding: var(--size-4) var(--size-40) var(--size-4) var(--size-16); border: 1px solid var(--ocean-60); border-radius: var(--size-40); font-size: var(--size-12); color: var(--ocean-10); line-height: var(--size-16); }
.hubsearch button{ position: absolute; right: var(--size-16); top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;}
.hubsearch button img{ width: var(--size-16); display: block;}

.hubsearch input::-webkit-input-placeholder { color: var(--ocean-10); }
.hubsearch input::-moz-placeholder { color: var(--ocean-10);}
.hubsearch input:focus::-webkit-input-placeholder { color: var(--ocean-10); }
.hubsearch input:focus::-moz-placeholder { color: var(--ocean-10);}

.hubdonate .btn::after{ content: url('../images/heart-icon.svg'); display: inline-block; width: var(--size-16); height: var(--size-16); }


.outreachmenu{ display: none; width: 100%; position: absolute; top: 100%; left: 0; background: var(--ocean-90); padding: 28px 0; border-radius: 0 0 12px 12px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);}
.outreachWrap{ width: 100%; display: flex; justify-content: space-between;}
.outreachMenuLeft{ width: 288px;}
.outreachMenuLeft h5{ padding-bottom: 8px; margin: 0 0 35px; border-bottom: 1px solid var(--ocean-30); font-family: var(--font-body); color: var(--ocean-30); font-size: 14px; text-transform: uppercase; font-weight: 600;line-height: 18px;letter-spacing: 0.28px;}
.outreachMenuLeft ul{ display: flex; flex-direction: column; gap: 12px;}
.outreachMenuLeft ul li a{ color: var(--white); font-size: 16px; line-height: 20px; font-weight: 400; display: inline-block;}
.outreachMenuLeft ul li a:hover{ color: var(--accentyellow); text-decoration: underline; text-underline-offset: 3px;}


.menuFeaturedPost{ display: flex; gap: 12px;}
.menuFeaturedText{ width: 210px;}
.menuFeaturedText h6{ margin: 0 0 12px; font-family: var(--font-body); color: var(--cloud-tint-1); font-size: 12px; font-weight: 400; line-height: 14px; text-transform: uppercase;}
.menuFeaturedText h3{color: var(--cloud-tint-1); font-size: 20px; font-weight: 400; line-height: 24px; margin: 0 0 12px;}
.menuFeaturedText h3 a{ color: var(--cloud-tint-1); text-decoration: none;}
.menuFeaturedText h3 a:hover{ color: var(--accentyellow); text-decoration: underline; text-underline-offset: 3px;}
.menuFeaturedText p{ margin: 0; font-size: 12px; line-height: 14px; color: var(--cloud-tint-1);}

.outreachmenu.active {display: block;}

.hubnav ul li.active a{ color: var(--accentyellow);}







.menuFeaturedImage{ width: 535px;}
.menuFeaturedImage img{ display: block; width: 100%; border-radius: 4px;}






/* Footer Style */
.hubfooter{ width: 100%; position: relative;}

.hubsignup h3{ margin: 0; color: var(--ocean-90); font-size: 36px;font-weight: 400; line-height:52.2px; letter-spacing: -0.72px;}
.hubsignup h3.textoceansubtle{ color: var(--ocean-subtle);}
.hubklvform{ position: relative; width: 457px;}
.hubklvform input{ width: 100%; height:52px; padding:0 125px 0 22px; font-size: var(--size-16); border: 0; border-radius: var(--size-48); background-color: var(--white); color: var(--text-neutral);}
.hubklvform button{ position: absolute; height:52px; width: 120px; font-weight: 600; font-size: var(--size-16); right: -2px; top: 0;}

.hubftrowmain{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;}
.hubft_logo{ width: 202px;}
.hubft_logo img{ display: block; width: 40px;}
.hubft_logo p{ margin: 40px 0; font-size: 16px; font-weight: 500; letter-spacing: -0.08px;}


.hubfootermain.py40{ padding-top: 0;}
.hubftmenus{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px;}
.hubftmenucol{ width: 300px;}
.hubftmenucol h6{ color: var(--ocean-60); font-family: var(--font-body); margin: 0 0 24px; padding: 0 0 8px; border-bottom: 1px solid var(--ocean-60); font-size: 12px; font-weight: 700; line-height: 15px; letter-spacing: 0.5px; text-transform: uppercase;}
.hubftmenucol ul{ display: flex; flex-direction: column; gap: 8px;}
.hubftmenucol ul li a{ color: var(--ocean-90); font-size: 16px; font-weight: 500; line-height: 145%; letter-spacing: -0.08px;}

.hubftmenucol ul li.active a, .hubftmenucol ul li a:hover{ color: var(--accentpink); text-underline-offset: 2px; text-decoration: underline;}

.hubsociallinks{ width: 100%; margin: 20px 0;}
.hubsociallinks ul{ display: flex; gap: var(--size-24); align-items: center; justify-content: flex-end;}
.hubsociallinks ul li a svg{ display: block; width: 24px; height: 24px; transition: var(--transition);}
.hubsociallinks ul li a:hover .icon:not(.fb) svg path{ fill: var(--accentpink); transition: var(--transition);}
.hubsociallinks ul li a:hover .icon.fb svg path{ stroke: var(--accentpink); transition: var(--transition);}

.hubcopytext{ width: 100%; text-align: right;}
.hubcopytext p{ color: var(--ocean-90); font-size: 10.8px; line-height: 17px; letter-spacing: 0.44px;}
.hubcopytext p b{ font-weight: 600;}
.hubcopytext p a{ color: var(--ocean-90); }
.hubcopytext p a:hover{ color: var(--accentpink);  text-decoration: underline; text-underline-offset: 2px;}






/* Homepage Style */
body{ background: var(--ocean-90);}

.hubherosection{ width: 100%; position: relative; min-height: 650px; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; padding: var(--size-40) 0;}

.hubherocontent{ max-width: 570px; color: var(--white);}
.hubherocontent h6{ font-size: var(--size-12); font-weight: 500; margin: 0 0 8px; line-height: var(--size-18); font-family: var(--font-body);}
.hubherocontent h1{ font-size: var(--size-48); line-height: 50px; margin: 0 0 var(--size-20);}
.hubherocontent p{ font-size: var(--size-16); line-height: calc(var(--size-16) + 4px); margin: 20px 0 0;}
.hubgifts .icon img{ width: var(--size-64); display: block; margin: 0 auto;}

.imgtextsection{ padding: var(--size-64) 0;}
.imgtextsection .hubimg{ width: 58%;}
.imgtextsection .hubimg img{ display: block; border-radius: var(--size-4); width: 100%;}
.imgtextsection .hubimgtext{ width: 34%;}
.imgtextsection .hubimgtext h2{ font-size: var(--size-40); line-height: var(--size-44); margin: var(--size-20) 0 0; color: var(--ocean-90);}
.imgtextsection .hubimgtext p{ margin: var(--size-12) 0 0; color: var(--ocean-90);}

.hubimgcardsection .flex{ justify-content: space-between;}
.hubimgcard_wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;}
.hubimgcard_title{ width: 260px;}
.hubimgcard_title h2{ font-size: var(--size-32); line-height: var(--size-36); margin:0 0 var(--size-12); color: var(--ocean-05);}


.hubimgcard_box{ width: 506px; display: flex; border-radius: 4px; padding: 20px; flex-direction: column; justify-content: flex-end;}
.hubimgcard_box h3{ color: var(--ocean-90);font-size: var(--size-24); line-height: var(--size-28); margin:0;}
.hubimgcard_img{ width: 506px; }
.hubimgcard_img img{ display: block; border-radius: var(--size-4); width: 100%;}

.mediaplayer_section img{ display: block; margin: 0 auto;}
.abidefeature_section{ width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; padding-top: var(--size-64);}
.abidefeature_section .hubcontainer{ display: flex; flex-wrap: wrap; justify-content: space-between; position: relative;}
.abidefeature_section .abideimage{ width: 37%;}
.abidefeature_section .abideimage img{ display: block; width: 100%;}
.abidefeature{ width: 39%;}
.abidefeature h2{ margin: 0; color: var(--ocean-90);}
.abidefeature p{ margin: var(--size-20) 0 0; color: var(--ocean-90);}

.abidereview{ width: 320px; display: flex; width: 313px; padding: var(--size-12) var(--size-16); flex-direction: column; align-items: flex-start; margin-top: var(--size-40); border-radius: 4px 20px; background: rgba(255, 255, 255, 0.50); box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.10);}
.abidereview p{ font-size: var(--size-14); line-height: 16px; padding-right: 40px; color: var(--cloud-tint-4); font-weight: 500; margin: 12px 0 8px;}
.abidereview h6{ font-family: var(--font-body); font-size: var(--size-12); line-height: 14px; color: var(--cloud-tint-4); font-weight: 400; margin: 0;}
.abidereview .icon{ width: 100%; display: flex; align-items: flex-end; justify-content: flex-end;}
.abidereview .icon img{ width:39px; display: block;}

.today_playbtn{ position: absolute; bottom: 0; left: 20px;}
.today_playbtn .btn{ display: flex; border: 0; border-radius: 12px 12px 0 0; padding: 12px 20px 20px; background: var(--seaglass); color: var(--white);}
.today_playbtn .btn:hover{ background: var(--accentpink); color: var(--white);}
.today_playbtn .btn::after{ content: url('../images/down-arrow.svg'); display: inline-block; width: 5px; height: 16px; }

.everypurchase h4{color: var(--ocean-90); font-family: var(--font-body); font-size: 20px; font-style: italic; font-weight: 400; line-height: 120%; letter-spacing: 0.2px;}

.hubreviews{ width: calc(100% + 20px); margin-left: -10px; position: relative;}
.customreviewslider{ width: 100%; position: relative;}
.customreviewslider .item{ padding: 0 10px; }
.customreviewslider .hubreviewbox{ background-color: var(--ocean-10); border-radius: var(--size-4); padding:var(--size-12) var(--size-20); height: 152px; display: flex; flex-direction: column;}
.hubreviewbox p{ font-size: var(--size-14); line-height: 16px; padding-right: 40px; color: var(--ocean-90); font-weight: 500; margin: 12px 0 8px;}
.hubreviewbox p{  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;}
.hubreviewbox h6{ font-family: var(--font-body); font-size: var(--size-12); line-height: 14px; color: var(--cloud-tint-4); font-weight: 400; margin: 0;}
.hubreviewbox .icon{ width: 100%; display: flex; align-items: flex-end; justify-content: flex-end;}
.hubreviewbox .icon img{ width:39px; display: block;}

.slick-dots{ display: flex; align-items: center; justify-content: center; gap: var(--size-8); margin: var(--size-24) 0 0; padding: 0; list-style: none;}
.slick-dots li button{ width: var(--size-8); height: var(--size-8); border-radius: 50%; background-color: var(--ocean-90); opacity: 0.3; font-size: 0px; border: none; padding: 0; cursor: pointer;}
.slick-dots li.slick-active button{ opacity: 1;}
.slick-dots li{ font-size: 0px; line-height: 8px;}



.hubdivider{ width: 100%; height: 1px; background-color: var(--cloud-tint-3);}

.storytitle{ display: flex; gap: var(--size-40); align-items: center;}
.storytitle h2{ font-size: var(--size-56); line-height: 60px; margin:0; color: var(--ocean-90);}
.storytitle::after, .storytitle::before{ content: ''; flex-grow: 1; height: 1px; background-color: var(--cloud-tint-3);}


.hubstoriesmain{ width: 100%; display: flex;  flex-wrap: wrap; gap: 20px;}
.hubstoriesleft{ width: calc(67% - 10px); display: flex; row-gap: 40px; column-gap: 20px; flex-wrap: wrap; height: 100%;}
.hubstoriesright{ width: calc(33% - 10px); display: flex; flex-direction: column; gap: var(--size-24); flex-wrap: wrap; }
.hubstoryfull{ width: 100%; display: flex; flex-direction: column;}
.hubstoryhalf{ width: calc(50% - 10px); display: flex; flex-direction: column;}
.hubstoryposter{ width: 100%; overflow: hidden; position: relative; border-radius: 4px;}
.hubstoryposter img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--size-4); width: 100%; transition: all ease-in-out 0.6s;}

.hubstorybox:hover .hubstoryposter img{ transform: scale(1.05); transition: all ease-in-out 0.6s;}
.hubstoryposter a{ display: block; width: 100%; height: 100%; position: relative; }
.hubstoryhalf .hubstoryposter{ height: 400px;}
.hubstoryfull .hubstoryposter{ height: 580px;}



.storymeta_data{ display: flex; text-transform: uppercase; gap: var(--size-24); font-size: var(--size-12); line-height: var(--size-14); color: var(--ocean-90); margin: var(--size-24) 0 0;}
.storymeta_data .postauthor a{ color: var(--ocean-90); text-decoration: underline; text-underline-offset: 2px;}
.storymeta_data .postauthor a:hover{ color: var(--accentpink);}	

.hubstorybox h3{ color: var(--ocean-90); font-size: 28px; line-height: 30px; margin: 8px 0 0;}
.hubstorybox h3 a{ color: var(--ocean-90); text-decoration: none;}
.hubstorybox:hover h3 a{ color: var(--accentpink); text-decoration: underline; text-underline-offset: 2px;}	
.hubstorybox p{ color: var(--ocean-90); font-size: 14px; line-height: 18px; font-weight: 500; margin: 8px 0 0;}
.hubstorybox p{ display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;  overflow: hidden;}

.hubstoriesright .hubstoryhalf{ width: 100%;}
.hubstoriesright .hubstoryhalf .hubstoryposter{ height: 430px;}

.hubquoteoftheday{ width: 100%; border-radius: 4px; background: var(--harvest-subtle); padding: var(--size-16) var(--size-24);}
.hubquoteoftheday p{ font-size: 10px; line-height:14px; color: var(--ocean-90); font-weight: 500; margin: 12px 0 0; text-transform: uppercase; color: var(--harvest-stark);}
.hubquoteoftheday h5{color: var(--harvest-stark); font-size: var(--size-20); line-height: var(--size-24); margin: 0;}
.hubquoteoftheday .quoteicon{ margin: 0 0 24px; display: flex; width: 100%; justify-content: space-between; align-items: center; }
.hubquoteoftheday .quoteicon img{ width: var(--size-40); display: block;}
.hubquoteoftheday .quoteicon span{ display: inline-block; text-transform: uppercase; color: var(--harvest-stark); font-size: 10px; line-height: 12px; font-weight: 500; padding: 4px 0; border-bottom: 1px solid var(--harvest-stark);}

.shopslidermain{ width: 100%; position: relative; padding-left: calc(50vw - 666px); overflow: hidden; }
.shopslidermain h2{margin-bottom: var(--size-32); }
.shopsliderwrapper{ width: calc(100% + 100px);}
.shopslider{ width: 100%; position: relative;}
.shopslider .productitem{ width: 100%; padding:0 10px;}
.productitem h3{ color: var(--ocean-90); font-size: var(--size-20); line-height: 22px; margin: 0;}
.productitem .price{ width: 100%; display: block; margin: 8px 0 0; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--ocean-90);}
.shopcardimg{ width: 100%; display: flex; align-items: center; justify-content: center; position: relative; background-color: #fff; overflow: hidden; border-radius: 4px; height: 472px; margin: 0 0 var(--size-20);}
.shopcardimg .shoptag{ position: absolute; top: 16px; left: 16px; border-radius: 0 24px 24px 24px; background: var(--sunbeam-40); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);}
.shopcardimg .shoptag{color: var(--ocean-90); padding: 8px 12px; display: inline-block; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.2px; text-transform: uppercase;}
.shopcardimg img{ display: block; margin: 0 auto; max-height: 412px; max-width: 90%;}
.shopslider .slick-arrow{ position: absolute; top: -62px; right: calc(50vw - 600px); width: 40px; height: 30px; font-size: 0px; background-color: var(--ocean-05); background-repeat: no-repeat; background-position: center; background-size: 16px; border-radius: 99px; }
.shopslider .slick-arrow:hover{ background-color: var(--ocean-30);}
.shopslider .slick-arrow.slick-prev{ background-image: url(../images/arrow-left.svg); right: calc(50vw - 556px);}
.shopslider .slick-arrow.slick-next{ background-image: url(../images/arrow-right.svg);}
.shopcategory{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; flex-direction: column; padding: 12px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.shopcardimg .textbox{ width: 100%; margin-bottom: 0; margin-top: auto;}
.shopcardimg .textbox h4{ color: var(--ocean-90); font-size: 32px; line-height: 36px; margin: 0;}
.shopcardimg .textbox p{ color: var(--ocean-90); opacity: 0.6; margin: 8px 0 0; font-size: 16px; line-height: 20px; font-weight: 500;}
.shopcardimg .btn{ margin-top: 20px;}
.shopcardimg .white_textbox{ width: 100%; margin-bottom: 0; margin-top: auto; background: #fff; padding: 20px 12px; border-radius: 4px;}
.shopcardimg .white_textbox h4{ color: var(--ocean-90); font-size: 20px; line-height: 24px; margin: 0;}
.shopcardimg .white_textbox p{ color: var(--ocean-90); opacity: 0.6; margin: 4px 0 0; font-size: 12px; line-height: 14px; font-weight: 400;}
.shopcategory .icon{ display: block; padding: 8px; width: 100%; }
.shopcategory .icon img{ display: block; max-width: 42px; margin: 0;}






/* Audio Player */
.mediaplayer_section{ padding: var(--size-24) 0;}
.ggr-audio-card {display: flex; align-items: center; background: #ffffff;max-width: 100%;}
/* Cover */
.ggr-audio-cover img {width: 124px; height: 124px; object-fit: cover; border-radius: 12px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);}
/* Text */
.ggr-audio-info {padding-left: 26px; padding-right: 12px;}
.ggr-audio-title { min-width: 206px; margin: 0 0 4px; font-size: 20px; line-height: 24px; font-family: var(--font-body); color: var(--black); font-weight: 400; line-height: 24px; }
.ggr-audio-scripture {font-size: 14px; line-height: 18px; color: var(--text-neutral); margin-bottom: 4px;}
.ggr-audio-author {font-size: 14px; line-height: 18px; color: var(--text-neutral);}
/* Player */
.ggr-audio-player {display: flex; flex: 1; border-radius: 4px; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25); align-items: center; gap: 15px; padding: 16px;}
.ggr-audio-btn {width: 40px; min-width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--seaglass); color: #fff; font-size: 15px; cursor: pointer;}
.ggr-audio-btn.pause {background: var(--accentpink);}
.ggr-audio-bar {display: flex;align-items: center;gap: 8px;width: 100%;}
.ggr-audio-time {font-size: 10px;color: #2A2A28; min-width: 35px; text-align: center;}
.ggr-audio-range {flex: 1; height: 3px; appearance: none; background: var(--text-neutral); border-radius: 2px;}

/* Base range style */
.ggr-audio-range { -webkit-appearance: none;  width: 100%;  height: 4px;  border-radius: 2px;  background: #e5e7eb;  outline: none;  cursor: pointer;}
.ggr-audio-range::-webkit-slider-runnable-track {  height: 4px;  border-radius: 2px;
  background: linear-gradient(    to right,
    #2A2A28 0%,
    #2A2A28 var(--progress),
    #e5e7eb var(--progress),
    #e5e7eb 100%
  );
}

.ggr-audio-range::-webkit-slider-thumb {  -webkit-appearance: none;  width: 14px;  height: 14px;  background: #2A2A28;  border-radius: 50%;  margin-top: -5px;}
.ggr-audio-range::-moz-range-track {  height: 4px;  background: #e5e7eb;  border-radius: 2px;}
.ggr-audio-range::-moz-range-progress { height: 4px;  background: #2A2A28;  border-radius: 2px;}
.ggr-audio-range::-moz-range-thumb {  width: 14px;  height: 14px;  background: #2A2A28;  border-radius: 50%;  border: none;}
.menutoggle{ display: none;}

.back-to-top { display:inline-flex; cursor: pointer; position: fixed; z-index: 99; transition: all 0.5s ease-in-out; bottom: 0; transform: translateY(60px); right: 15px; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 4px; background: var(--ocean-30);}
.back-to-top svg{ width: 22px; height: 22px; display: block;}
.back-to-top svg path{ fill: var(--ocean-90);}
.back-to-top.is-visible { transition: all 0.5s ease-in-out; transform: translateY(-15px);}
.back-to-top:hover{ background-color: var(--ocean-60); transition: all 0.5s ease-in-out;}
.returnMenu{ display: none;}



/* Responsive: Tablet and Mobile adjustments */
@media (max-width: 1320px) {
.imgtextsection .hubimg {width: 54%;}
.imgtextsection .hubimgtext {width: 40%;}
.hubimgcard_wrap {width: 76%;}
.hubimgcard_title {width: 24%;}
.hubimgcard_img, .hubimgcard_box {width: calc(50% - 8px);}
.hubftmenus {width: calc(80% - 16px);}
.hubft_logo {width: calc(20% - 16px);}
.hubftmenucol {width: calc(33.33% - 16px);}
.shopslidermain {padding-left: 20px;}
.shopslider .slick-arrow {right: 120px;}
.shopslider .slick-arrow.slick-prev {right: 168px;}
.abidefeature {padding-bottom: 88px;}
.hubheadermain .hublogo {width: 140px;}
.hubaction {width: 345px;}
.hubnav {width: calc(100% - 485px); justify-content: initial;padding-left: 20px;}
}

@media (max-width: 1140px) {
 .menuFeaturedImage {width: 480px;}
 .outreachMenuLeft {width: 232px;}

}


@media (max-width: 1040px) {
.hubftmenus {width: 100%;}
.hubft_logo {width: 100%; padding-bottom: 16px;}
.hubft_logo p {margin: 20px 0;}
.imgtextsection .hubimgtext {width: 48%;}
.imgtextsection .hubimg {width: 48%;}






}

@media (max-width: 979px) {
body{ padding-top: 95px;}
.hubftmenucol {width: 100%;}
.hubsociallinks ul {justify-content: center;}
.hubcopytext {text-align: center;}
.hubsignup h3 {font-size: 32px;line-height: 36px;}
.py104 {padding: var(--size-96) 0;}
h2, .large {font-size: var(--size-40); line-height: calc(var(--size-40) + 4px);}
h4, .small {font-size: var(--size-28); line-height: calc(var(--size-24) + 6px);}
.hubgifts .icon img {width: var(--size-44);}
.hubimgcardsection .flex{ flex-wrap: wrap; flex-direction: column; gap: 38px;}
.hubimgcard_title{ width: 100%; display: flex; align-items: center; justify-content: space-between;}
.hubimgcard_title h2{ margin: 0;}
.hubimgcard_wrap{ width: 100%;}
.hubimgcard_box h3 {font-size: var(--size-20); line-height: var(--size-24);}
.py64 {padding: var(--size-48) 0;}
.pb64 {padding-bottom: var(--size-48);}
.pt64 { padding-top: var(--size-48);}
.imgtextsection{padding: var(--size-48) 0;}
.abidefeature_section{padding-top: var(--size-48);}
.imgtextsection .hubimgtext {width: 100%; padding-top: 48px;}
.imgtextsection .hubimg {width: 100%;}
.imgtextsection .hubcontainer{ flex-wrap: wrap;}
.abidefeature_section .hubcontainer{ flex-wrap: wrap;}
.abidefeature{ order: 2; width: 100%;}
.abidefeature_section .abideimage{ width: 100%; padding: 0 0 40px;}
.abidefeature_section .abideimage img{ max-width: 500px; margin: 0 auto;}
.today_playbtn {left: 0;right: 0;margin: 0 auto;width: 234px;}
.ggr-audio-card{ flex-wrap: wrap; justify-content: center;}
.ggr-audio-player {flex: initial; width: 100%; border-radius: 4px; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25); margin: 12px 0 0;}
.storytitle h2 {font-size: 40px; line-height: 44px;}
.hubstoriesleft {width: 100%;}
.hubstoriesright {width: 100%; gap: 20px; flex-direction: initial;}
.hubstoriesright .hubstoryhalf, .hubquoteoftheday {width: calc(50% - 10px);}
.hubstoriesright .hubstoryhalf:nth-child(3){ display: none;}
.hubstoryfull .hubstoryposter{ height: 480px;}
.hubstoryhalf .hubstoryposter, .hubstoriesright .hubstoryhalf .hubstoryposter {height: 342px;}
.hubquoteoftheday{height: 342px; display: flex; flex-direction: column; justify-content: flex-end; justify-content: end;}
.hubquoteoftheday .quoteicon{margin-top: 0; margin-bottom: auto;}
.hubheadermain{ padding: 18px 0;}
.hubnav{ display: none; width: 100%;}
.hubaction{ display: none; width: 100%;}
.hubheadermain .hublogo{ width: 100%; text-align: center; display: flex; align-items: center; justify-content: center;}
.hublogo img{ display: block; margin: 0 auto;}
.hubheadermain .hubcontainer{ position: relative; flex-wrap: wrap;}
.menutoggle{ display: block; position: absolute; z-index: 11; top: -6px; right: 20px; cursor: pointer; width: 40px; height: 40px; background: url('../images/hamburger-icon.svg') no-repeat; background-size: 100%; }
.menutoggle.active{ background-image: url('../images/hamburger-icon-close.svg');}
.navopen .hubnav{ display: block; padding: 30px 0 24px;}
.hubnav ul{ flex-direction: column; gap: 0;}
.hubnav ul li{ padding: 8px 0;}
.hubnav ul li a{ font-size: 18px; line-height: 20px; font-weight: 400; padding: 0;}
.navopen .hubaction{ display: flex; align-items: center; justify-content: center; gap: 24px; flex-direction: column; padding: 0 0 6px; }
.hubaction .hubsearch{ width: 100%; max-width: 400px;}
.hubaction .hubdonate{ width: 100%; max-width: 400px;}
.hubaction .hubdonate .btn{ position: relative; width: 100%;}
.hubdonate .btn::after{ position: absolute; right: 16px; }
.hubsearch input{ text-align: center; padding: 0 40px;}
.navopen .hubheader{border-radius: 0 0 12px 12px;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);}
.navopen .hubherosection{ margin-top: -15px;}




.outreachWrap{ flex-direction: column;}
.outreachMenuLeft{ width: 100%;}
.menuFeaturedPost{ width: 100%; flex-direction: column; padding: 20px 0 0; border-top: 1px solid var(--ocean-30); margin-top: 20px;}
.menuFeaturedText{ width: 100%; }
.menuFeaturedImage{ width: 100%;}
.outreachMenuLeft h5{ margin: 0 0 15px; display: none;}
.returnMenu{ display: flex; justify-content: flex-start; margin: 0 0 30px;}
.returnMenu a{ display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 20px; font-weight: 500; color: var(--ocean-30);}
.returnMenu a svg{ width: 16px; display: block;}
.outreachmenu{top: 57px; z-index: 1;}
.outreachMenuLeft ul li{ padding: 8px 0;}
.outreachMenuLeft ul li a{font-size: 18px;line-height: 20px;font-weight: 400;padding: 0;}
.outreachMenuLeft ul{ gap: 0;}






}



@media (max-width: 767px) {
.flex-center{ flex-wrap: wrap;}

.hubklvform {width: 100%;}

.hubsignup{ text-align: center;}

h4, .small {font-size: var(--size-24); line-height: calc(var(--size-24) + 4px);}

.hubimgcard_wrap{ flex-wrap: wrap;}

.hubimgcard_img, .hubimgcard_box{ width: 100%;}

.hubimgcard_box{ padding: 80px 15px 20px;}

.flex{ flex-wrap: wrap;}

.imgtextsection .hubimgtext h2 {font-size: var(--size-32); line-height: var(--size-36);}

.hubherocontent h1, h1, .x-large {font-size: var(--size-32); line-height: var(--size-36);}

h3, .medium{font-size: var(--size-32); line-height: var(--size-36);}

h2, .large{font-size: var(--size-32); line-height: var(--size-36);}

.shopslidermain {padding-left: 10px;}

.shopslidermain h2{ padding-left: 10px; max-width: 260px;}

.everypurchase h4{ font-size: 16px; line-height: 20px; letter-spacing: initial;}

.hubreviewbox .icon {margin-bottom: 50px;}

.customreviewslider .hubreviewbox {height: 202px;}

.today_playbtn {width: calc(100% - 40px);}

.abidereview {width: 100%;}

.storytitle h2 {font-size: 32px; line-height: 36px; max-width: 170px; margin: 0 auto;}

.storytitle {gap: var(--size-24);}

.hubstoryfull .hubstoryposter {height: 230px;}

.hubstoriesright .hubstoryhalf, .hubquoteoftheday {width: 100%;}

.hubstoryhalf .hubstoryposter, .hubstoriesright .hubstoryhalf .hubstoryposter {height: 230px;}

.hubstoriesleft{ row-gap: 24px; }

.hubstoryhalf{ width: 100%;}

.hubquoteoftheday{ height: initial;}

.hubquoteoftheday .quoteicon{ margin-bottom: 24px;}

.hubstoriesright .hubstoryhalf:nth-child(3){ display: block;}

.promoribbon p{ line-height: 20px; font-weight: 600;}
body{ padding-top: 98px;}
.hubheader.is-fixed {transform: translateY(-36px);}


}



@media (max-width: 580px) {
.hubft_logo .btn{ width: 100%; text-align: center; display: block;}
.shopsliderwrapper {width: calc(100% + 200px);}
.shopslider .slick-arrow {right: 220px;}
.shopslider .slick-arrow.slick-prev {right: 268px;}

}

@media (max-width: 480px) {
.ggr-audio-cover{ width: 124px;}
.ggr-audio-info {padding-right: 0;width: calc(100% - 124px);}
.ggr-audio-title {min-width: initial;font-size: 18px;line-height: 22px;}

.promoribbon{ display: flex; align-items: center; justify-content: center; min-height: 56px;}
body{ padding-top: 118px;}
.hubheader.is-fixed {transform: translateY(-56px);}

}