/*
Theme Name: HRAAD
Theme URI: https://opencollective.com/blankslate
Author: Bryan Hadaway
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/bhadaway/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2024.2
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2024
BlankSlate is distributed under the terms of the GNU GPL
*/

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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

@font-face {
	font-family: 'ClashDisplay-Bold';
	src: url('resources/fonts/ClashDisplay-Bold.woff2') format('woff2'),
		 url('resources/fonts/ClashDisplay-Bold.woff') format('woff'),
		 url('resources/fonts/ClashDisplay-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: normal;
}

/* Colors & Global Vars */
:root {
	--color-blue: #1D3557;
	--color-blue-light: #A8DADC;
	--color-teal: #EDF9F2;
	--color-body: #313029;
	--color-red: #E63946;
	--color-white: #F8FFFB;
	
	--color-off-white: #F8FFFB;

	--gutter-sm: 20px;
	--gutter-lg: 40px;

	--margin-sm: 8px;
	--margin-md: 32px;
	--margin-lg: 40px;
	--margin-xlg: 60px;
}

::selection {
  background: var(--color-blue);
  color: var(--color-teal);
}

html, body {
    width: 100%;
    min-height: 100%;
}

body {
    margin:0;
    color: var(--color-blue);
	background-color: var(--color-teal);
	font-family: "bicyclette", sans-serif;
	font-weight: 400;
	font-style: normal;

	font-size:18px;
	font-weight: 700;
	color: var(--color-body);
}

p {
	font-size:20px;
	line-height: 173%;
	margin: 0 0 18px 0;
}

p.large, .large p { font-size:24px; line-height: 1.15; }
.small { font-size:14px; }

@media(min-width:1024px) {
	body, p { font-size:22px; }
	p.large, .large p { font-size:30px; }
	.small { font-size:18px; }
}

a {
	text-decoration:none;
	color:inherit;
}

a.underline { text-decoration:underline; }

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
	font-family: 'ClashDisplay-Bold';
	color: var(--color-blue);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: 1.4px;
	margin:0;
}

h1, .h1 { font-size:60px; }
h2, .h2 { font-size:40px; }
h3, .h3 { font-size:32px; }
h4, .h4 { font-size:24px; }
h5, .h5 { font-size:18px; }
h6, .h6 { font-size:16px; }

@media(min-width:1200px) {
	h1, .h1 { font-size:100px; }
	h2, .h2 { font-size:56px; }
	h3, .h3 { font-size:36px; }
	h4, .h4 { font-size:28px; }
	h5, .h5 { font-size:20px; }
	h6, .h6 { font-size:18px; }
}

@media(min-width:1400px) {
	h1, .h1 { font-size:140px; }
	h2, .h2 { font-size:72px; }
	h3, .h3 { font-size:40px; }
	h4, .h4 { font-size:28px; }
	h5, .h5 { font-size:20px; }
	h6, .h6 { font-size:18px; }
}

strong, b { font-weight: 700; }


/* Utility */

.clear { clear:both; }
.clear-after:after { content:''; display:block; clear:both; }
.center { text-align:center; }
.align-left { text-align:left; }
.relative { position:relative; }
.overflow-hidden { overflow:hidden; }
.width-100 { width:100%; }
.disable-transitions { transition:none !important; }
.hidden { display:none !important; }
.bg-contain { background-size:contain; background-repeat:no-repeat; }
.bg-cover { background-size:cover; background-repeat:no-repeat; }
.radius-50 { border-radius:50px; }
.radius-25 { border-radius:25px; }
.radius-20 { border-radius:20px; }
.radius-18 { border-radius:18px; }
.radius-12 { border-radius:12px; }
.circle { border-radius:999px; }
.side-margin-auto { margin-left:auto; margin-right:auto; }
.uppercase { text-transform:uppercase; }
.underline { text-decoration:underline; }
.pointer { cursor:pointer; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.z-index-1 { z-index:1; }
.side-margin-auto { margin-left:auto; margin-right:auto; }
.max-width-1000 { max-width:1000px; }
.max-width-840 { max-width:840px; }
.max-width-800 { max-width:800px; }
.max-width-700 { max-width:700px; }
.max-width-600 { 	max-width:600px; }
.max-width-400 { max-width:400px; }
.max-width-300 { max-width:300px; }
.visually-hidden { 
  /* Contain text within 1px box */
  height: 1px; 
  overflow: hidden;
  width: 1px;
  /* Keep the layout */  
  position: absolute;
  /* Remove any visible trace (e.g. background color) */
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); /* browsers in the future */
  /* Prevent the screen reader to skip spaces between words */
  white-space: nowrap;
}

/* Flex */
.flex-container { display:flex; }
.row-wrap { flex-flow: row wrap; }
.flow-column { flex-flow: column; }
.row-reverse { flex-direction: row-reverse; }
.space-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-right { justify-content: right; }
.align-center { align-items: center; }
.align-flex-end { align-items: flex-end; }
.order-1 { order:1; }
.order-2 { order:2; }
.flex-basis-75 { flex-basis:75%; }
.flex-basis-60 { flex-basis:60%; }
.flex-basis-50 { flex-basis:50%; }
.flex-basis-40 { flex-basis:40%; }
.flex-basis-33 { flex-basis:33.333333%; }
.gap-48 { gap:48px; }
.gap-32 { gap:32px; }
.flex-shrink-0 { flex-shrink:0; }
.flex-shrink-1 { flex-shrink:1; }

@media(min-width:1025px) {
	.lg-flex-basis-60 { flex-basis:60%; }
	.lg-flex-basis-50 { flex-basis:50%; }
	.lg-flex-basis-40 { flex-basis:40%; }
	.lg-flex-basis-33 { flex-basis:33.333333%; }
}


.block { display:block; }
img.block {
	display:block;
	width:100%;
}

img.object-fit-cover, img.object-fit-contain {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
}

img.object-fit-contain {
	object-fit:contain;
}

.fade-in {
	transition:opacity .5s ease .2s;
	opacity:0;
	will-change:opacity;
}

.fade-in.is-visible {
	opacity:1;
}

