:root{
  --primary-heading-font-size: clamp(26px, 4vw, 72px);
  --secondary-heading-font-size: clamp(22px, 3vw, 60px);
  --extra-secondary-heading-font-size: clamp(18px, 2vw, 36px);
  --tertiary-heading-font-size: clamp(18px, 1.4vw, 24px);
  --paragraph-font-size: clamp(16px, 1.3vw, 20px);
  --subtitle-font-size: clamp(16px, 1.8vw, 18px);
  --extrasubtitle-font-size: 14px;
  --button-border-radius: clamp(35px, 3vw, 40px);

  --solid-white:#FFFFFF;
  --primary-background:#153C5E;
  --primary-foreground:#FFFFFF;
  --secondary-background:#E27A2E;
  --secondary-foreground:#FFFFFF;
  --card-background:#FCC566;
  --card-foreground:#153C5E;
  --band-background:#3687BF;
  --band-foreground:#153C5E;
  --footer-background:#082640;
  --footer-foreground:#153C5E;

  --image-width:clamp(300px, 40vw, 450px);
  --button-radius:clamp(18px, 2vw, 28px);

}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	font-size: 62.5%;
}

body{
	min-height: 100vh;
	width: 100vw;
	overflow-x: hidden;
	background-color: var(--primary-background);

}

main{
	background-image: url('/assets/img/pac2024/noise-BG.svg');
	background-attachment: fixed;
	background-repeat: no-repeat;

	background-size: 100%;
}

body section, body footer{
	min-height: 100vh;
	font-family: "Sarabun", cursive;
}

.primary-font-family{
	font-family: 'Delicious Handrawn', cursive;
}

.primary-heading{
	font-size: var(--primary-heading-font-size);
}

.paragraph-heading{
	font-size: var(--paragraph-font-size);
	color: var(--solid-white);
}

.secondary-heading{
	font-size: var(--extra-secondary-heading-font-size);
	line-height: clamp(30px, 4vw, 48px);
}

.tertiary-heading{
	font-size: var(--tertiary-heading-font-size);
}

.subtitle-heading{
	font-size: var(--subtitle-font-size);
}

.extra-subtitle-heading{
	font-size: var(--extrasubtitle-font-size);
}

.button{
	text-decoration: none;
	padding:10px 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	overflow: hidden;
	font-size: var(--extrasubtitle-font-size);
	border: none;
	position:relative;
	border-radius: var(--button-radius);
}

.button span{
	z-index: 10;
}

.button:before{
	content:"";
	width: 100%;
	position: absolute;
	inset:0;
	height:100%;
	background-color: inherit;
}

.button:hover:before{
	opacity: 0.6;
	transition: opacity 300ms ease ;
}

.button.secondary-button{
	background-color: #E27A2EAB;
	color: var(--secondary-foreground);
}

.card-container{
	width: 70%;
}

.card-container-one{
	width: 90%;
}

.carousel-control-prev, .carousel-control-next{
	width: 40px;
	height: 40px;
	border:1px solid white;
	opacity: 1;
	top: 100%;
	top:inherit !important;
	border-radius:50%; 
}

.carousel-control-prev{
	left: 25%;
}

.carousel-control-next{
	left: 30%;
}

.logo-container:before{
	position: absolute;
	content: "";
	width: 350%;
	background: white;
	height: 2px;
	bottom: 0;
	left: -30%;
}


@media (max-width: 676px){
	.card-container, .card-container-one{
	width: 100%;
  }

}