@charset "utf-8";
/* CSS Document */
/* BKFSea*/
:root {

  /* =========================
     Brand Colors
  ========================== */

  --color-primary: #1E3A5F;
  --color-secondary: #ffc620;
  --color-accent: #F5A623;

  --color-dark: #000000;
  --color-gray-dark: #444444;
  --color-gray: #888888;
  --color-gray-light: #E5E5E5;
  --color-light: #F9F9F9;
  --color-white: #FFFFFF;

  /* =========================
     Typography
  ========================== */

  --font-primary: 'Inter', sans-serif;
  --font-heading: 'Poppins', sans-serif;
  --font-mono: 'Courier New', monospace;
  --font-grime: pf-fuel-grime, sans-serif;
  --font-kiln:  kiln-sans, sans-serif;;

  --text-base-size: 16px;
  --text-sm: 0.875rem;   /* 14px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.75rem;    /* 28px */
  --text-xxl: 2.5rem;    /* 40px */

  --line-height-base: 1.6;
  --line-height-heading: 1.2;

  /* =========================
     Spacing
  ========================== */

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* =========================
     Border Radius
  ========================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

}

.container{
	background-color: var(--color-dark)
}
#content-wrapper{
	Width: 80% !important;
	margin: auto !important;
}
#content-wrapper h2{
	font-family: var(--font-grime);
	text-align: center;
	color: var( --color-secondary);
	font-size: clamp(16px, 4vw, 72px);
}
.trip-details h3, 
.trip-type h3,
#tripname{
	font-family: var(--font-grime) !important;
	font-size: clamp(16px, 3vw, 35px) !important;
}
#content-wrapper{
	background-color: var(--color-white);
    padding: clamp(20px, 4vw, 30px);
    border-radius: 10px; 
}
.trip-container h6, 
#tripvenue{
	font-size: clamp(13px, 2vw, 18px)!important;
}
.trip-type h3, 
#tripname{
	font-size: clamp(16px, 3vw, 45px) !important;
	color: var( --color-secondary) !important;
}
.rez-progress-bar ul{
	color: var(--color-gray);
}
.navbar-collapse{
	padding: 0 clamp(20px, 4vw, 30px) !important;
}
a.btn, button {
    background-color: var(--color-dark);
    border: 2px solid var(--color-dark);
	border-radius: 8px;
    padding: 1rem 5rem;
    text-transform: uppercase;
}
a.btn:hover, button:hover, a.btn:focus, button:focus {
    opacity: 0.7;
}
#main-footer a{
	color: var( --color-gray)
}
#main-footer{
	border-top: none !important;
	color: var(--color-gray)
}

@media (min-width: 1200px) {
    .container {
        width: 100% !important;
        padding: 0 !important;
    }
}
@media (min-width: 922px) {
    .container {
        width: 100% !important;
        padding: 0 !important;
    }
}
@media (max-width: 768px) {
    .container {
        width: 100% !important;
		padding: 0 !important;
    }
}