/* Buttons */
button{outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:inherit;border:none;cursor:pointer;line-height:inherit;overflow:visible;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:0;padding:0;text-transform:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none; background:transparent;}
button::-moz-focus-inner{border:0;padding:0;margin-top:0;margin-bottom:0;border-style:none;}

.btn {
	border-radius:999px;
	padding:0 35px;
    height: 62px;
    display: inline-block;
    font-size: 22px;
	line-height:1;
	letter-spacing: 0;
	font-family: "bicyclette", sans-serif;
	font-weight:700;
	color:var(--color-white);
	background-color: transparent;
	white-space:nowrap;
	cursor:pointer;
	outline:none;
	position: relative;
	transition: color 0.15s ease;
	z-index: 1;
	text-transform: capitalize;
	/* overflow: hidden; */
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-red);
	border-radius: inherit;
	z-index: -1;
	transition: transform 0.3s ease;
	transform-origin: center;
}

.btn:hover::before {
	transform: scale(1.15);
}

a.btn {
	line-height:62px;
}

/* @media(min-width:960px) {
	.btn {
		padding:0 35px;
		height:62px;
		font-size:22px;
	}

	a.btn {
		line-height:62px;
	}
} */

.cta-arrow {
	display:inline-block;
	width:30px;
	height:24px;
	background-image:url(resources/img/red-arrow.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}

/* Forms */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-color:none !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--color-green-dark);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #fff;
}

.input-field {
	border-radius:999px;
	padding:0 30px;
    height: 47px;
    display: block;
    font-size: 16px;
	line-height:1;
	letter-spacing: 0;
	/* font-family: "Poppins", Helvetica, sans-serif; */
	font-weight:500;
	color:var(--color-green-dark);
	background-color:transparent;
	white-space:nowrap;
	outline:none;
	border: var(--color-green-dark) 2px solid;
	position:relative;
	box-shadow: -3px 5px 0px 0px var(--color-green-dark);
	width:100%;
}

.input-field::placeholder {
	color:var(--color-blue-dark);
}

input[type="radio"] {
  appearance: none;
  background-color: transparent;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-green-dark);
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  position:relative;
  cursor:pointer;
}

input[type="radio"]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: top left;
  position:absolute;
  top:50%;
  left:50%;
  
  transition: 120ms transform ease-in-out;
/*  box-shadow: inset 1em 1em var(--color-green-dark);*/
  background:var(--color-green-dark);;
}

input[type="radio"]:checked::before {
  transform: scale(1) translate(-50%, -50%);
}

.radio-skin {
/*  font-size: 16px;*/
  line-height: 1;
  display: grid;
  grid-template-columns: 20px auto;
  gap: 10px;
}

.radio-skin label {
	cursor:pointer;
}

.radio-skin.checked label {
	font-weight:700;
}

.custom-select {
/*  min-width: 350px;*/
  position: relative;
}

.custom-select select {
  appearance: none;
  /*  safari  */
  -webkit-appearance: none;
  /*  other styles for aesthetics */
  width: 100%;
  font-size: 16px;
  padding: 0 16px;
  height:54px;
  background-color: transparent;
  border: 2px solid var(--color-tan);
  border-radius: 4px;
  color: #000;
  font-weight:600;
  cursor: pointer;
}

.custom-select select option {
	color:#000;
}

.custom-select::after {
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.custom-select::after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--color-bronze);
  top: 31%;
}

/* Flickity */

.hraad-carousel .flickity-page-dots {
	position: static;
	margin-top:60px;
}

.hraad-carousel .flickity-page-dots .dot {
	width:10px;
	height:10px;
	border-radius:999px;
	background-color:var(--color-blue);
	opacity:1;
}

.hraad-carousel .flickity-page-dots .dot.is-selected {
	background-color:var(--color-red);
}

@media(min-width:1025px) {
	.hraad-carousel .flickity-page-dots .dot {
		width:20px;
		height:20px;
	}
}

/* Pagination */

ul.pagination {
	display:flex;
	gap:6px;
	align-items:center;
	font-size:1rem;
	list-style:none;
	padding:0;
}

ul.pagination li {
/*    font-family: futura-pt-bold;*/
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    color:var(--color-orange);
}
.news-landing ul.pagination li {
	color:var(--color-green-dark);
}

ul.pagination li a {
    display: block;
    padding: 3px 10px;
	transition: all 0.15s ease;
}

ul.pagination li.active a, ul.pagination li a:hover {
    background-color: var(--color-blue);
    color: #fff;
    text-decoration: none!important;
}

/* General */
* { box-sizing:border-box; }

.container {
	max-width:calc(1280px + var(--gutter-lg) * 2);
	margin-left:auto;
	margin-right:auto;
	padding-left: var(--gutter-sm);
	padding-right: var(--gutter-sm);
}

.container.fluid {
	padding:0;
	max-width:none;
}

@media(min-width:1260px) {
	.container:not(.fluid) {
		padding-left: var(--gutter-lg);
		padding-right: var(--gutter-lg);
	}
	
/*	.scrolling-banner-section .skater-character {
		margin-right:145px;
	}*/
}

@media(min-width:960px) {
	.hide-min-960 { display:none !important; }
}

@media(max-width:1024px) {
	.flex-clear-1024 { display:block; }
}

@media(max-width:959px) {
	.hide-max-959 { display:none !important; }
	.flex-clear-959 { display:block; }
}

/* Top Nav */

.top-header {
	position:relative;
	z-index:101;
}

.top-header > .container {
	max-width:none;
}

/* .top-header > .container > .flex-container {
	margin-top:12px;
} */

.main-nav ul {
	margin:0;
	padding:0;
}

.main-nav ul li {
	list-style:none;
	font-size:28px;
	letter-spacing: 0;
	margin-bottom:42px;
	font-weight:700;
	font-family: 'ClashDisplay-Bold';
}

.main-nav ul li a {
	position:relative;
}

.main-nav ul li a:after {
	content:'';
	position:absolute;
	bottom:-6px;
	left:0;
	width:100%;
	height:3px;
	background-color:var(--color-red);
	opacity:0;
	transition:opacity 0.25s ease;
}

