@charset "UTF-8";

/* Font */

 @font-face { 
	 src: url(https://www.polestar.com/shared-assets/fonts/polestar-unica/regular.woff2) format('woff2'), 
		 url(https://www.polestar.com/shared-assets/fonts/polestar-unica/regular.woff) format('woff'); 
	 font-family: Polestar Unica; 
	 font-weight: 400; 
	 font-style: normal; 
	 font-display: swap; } 

/* Grid */
.db-wrapper {
    font-family: Polestar Unica, sans-serif; 
	color: #333333;
}


/* Variables */
.db-wrapper {
    --db-accent: #FF7500; /* Orange */
    --db-accent-hover: #F06E00; /* Orange Hover */
    --db-accent2: #0000EE; /* Blue */
    --db-black: #000000;
    --db-white: #ffffff;
    --db-dark: #222222;
    --db-gray: #4d4d4d;
    --db-white-hover: #b3b3b3;
    --db-light-gray: #F0F0F0;
}


/* Accent Colors (Orange) */
.db-accent {
	color: var(--db-accent) !important;
}

/* Accent Colors (Blue) */
.db-accent2 {
	color: var(--db-accent2) !important;
}

.db-link {
	text-decoration: none !important;
	color: var(--db-black) !important;
	font-weight: bold !important;
}
.db-link:hover {
	color: var(--db-gray) !important;
	text-decoration: underline !important;
}

.db-link-white {
	text-decoration: none !important;
	color: var(--db-white) !important;
	font-weight: bold !important;
}
.db-link-white:hover {
	color: var(--db-white-hover) !important;
	text-decoration: underline !important;
}


/* Background Colors */
.db-bg-accent {
    background-color: var(--db-accent); /* Orange */
}
.db-bg-accent2 {
    background-color: var(--db-accent); /* Blue */
}
.db-bg-dark {
    background-color: var(--db-dark);
}
.db-bg-gray {
    background-color: var(--db-gray);
}
.db-bg-white {
    background-color: var(--db-white);
}
 
/* Button 1 (Black) */
.db-button {
	background-color: transparent;
	color: var(--db-black) !important;
	font-family: Polestar Unica, sans-serif !important;
	font-weight: 400 !important;
	border: 1px solid var(--db-black);
	padding: 12px 32px;
	text-align: center;
	gap: 12px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 125%;
	overflow: hidden;
	transition: background 0.3s ease;
	cursor: pointer;
	min-width: 200px; }
.db-button:hover {
	background-color: transparent;
	color: var(--db-black) !important;
	border: 1px solid var(--db-gray); 
}
.db-button:hover .arrow {
	animation: bounce-left 0.6s ease;
	}

.db-button-primary {
	background-color: var(--db-black);
	color: var(--db-white) !important;
  	font-family: Polestar Unica, sans-serif !important;
    font-weight: 400 !important;
	border: 1px solid var(--db-black);
	padding: 12px 32px;
	text-align: center;
  	gap: 12px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 125%;
    overflow: hidden;
    transition: background 0.3s ease;
	cursor: pointer;
	min-width: 200px;
}
.db-button-primary:hover {
	background-color: var(--db-gray);
	color: var(--db-white) !important;
	border: 1px solid var(--db-gray);
}
.db-button-primary:hover .arrow {
    animation: bounce-left 0.6s ease;
}

/* Button 2 (White) */
.db-button2 {
	background-color: transparent;
	color: var(--db-white) !important;
	font-family: Polestar Unica, sans-serif !important;
	font-weight: 400 !important;
	border: 1px solid var(--db-white);
	padding: 12px 32px;
	text-align: center;
  	gap: 12px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 125%;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
	cursor: pointer;
	min-width: 200px; }
.db-button2:hover {
	background-color: transparent;
	color: var(--db-white) !important;
	border: 1px solid var(--db-white-hover); 
}
.db-button2:hover .arrow {
    animation: bounce-left 0.6s ease;
}

.db-button2-primary {
	background-color: var(--db-white);
	color: #000000 !important;
  	font-family: Polestar Unica, sans-serif !important;
    font-weight: 400 !important;
	border: 1px solid var(--db-white);
	padding: 12px 32px;
	text-align: center;
  	gap: 12px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 125%;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
	cursor: pointer;
	min-width: 200px;
}
.db-button2-primary:hover {
	background-color: var(--db-white-hover);
	color: #333333 !important;
	border: 1px solid var(--db-white-hover);
}
.db-button2-primary:hover .arrow {
    animation: bounce-left 0.6s ease;
}