.main-nav ul li a:hover:after,
.main-nav ul li.current-menu-item a:after {
	opacity:1;
}

.main-nav ul li:hover,
.main-nav ul li.current-menu-item {
	color: var(--color-red);
}

/* .main-nav ul li:last-child a {
	font-size:20px;
	color:var(--color-white);
} */

.top-logo {
	display:block;
	width:200px;
	flex:0 0 200px;
	position: relative;
    /* z-index: 100; */
}

#top-search-cta {
	width:36px;
	cursor:pointer;
}

#top-search-cta svg {
	width:100%;
}

#header-search {
	position:absolute;
	z-index:999;
	top:0;
	right:0;
	height:calc(100% - 10px);
	display:flex;
	flex-flow:column;
	justify-content:center;
	background:var(--color-cream);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition: opacity .25s,visibility 0s linear .25s;
}

#header-search.open {
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transition:opacity .15s ease,visibility 0s;
}

#header-search .search-form {
	width:200px;
	transition: width 0.3s ease;
}

#header-search.open .search-form {
	width:260px;
}

#header-search-cancel {
	margin-left:10px;
	cursor:pointer;
}

.top-header .search-form input[type="submit"] {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-blue-dark);
    font-size: 16px;
    font-weight: 700;
    padding: 0 30px;
    line-height: 47px;
	opacity:0;
}

.top-header .search-form .search-input {
	background:#fff;
}

.top-header .search-form .input-field::placeholder {
	color:#afad9d;
}

.top-header .search-form svg {
	position:absolute;
	top:50%;
	right:20px;
	transform:translateY(-50%);
	pointer-events:none;
}

.top-header > .container > .flex-container {
	height:80px;
}

.main-nav ul li.current-menu-item {
	color: var(--color-red);
}

@media(min-width:960px) {
	
	.top-header > .container > .flex-container {
		column-gap:58px;
		height:135px;
		/* margin-top:50px; */
	}
	
	.top-logo {
		width:120px;
		flex:0 0 120px;
	}
	
	#top-search-cta {
		width:56px;
		flex:0 0 56px;
	}
	
	.main-nav ul {
		display:flex;
		align-items:center;
		justify-content:center;
		column-gap:40px;
	}
	
	.main-nav ul li {
		font-size:20px;
		margin-bottom:0;
		position:relative;
		font-family: "bicyclette", sans-serif;
		transition: color 0.25s ease;
	}

	.utility-nav a.btn {
		font-size:22px !important;
	}

	.nav-collapse {
		column-gap:60px;
	}
	
	#sign-in-btn-column {
		transform:translateY(-4px);
	}
	
	#top-search-cta {
/*		position:absolute;*/
		right:0;
/*		top:50%;
		transform:translateY(-50%);*/
		cursor:pointer;
	}
	
	.top-header .nav-utility {
		column-gap:32px;
		margin-left:auto;
	}
	
}

@media(min-width:1024px) {
	.main-nav ul {
		column-gap:50px;
	}
	
	.main-nav ul li:not(:last-child):after {
		transform:translate(32px, -65%);
	}
}

@media(min-width:1200px) {
	.top-logo {
		width:292px;
		flex:0 0 292px;
	}
	
	
}

@media(max-width:1023px) {
	.hide-max-1023 { display:none !important; }
}

@media(max-width:959px) {
	
	.top-header > .container > .flex-container {
	    justify-content:space-between;
		position:static !important;
	}
	
	.hamburger-nav {
	    padding: 10px;
	    transition: .3s;
	    cursor: pointer;
		margin-left:auto;
		position:relative;
		z-index:999;
		margin-right:-10px;
	}

	.hamburger-nav .lines {
	  display: block;
	  position: relative;
	  width: 50px;
	  height: 30px;
	  /* background: #000; */
	  transition: transform 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	}

	.hamburger-nav .lines:before, .hamburger-nav .lines:after {
	  display: block;
	  
	  height: 3px;
	  background: var(--color-red);
	  position: absolute;
	  left: 0;
	  content: '';
	  border-radius: 99px;
	  transform-origin: 50% 50%;
	  transition: transform 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), color 200ms ease;
	}

	.hamburger-nav .lines:before {
		top: 10px;
		width: 50px;
	}

	.hamburger-nav .lines:after {
		top: 19px;
		width: 42px;
	}

	.hamburger-nav.open .lines {
	  /* background: transparent; */
	  transform: translateY(25px);
	}

	.hamburger-nav.open .lines:before, .hamburger-nav.open .lines:after {
		top: 15px;
		background: var(--color-teal);
		width: 40px
	}

	.hamburger-nav.open .lines:before {
	  transform: rotate3d(0, 0, 1, 45deg) scale(1);
	}

	.hamburger-nav.open .lines:after {
	  transform: rotate3d(0, 0, 1, -45deg) scale(1);
	}
	
	.nav-close {
		cursor:pointer;
		width:24px;
		height:24px;
		background-image:url(/resources/img/icon-close-nav.svg);
		background-size:16px auto;
		background-position:center;
		background-repeat:no-repeat;
		margin-bottom:20px;
	}
	
	.scroll-disabled body {
		overflow:hidden;position:fixed;top:0;right:0;left:0;bottom:0;
	}

	.scroll-disabled #wpadminbar {
		display:none;
	}

	.nav-dimmer {
		opacity: 0;
		z-index: 99;
		visibility: hidden;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		transition: opacity .25s,visibility 0s linear .25s;
		background-color: rgba(0,0,0,0.6);
	}
	
	.scroll-disabled .nav-dimmer {
		opacity:1;
		visibility:visible;
		transition:opacity .8s ease,visibility 0s;
	}
	
    .top-header .nav-collapse {
        position: fixed;
        z-index: 80;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
		width: 100vw;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: var(--color-blue);
		padding:65px 20px 40px;
        transform: translateX(-100%);
        transition: transform .5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    }
	
	.top-header .nav-collapse.open {
		transform: translateX(0%);
	}
	
	#header-search {
		left:0;
		height:84px;
		border-bottom:#e6e3d5 1px solid;
		padding:0 20px;
		justify-content:center;
		align-items:center;
	}

	.main-nav ul li {
		font-size:40px;
		color:var(--color-teal);
	}
}

.hero-section {
	position:relative;
	z-index:1;
}

.hero-section .container {
	max-width:none;
}


.hero {
	aspect-ratio:1/1.46;
	background-color:#999;
	border-radius:50px;
	padding:30px 16px;
	display:flex;
	flex-flow:column;
	justify-content:flex-end;
}

.hero .video-container {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* .hero .video-container iframe {
	width:100%;
	height:100%;
} */

.hero .video-container iframe {
	box-sizing: border-box;
	width: 260%;
	height: 102%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media(min-width:960px) {
	.hero {
		padding:80px 50px;
	}
}

@media(min-width:1024px) {
	.hero {
		aspect-ratio:1/0.5625;
		padding:115px 100px;
	}

	.hero .video-container iframe {
		width: 102%;
		height: 102%;
	}
}

.featured-dogs-carousel-section {
	background-color:var(--color-blue);
	padding:220px 0 100px;
	margin-top:-145px;
}

@media(min-width:1025px) {
	.featured-dogs-carousel-section {
		padding:395px 0 100px;
		margin-top:-295px;
	}
}

/* Sections */

.alternating-item p {
	line-height:1.15;
}

.pet-card .title {
	letter-spacing:0;
}

.featured-dogs-carousel .pet-card {
	width:80%;
	margin-right:32px;
}

.featured-dogs-carousel.hraad-carousel .flickity-page-dots .dot:not(.is-selected) {
    background-color: var(--color-blue-light);
}

.featured-dogs-carousel .flickity-prev-next-button {
	top:-40px;
	left:0;
}

.flickity-button:focus {
    outline: 0;
    box-shadow: none;
}

.featured-dogs-carousel .flickity-prev-next-button, .featured-dogs-carousel .flickity-prev-next-button:hover {
	background-color:var(--color-blue-light);
}

.featured-dogs-carousel .flickity-prev-next-button.next {
	left: 65px;
}

.pet-card .inner {
	transition:transform .25s ease;
}	

/* .pet-card:hover .inner {
	transform:translateY(-4px);
} */

.pet-card .image {
	position: relative;
	z-index: 1;
}

.pet-card .image::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	width: calc(100%);
	height: calc(100%);
	border: 10px solid var(--color-blue-light);
	background-color:var(--color-blue-light);
	border-radius: inherit;
	transition: transform 0.25s ease;
	z-index: -1;
}

.pet-card:hover .image::before {
	transform: scale(1.05);
}

.featured-dogs-carousel .flickity-viewport {
	overflow:visible;
}

.featured-dogs-carousel .pet-card .image {
	border: 10px solid var(--color-blue-light);
}

.featured-dogs-carousel .pet-card .title {
	color:var(--color-blue-light);
}

.featured-dogs-carousel .pet-card .description {
	display:none;
}

.featured-dogs-section .dogs-grid .pet-card .image {
	border: 10px solid var(--color-blue);
}

.featured-dogs-section .dogs-grid .pet-card .image::before {
	border-color: var(--color-blue);
	background-color: var(--color-blue);
}

.featured-dogs-section .dogs-grid .pet-card .title,
.featured-dogs-section .dogs-grid .pet-card p {
	color:var(--color-blue) !important;
	text-align:center;
}

.featured-dogs-section .dogs-grid .pet-card p {
	line-height:125%;
	margin-top:10px;
}

.featured-dogs-section .section-text {
	max-width:830px;
}

@media(min-width:1025px) {
	.featured-dogs-carousel .pet-card {
		width:30%;
		margin-right:48px;
	}
	.featured-dogs-carousel .pet-card .image {
		border: 16px solid var(--color-blue-light);
	}
	.featured-dogs-section .dogs-grid .pet-card .image {
		border: 16px solid var(--color-blue);
	}

	.pet-card .image::before {
		border-width: 16px;
		top: -16px;
		left: -16px;
		width: calc(100%);
		height: calc(100%);
	}
}

.large-text-callout-section .large-text-callout h2 {
	line-height:1.2;
	max-width:1084px;
}

@media(min-width:1025px) {
	.large-text-callout-section .large-text-callout h2 {
		font-size:50px;
	}
}

.three-column-callouts .callout {
	max-width: 400px;
	display: block;
}

.three-column-callouts .title {
	max-width: 830px;
}

.three-column-callouts .callout .image {
	position: relative;
	aspect-ratio: 1 / 1.29;
	z-index: 1;
}

.three-column-callouts .callout .image::before {
	content: '';
	position: absolute;
	top: -16px;
	left: -16px;
	width: calc(100% + 32px);
	height: calc(100% + 32px);
	background-color: var(--color-blue);
	border-radius: inherit;
	z-index: -1;
	transform: scale(0.92);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.three-column-callouts .callout:hover .image::before {
	transform: scale(1);
	opacity: 1;
}

.three-column-callouts .callout .cta-arrow {
	transition: transform .25s ease;
}

.three-column-callouts .callout p {
	line-height: 1.15;
}

@media(min-width:1025px) {
	.three-column-callouts .callout:hover .cta-arrow {
		transform: translateX(10px);
	}

	.three-column-callouts .callouts {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 48px;
	}

	
}

.story-card {
	max-width: 450px;
}

.story-card .image {
	aspect-ratio: 1 / 1.3;
}

.stories-carousel .story-card .inner {
	transition:transform .25s ease;
}	

/* .stories-carousel .story-card:hover .inner {
	transform:translateY(-4px);
} */

.stories-carousel .flickity-viewport {
	overflow:visible;
}

/* disable Stories Carousel Flickity for small devices */
.stories-carousel:after {
	content: '';
}

@media(max-width:1024px) {
	.stories-carousel .story-card:nth-child(n+3) {
		display:none;
	}
}


@media(min-width:1025px) {

	.stories-carousel:after {
		content: 'flickity';
		display: none;
	  }

	  .stories-carousel .story-card {
		margin-right: 48px;
		width: calc(35% - 24px);
	}

	.stories-carousel .story-card.wide {
		max-width: 830px;
		width: calc(65% - 24px);
	}

	.stories-carousel .story-card .image {
		aspect-ratio: auto;
		height: calc(100vw * 0.5);
		max-height: 500px;
	}
}


/* font overrides */
.bicyclette { font-family: 'Bicyclette', sans-serif; }

/* Color Classes */
.color-blue { color:var(--color-blue); }
.color-blue-light { color:var(--color-blue-light); }
.color-teal { color:var(--color-teal); }
.color-red { color:var(--color-red); }
.color-white { color:#fff; }
.color-off-white { color:var(--color-off-white); }
.bg-teal { background-color:var(--color-teal); }
.bg-blue-light { background-color:var(--color-blue-light); }
.bg-blue { background-color:var(--color-blue); }
.border-bottom-blue { border-bottom:var(--color-blue) 2px solid; }


/* Custom Margins */
.negative-margin-top-sm {
	margin-top:-30px;
}

@media(min-width:1025px) {
	.negative-margin-top-sm {
		margin-top:-60px;
	}
}

.featured-dogs-section .dogs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px;
}

.featured-dogs-grid-section:before {
	content:'';
	position:absolute;
	top:72px;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--color-blue-light);
	z-index:-1;
}

@media(min-width:1025px) {

	.featured-dogs-grid-section:before {
		top:150px;
	}

	.featured-dogs-section .dogs-grid {
		grid-template-columns: repeat(3, 1fr);
		gap:100px;
	}
}

.alternating-text-section .alternating-item:nth-child(even) {
	flex-direction:row-reverse;
}

.alternating-text-section .alternating-item:last-child {
	margin-bottom:0 !important;
}

/* Margins */

.v-margin-lg { 
	margin-top:var(--margin-lg);
	margin-bottom:var(--margin-lg);
}
.v-margin-md {
	margin-top:var(--margin-md);
	margin-bottom:var(--margin-md);
}
.v-margin-sm {
	margin-top:var(--margin-sm);
	margin-bottom:var(--margin-sm);
}
.btn.h-margin-sm {
	margin-left:var(--margin-sm);
	margin-right:var(--margin-sm);
	display: block;
	float: left;
}

a.h-margin-sm {
	margin-left:var(--margin-sm);
	margin-right:var(--margin-sm);
	font-weight: bold;
}

.mb-lg { margin-bottom:var(--margin-lg); }
.mb-md { margin-bottom:var(--margin-md); }
.mb-sm { margin-bottom:var(--margin-sm); }

.mt-lg { margin-top:var(--margin-lg); }
.mt-md { margin-top:var(--margin-md); }
.mt-sm { margin-top:var(--margin-sm); }


.v-pad-xlg {
	padding-top:var(--margin-xlg);
	padding-bottom:var(--margin-xlg);
}
.v-pad-lg {
	padding-top:var(--margin-lg);
	padding-bottom:var(--margin-lg);
}
.v-pad-md {
	padding-top:var(--margin-md);
	padding-bottom:var(--margin-md);
}
.v-pad-sm {
	padding-top:var(--margin-sm);
	padding-bottom:var(--margin-sm);
}

.mt-0  { margin-top:0px !important; }
.mt-1  { margin-top:4px !important; }
.mt-2  { margin-top:8px !important; }
.mt-3  { margin-top:16px !important; }
.mt-4  { margin-top:24px !important; }
.mt-5  { margin-top:32px !important; }
.mt-6  { margin-top:48px !important; }
.mt-7  { margin-top:64px !important; }
.mt-8  { margin-top:80px !important; }
.mt-9  { margin-top:128px !important; }
.mt-10 { margin-top:160px !important; }

.mb-0  { margin-bottom:0px !important; }
.mb-1  { margin-bottom:4px !important; }
.mb-2  { margin-bottom:8px !important; }
.mb-3  { margin-bottom:16px !important; }
.mb-4  { margin-bottom:24px !important; }
.mb-5  { margin-bottom:32px !important; }
.mb-6  { margin-bottom:48px !important; }
.mb-7  { margin-bottom:64px !important; }
.mb-8  { margin-bottom:80px !important; }
.mb-9  { margin-bottom:128px !important; }
.mb-10 { margin-bottom:160px !important; }

.v-margin-0  { margin-top:4px !important; margin-bottom:0px !important; }
.v-margin-1  { margin-top:4px !important; margin-bottom:4px !important; }
.v-margin-2  { margin-top:8px !important; margin-bottom:8px !important; }
.v-margin-3  { margin-top:16px !important; margin-bottom:16px !important; }
.v-margin-4  { margin-top:24px !important; margin-bottom:24px !important; }
.v-margin-5  { margin-top:32px !important; margin-bottom:32px !important; }
.v-margin-6  { margin-top:48px !important; margin-bottom:48px !important; }
.v-margin-7  { margin-top:64px !important; margin-bottom:64px !important; }
.v-margin-8  { margin-top:80px !important; margin-bottom:80px !important; }
.v-margin-9  { margin-top:128px !important; margin-bottom:128px !important; }
.v-margin-10 { margin-top:160px !important; margin-bottom:160px !important; }

/* Specific Margins: */
.mt-40 { margin-top:40px; }

/* Padding */
.pt-0  { padding-top:0px !important; }
.pt-1  { padding-top:4px !important; }
.pt-2  { padding-top:8px !important; }
.pt-3  { padding-top:16px !important; }
.pt-4  { padding-top:24px !important; }
.pt-5  { padding-top:32px !important; }
.pt-6  { padding-top:48px !important; }
.pt-7  { padding-top:64px !important; }
.pt-8  { padding-top:80px !important; }
.pt-9  { padding-top:128px !important; }
.pt-10 { padding-top:160px !important; }

.pb-0  { padding-bottom:0px !important; }
.pb-1  { padding-bottom:4px !important; }
.pb-2  { padding-bottom:8px !important; }
.pb-3  { padding-bottom:16px !important; }
.pb-4  { padding-bottom:24px !important; }
.pb-5  { padding-bottom:32px !important; }
.pb-6  { padding-bottom:48px !important; }
.pb-7  { padding-bottom:64px !important; }
.pb-8  { padding-bottom:80px !important; }
.pb-9  { padding-bottom:128px !important; }
.pb-10 { padding-bottom:160px !important; }

.v-pad-0  { padding-top:0px !important; padding-bottom:0px !important; }
.v-pad-1  { padding-top:4px !important; padding-bottom:4px !important; }
.v-pad-2  { padding-top:8px !important; padding-bottom:8px !important; }
.v-pad-3  { padding-top:16px !important; padding-bottom:16px !important; }
.v-pad-4  { padding-top:24px !important; padding-bottom:24px !important; }
.v-pad-5  { padding-top:32px !important; padding-bottom:32px !important; }
.v-pad-6  { padding-top:48px !important; padding-bottom:48px !important; }
.v-pad-7  { padding-top:64px !important; padding-bottom:64px !important; }
.v-pad-8  { padding-top:80px !important; padding-bottom:80px !important; }
.v-pad-9  { padding-top:128px !important; padding-bottom:128px !important; }
.v-pad-10 { padding-top:160px !important; padding-bottom:160px !important; }

@media(min-width:960px) {
	/* Tablet margin and padding */
	/* Margins */
	
	.v-margin-lg {
		margin-top:var(--margin-xlg);
		margin-bottom:var(--margin-xlg);
	}
	.mb-lg { margin-bottom:var(--margin-xlg); }
	.mt-lg { margin-top:var(--margin-xlg); }
	
	.v-pad-lg {
		padding-top:var(--margin-xlg);
		padding-bottom:var(--margin-xlg);
	}
	
	.md-mt-0  { margin-top:0px !important; }
	.md-mt-1  { margin-top:4px !important; }
	.md-mt-2  { margin-top:8px !important; }
	.md-mt-3  { margin-top:16px !important; }
	.md-mt-4  { margin-top:24px !important; }
	.md-mt-5  { margin-top:32px !important; }
	.md-mt-6  { margin-top:48px !important; }
	.md-mt-7  { margin-top:64px !important; }
	.md-mt-8  { margin-top:80px !important; }
	.md-mt-9  { margin-top:128px !important; }
	.md-mt-10 { margin-top:160px !important; }

	.md-mb-0  { margin-bottom:0px !important; }
	.md-mb-1  { margin-bottom:4px !important; }
	.md-mb-2  { margin-bottom:8px !important; }
	.md-mb-3  { margin-bottom:16px !important; }
	.md-mb-4  { margin-bottom:24px !important; }
	.md-mb-5  { margin-bottom:32px !important; }
	.md-mb-6  { margin-bottom:48px !important; }
	.md-mb-7  { margin-bottom:64px !important; }
	.md-mb-8  { margin-bottom:80px !important; }
	.md-mb-9  { margin-bottom:128px !important; }
	.md-mb-10 { margin-bottom:160px !important; }

	.md-v-margin-0  { margin-top:4px !important; margin-bottom:0px !important; }
	.md-v-margin-1  { margin-top:4px !important; margin-bottom:4px !important; }
	.md-v-margin-2  { margin-top:8px !important; margin-bottom:8px !important; }
	.md-v-margin-3  { margin-top:16px !important; margin-bottom:16px !important; }
	.md-v-margin-4  { margin-top:24px !important; margin-bottom:24px !important; }
	.md-v-margin-5  { margin-top:32px !important; margin-bottom:32px !important; }
	.md-v-margin-6  { margin-top:48px !important; margin-bottom:48px !important; }
	.md-v-margin-7  { margin-top:64px !important; margin-bottom:64px !important; }
	.md-v-margin-8  { margin-top:80px !important; margin-bottom:80px !important; }
	.md-v-margin-9  { margin-top:128px !important; margin-bottom:128px !important; }
	.md-v-margin-10 { margin-top:160px !important; margin-bottom:160px !important; }

	/* Padding */
	.md-pt-0  { padding-top:0px !important; }
	.md-pt-1  { padding-top:4px !important; }
	.md-pt-2  { padding-top:8px !important; }
	.md-pt-3  { padding-top:16px !important; }
	.md-pt-4  { padding-top:24px !important; }
	.md-pt-5  { padding-top:32px !important; }
	.md-pt-6  { padding-top:48px !important; }
	.md-pt-7  { padding-top:64px !important; }
	.md-pt-8  { padding-top:80px !important; }
	.md-pt-9  { padding-top:128px !important; }
	.md-pt-10 { padding-top:160px !important; }

	.md-pb-0  { padding-bottom:0px !important; }
	.md-pb-1  { padding-bottom:4px !important; }
	.md-pb-2  { padding-bottom:8px !important; }
	.md-pb-3  { padding-bottom:16px !important; }
	.md-pb-4  { padding-bottom:24px !important; }
	.md-pb-5  { padding-bottom:32px !important; }
	.md-pb-6  { padding-bottom:48px !important; }
	.md-pb-7  { padding-bottom:64px !important; }
	.md-pb-8  { padding-bottom:80px !important; }
	.md-pb-9  { padding-bottom:128px !important; }
	.md-pb-10 { padding-bottom:160px !important; }

	.md-v-pad-0  { padding-top:0px !important; padding-bottom:0px !important; }
	.md-v-pad-1  { padding-top:4px !important; padding-bottom:4px !important; }
	.md-v-pad-2  { padding-top:8px !important; padding-bottom:8px !important; }
	.md-v-pad-3  { padding-top:16px !important; padding-bottom:16px !important; }
	.md-v-pad-4  { padding-top:24px !important; padding-bottom:24px !important; }
	.md-v-pad-5  { padding-top:32px !important; padding-bottom:32px !important; }
	.md-v-pad-6  { padding-top:48px !important; padding-bottom:48px !important; }
	.md-v-pad-7  { padding-top:64px !important; padding-bottom:64px !important; }
	.md-v-pad-8  { padding-top:80px !important; padding-bottom:80px !important; }
	.md-v-pad-9  { padding-top:128px !important; padding-bottom:128px !important; }
	.md-v-pad-10 { padding-top:160px !important; padding-bottom:160px !important; }
}

@media(min-width:1025px) {
	/* Desktop margin and padding */
	/* Margins */
	.lg-mt-0  { margin-top:0px !important; }
	.lg-mt-1  { margin-top:4px !important; }
	.lg-mt-2  { margin-top:8px !important; }
	.lg-mt-3  { margin-top:16px !important; }
	.lg-mt-4  { margin-top:24px !important; }
	.lg-mt-5  { margin-top:32px !important; }
	.lg-mt-6  { margin-top:48px !important; }
	.lg-mt-7  { margin-top:64px !important; }
	.lg-mt-8  { margin-top:80px !important; }
	.lg-mt-9  { margin-top:128px !important; }
	.lg-mt-10 { margin-top:160px !important; }

	.lg-mb-0  { margin-bottom:0px !important; }
	.lg-mb-1  { margin-bottom:4px !important; }
	.lg-mb-2  { margin-bottom:8px !important; }
	.lg-mb-3  { margin-bottom:16px !important; }
	.lg-mb-4  { margin-bottom:24px !important; }
	.lg-mb-5  { margin-bottom:32px !important; }
	.lg-mb-6  { margin-bottom:48px !important; }
	.lg-mb-7  { margin-bottom:64px !important; }
	.lg-mb-8  { margin-bottom:80px !important; }
	.lg-mb-9  { margin-bottom:128px !important; }
	.lg-mb-10 { margin-bottom:160px !important; }

	.lg-v-margin-0  { margin-top:0px !important; margin-bottom:0px !important; }
	.lg-v-margin-1  { margin-top:4px !important; margin-bottom:4px !important; }
	.lg-v-margin-2  { margin-top:8px !important; margin-bottom:8px !important; }
	.lg-v-margin-3  { margin-top:16px !important; margin-bottom:16px !important; }
	.lg-v-margin-4  { margin-top:24px !important; margin-bottom:24px !important; }
	.lg-v-margin-5  { margin-top:32px !important; margin-bottom:32px !important; }
	.lg-v-margin-6  { margin-top:48px !important; margin-bottom:48px !important; }
	.lg-v-margin-7  { margin-top:64px !important; margin-bottom:64px !important; }
	.lg-v-margin-8  { margin-top:80px !important; margin-bottom:80px !important; }
	.lg-v-margin-9  { margin-top:128px !important; margin-bottom:128px !important; }
	.lg-v-margin-10 { margin-top:160px !important; margin-bottom:160px !important; }

	/* Padding */
	.lg-pt-0  { padding-top:0px !important; }
	.lg-pt-1  { padding-top:4px !important; }
	.lg-pt-2  { padding-top:8px !important; }
	.lg-pt-3  { padding-top:16px !important; }
	.lg-pt-4  { padding-top:24px !important; }
	.lg-pt-5  { padding-top:32px !important; }
	.lg-pt-6  { padding-top:48px !important; }
	.lg-pt-7  { padding-top:64px !important; }
	.lg-pt-8  { padding-top:80px !important; }
	.lg-pt-9  { padding-top:128px !important; }
	.lg-pt-10 { padding-top:160px !important; }

	.lg-pb-0  { padding-bottom:0px !important; }
	.lg-pb-1  { padding-bottom:4px !important; }
	.lg-pb-2  { padding-bottom:8px !important; }
	.lg-pb-3  { padding-bottom:16px !important; }
	.lg-pb-4  { padding-bottom:24px !important; }
	.lg-pb-5  { padding-bottom:32px !important; }
	.lg-pb-6  { padding-bottom:48px !important; }
	.lg-pb-7  { padding-bottom:64px !important; }
	.lg-pb-8  { padding-bottom:80px !important; }
	.lg-pb-9  { padding-bottom:128px !important; }
	.lg-pb-10 { padding-bottom:160px !important; }

	.lg-v-pad-0  { padding-top:0px !important; padding-bottom:0px !important; }
	.lg-v-pad-1  { padding-top:4px !important; padding-bottom:4px !important; }
	.lg-v-pad-2  { padding-top:8px !important; padding-bottom:8px !important; }
	.lg-v-pad-3  { padding-top:16px !important; padding-bottom:16px !important; }
	.lg-v-pad-4  { padding-top:24px !important; padding-bottom:24px !important; }
	.lg-v-pad-5  { padding-top:32px !important; padding-bottom:32px !important; }
	.lg-v-pad-6  { padding-top:48px !important; padding-bottom:48px !important; }
	.lg-v-pad-7  { padding-top:64px !important; padding-bottom:64px !important; }
	.lg-v-pad-8  { padding-top:80px !important; padding-bottom:80px !important; }
	.lg-v-pad-8-5  { padding-top:100px !important; padding-bottom:100px !important; }
	.lg-v-pad-9  { padding-top:128px !important; padding-bottom:128px !important; }
	.lg-v-pad-10 { padding-top:160px !important; padding-bottom:160px !important; }
	
}

/* Header Styles */
.top-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 101;
    transform: translateY(0);
    transition: transform 0.3s ease;
    background-color: var(--color-teal);
}

.top-header.scrolled {
    transform: translateY(-100%);
}

.top-header.scroll-up {
    transform: translateY(0);
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

/* Add padding to body to prevent content jumping when header becomes fixed */
body {
    padding-top: 80px; /* Match header height for mobile */
}

@media(min-width: 960px) {
    body {
        padding-top: 135px; /* Match header height for desktop */
    }
}

/* Footer Styles */

.footer {
	color: var(--color-blue);
}

.footer a:not(.btn) {
	transition: color 0.3s ease;
}

.footer a:not(.btn):hover {
	color: var(--color-white);
}

.footer .footer-logo img {
	width: 78px;
}

.footer p {
	font-size: 18px;
	line-height: 1.15;
}

.footer #copyright, .footer .small {
	font-size: 14px;
}

/* .footer .flex-container {
	border-top: 2px solid var(--color-blue);
} */

.social-links {
    margin: 20px 0;
}

.social-links a {
    display: inline-block;
    margin-right: 35px;
    font-size: 30px;
    color: var(--color-blue);
    transition: color 0.15s ease;
}

.social-links a:hover {
    color: var(--color-white);
}

.quick-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-links li {
    margin-bottom: 10px;
}

.quick-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* .quick-links a:hover {
    color: var(--color-white);
} */

/* Two column layout for larger screens */
@media screen and (min-width: 1025px) {
    .quick-links {
        column-count: 2;
        column-gap: 30px;
    }

	.footer .flex-container {
		column-gap: 34px;
	}

	.footer .quick-links li {
		font-size: 30px;
		margin-bottom: 20px;
	}
}

.signup-form input[type="email"] {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-blue);
    color: white;
    outline: none;
	font-family: 'ClashDisplay-Bold';
	font-size: 40px;
	min-width: 100px;
	max-width: 100%;
}

.signup-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
}

/* Disable WebKit autofill styles */
.signup-form input[type="email"]:-webkit-autofill,
.signup-form input[type="email"]:-webkit-autofill:hover,
.signup-form input[type="email"]:-webkit-autofill:focus,
.signup-form input[type="email"]:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px transparent !important;
}

/* FAQ Styles */
.faq-items {
    border-top: 2px solid var(--color-blue);
}

.faq-item {
    border-bottom: 2px solid var(--color-blue);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    color: var(--color-blue);
    font-family: 'ClashDisplay-Bold';
    font-size: 24px;
    text-align: left;
}

.faq-icon {
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(-180deg);
}

.faq-answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.3s ease, opacity 0.3s ease;
    padding: 0 0 0 0;
	
}

.faq-answer p {
	color: var(--color-blue);
	line-height: 1.15;
}

.faq-item.active .faq-answer {
    height: auto;
    opacity: 1;
    padding: 0 0 24px 0;
}

@media(min-width: 1024px) {
    .faq-question {
        font-size: 40px;
        padding: 32px 0;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 0 32px 0;
    }
}


.pet-photos-carousel {
    margin-bottom: 40px;
}

.pet-photos-carousel .carousel-cell {
    width: 100%;
    margin-right: 20px;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1/0.8;
	border-radius: 25px;
}

/* .pet-photos-carousel .pet-image {
    width: 100%;
    display: block;
    border-radius: 25px;
} */

.pet-photos-carousel .flickity-viewport {
    overflow: visible;
}

.about-pet-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 60px;
}

@media(min-width: 1024px) {
    .pet-photos-carousel .carousel-cell {
        width: 80%;
        margin-right: 30px;
		border-radius: 50px;
    }

    .pet-photos-carousel {
        margin-bottom: 60px;
    }

	.about-pet-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 80px;
		row-gap: 50px;
	}

	.about-pet-grid .large p {
		font-size: 28px;
	}

}

.related-dogs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.related-dogs-grid .pet-card .image {
	border: 10px solid var(--color-blue);
}

.related-dogs-grid .pet-card .description {
	display: none;
}

.related-dogs-grid .pet-card .image::before {
	border-color:var(--color-blue);
	background: var(--color-blue);
}

@media(min-width: 1025px) {
	.related-dogs-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 100px;
	}

	.related-dogs-grid .pet-card .image {
		border-width: 16px;
	}
}

/* Stats Grid Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
}

.stats-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stat-card {
    background-color: var(--color-teal);
    border-radius: 25px;
    padding: 24px;
    text-align: center;
}

.stat-card .heart-icon {
    width: 111px;
    margin: 0 auto 16px;
}

.stat-card .number {
    color: var(--color-red);
    margin-bottom: 8px;
    font-size: 48px;
}

.stat-card .label {
    color: var(--color-blue);
    font-family: 'ClashDisplay-Bold';
    font-size: 24px;
    margin-bottom: 16px;
    line-height: 1.2;
}

.stat-card .description {
    color: var(--color-blue);
    font-size: 16px;
    line-height: 1.4;
}

@media(min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }

    .stats-column {
        gap: 48px;
    }

    .stat-card {
        padding: 32px;
        border-radius: 50px;
    }

    .stat-card .number {
        font-size: 72px;
    }

    .stat-card .label {
        font-size: 28px;
    }

    .stat-card .description {
        font-size: 18px;
    }
}

.single-post article .entry-content,
.single-post article .entry-footer {
	max-width: 1000px;
	margin: 0 auto;
}

.single-post article .entry-content {
	margin-bottom: 60px;
}

.single-post article img, .archive article img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 25px;
	margin: 50px 0;
}

.single-post article .wp-block-heading {
	margin: 30px 0;
}

.single-post article p, .single-post .entry-meta {
	color: var(--color-blue);
	font-size: 30px;
	line-height: 1.15;
	margin: 0 0 30px;
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 40px 0;
}

.post-tag {
	background-color: #12ABB2;
	color: white;
	padding: 10px 20px;
	border-radius: 25px;
}

.entry-meta .author, .entry-meta .meta-sep {
	display: none;
}

.search-form {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.search-form .search-field {
    border-radius: 999px;
    padding: 0 30px;
    height: 47px;
    display: block;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--color-blue);
    background-color: var(--color-white);
    white-space: nowrap;
    outline: none;
    border: var(--color-blue) 2px solid;
    width: 100%;
}

.search-form .search-field::placeholder {
    color: var(--color-blue);
}

.search-form .search-submit {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0 20px;
    color: var(--color-blue);
    font-weight: 700;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.15s ease;
}

.search-form .search-submit:hover {
    color: var(--color-red);
}

/* Hide clear button in IE */
.search-form .search-field::-ms-clear {
    display: none;
}

/* Hide clear button in Chrome */
.search-form .search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 50px;
}

@media(min-width: 768px) {
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stories-grid .story-card .cta-arrow {
	transition: transform .25s ease;
}

.stories-grid .story-card p {
	line-height: 1.15;
}

@media(min-width: 1025px) {
    .stories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

	.stories-grid .story-card:hover .cta-arrow {
		transform: translateX(10px);
	}
}

.story-card .image {
    position: relative;
    z-index: 1;
}

.story-card .image::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -16px;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    background-color: var(--color-blue);
    border-radius: 30px;
    z-index: -1;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.story-card:hover .image::before {
    transform: scale(1);
    opacity: 1;
}