:root {
	--bs-gray: #d9d9d9;
	--bs-primary: #2f6a5b;
	--bs-secondary: #baa864;
	--bs-light: #e8e9e1;
	--bs-dark: #1a3333;
	--bs-tertiary: #887579;
	--bs-primary-rgb: 30, 38, 107;
	--bs-secondary-rgb: 186, 168, 100;
	--bs-light-rgb: 246, 246, 246;
	--bs-dark-rgb: 34, 45, 16;
	--bs-white-rgb: 255, 255, 255;
	--bs-black-rgb: 0, 0, 0;
	--bs-body-rgb: 129, 129, 129;
	--bs-font-sans-serif: "Open Sans", sans-serif;
	--bs-gradient: linear-gradient(135deg, #0e8989, #1b5757);
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-font-size: 17px;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.75;
	--bs-body-color: #2b3232;
	--bs-body-bg: #fff;
	--bs-border-radius: 1px;
	--byf-header-font: "Playfair Display", serif;
	--hcm-font-size: 18px;
	--hcm-font-weight: 500;
	--hcm-primary-dark: #1b5757;
	--hcm-secondary-dark: #d88f50;
	--hcm-pop: #f7c69f;
	--hcm-body-color: #1c1f1f;
  }
  
  body.hcm {
	--bs-primary: var(--hcm-primary-dark);
	--bs-secondary: var(--hcm-secondary-dark);
	--bs-tertiary: var(--hcm-pop);
	font-size: var(--hcm-font-size);
  }
  
  /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	a11y Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  
  #skip-navigation {
	  background: #fff;
	  color: #000;
	  left: 0;
	  padding: 0.5em;
	  position: absolute;
	  top: -1000px;
	  transition: all 0.3s ease;
	  z-index: 11;
  }
  
  a:not(.btn, .nav-link):focus-visible {
	  outline: 2px solid var(--bs-primary);
  }
  
  :is(#footer-top, #footer-bottom) a:not(.btn, .nav-link):focus-visible {
	  outline: 2px solid var(--bs-secondary);
  }
  
  :is(.btn-default, .btn-primary, .btn-secondary):focus-visible {
	  outline: 2px solid var(--bs-primary) !important;
	  outline-offset: 1px;
  }
  
  #hc-toggle {
	  align-items: center;
	  background: var(--bs-primary);
	  border: 2px solid #fff;
	  border-radius: 0.1875rem;
	  bottom: 1rem;
	  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.05), 0 16px 16px rgba(0, 0, 0, 0.05);
	  color: #fff;
	  display: flex;
	  font-size: 1.75rem;
	  justify-content: center;
	  height: 3rem;
	  left: 1rem;
	  outline: 0;
	  position: fixed;
	  transition: all 0.3s ease;
	  width: 3rem;
	  cursor: pointer;
	  z-index: 999;
  }
  
  #hc-toggle i {
	  font-size: 1.75rem;
  }
  
  #hc-toggle:is(:hover, :focus, :focus-visible) {
	  background: #fff;
	  border-color: var(--bs-secondary);
	  color: var(--bs-secondary);
  }
  
  .sr-only {
	  border: 0;
	  clip: rect(0 0 0 0);
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  padding: 0;
	  position: absolute;
	  width: 1px;
  }
  
  .hcm :is(p, a, ul, li):not(.btn, .btn-primary, .btn-secondary) {
	  font-weight: 500;
  }
  
  .hcm :is(a, a:active, a:focus, a:visited) {
	  font-weight: 600;
	  text-decoration: underline;
  }
  
  @media (max-width: 767px) {
	  .sr-only-sm {
		  border: 0;
		  clip: rect(0 0 0 0);
		  height: 1px;
		  margin: -1px;
		  overflow: hidden;
		  padding: 0;
		  position: absolute;
		  width: 1px;
	  }
  }
  
  /*=====================
	TYPOGRAPHY/DEFAULT
	======================*/
  
  body {
	  overflow-x: hidden;
	  font-size: var(--bs-body-font-size);
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  [class*="display-"] {
	  font-family: var(--byf-header-font);
	  font-weight: 500;
  }
  
  h1 {
	  font-size: 3rem;
  }
  
  h2 {
	  font-size: 2.5rem;
  }
  
  h3 {
	  font-size: 2rem;
  }
  
  h4 {
	  font-size: 1.75rem;
  }
  
  [class^="fs-"]:not([class^="fa-"]):not([class*="display-"]) {
	  font-family: var(--bs-font-sans-serif);
  }
  
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
	  max-width: 1240px;
  }
  
  #main p,
  #footer p {
	  line-height: var(--bs-body-line-height);
	  font-weight: var(--bs-body-font-weight);
  }
  
  #main {
	  margin-top: -12rem;
	  position: relative;
	  z-index: 99;
  }
  
  #why-choose-us {
	  background: var(--bs-light);
	  padding: 7rem 0 6rem;
  }
  
  .btn {
	  border-radius: var(--bs-border-radius);
	  border: 2px solid var(--bs-primary);
	  padding: 0.5rem 2.5rem;
	 }
  
  .bg-light {
	  background-color: var(--bs-light) !important;
  }
  
  .bg-primary {
	  background: var(--bs-primary) !important;
  }
  
  .bg-secondary {
	  background-color: var(--bs-secondary) !important;
  }
  
  .bg-accent {
	background-color: var(--bs-tertiary) !important;
  }
  
  .bg-dark .bg-dark,
  .bg-dark {
	  background-color: var(--bs-dark) !important;
  }
  
  .bg-gray {
	  background: var(--bs-gray) !important;
  }
  
  a,
  a:is(:focus, :active) {
	  color: var(--bs-primary);
  }
  
  a:hover {
	  color: var(--bs-secondary);
  }
  
  .text-primary {
	  color: var(--bs-primary) !important;
  }
  
  .text-secondary {
	  color: var(--bs-secondary) !important;
  }
  
  .btn-primary {
	  background: var(--bs-primary);
	color: #fff;
	  border-color: var(--bs-primary);
  }
  
  .btn-primary:hover {
	  color: var(--bs-dark);
	  background-color: transparent;
	  border-color: var(--bs-primary);
  }
  
  .btn-secondary {
	  background: var(--bs-secondary);
	  color: var(--bs-dark);
	  border-color: var(--bs-secondary);
  }
  
  .btn-secondary:hover {
	  background: transparent;
	  color: #fff;
	  border-color: var(--bs-secondary);
  }
  
  #pageContent a {
	  color: var(--bs-primary);
	  font-weight: 600;
	  text-decoration: underline;
  }
  
  #pageContent li {
	  font-weight: 300;
  }
  
  .btn-lg {
	  font-size: 1rem;
	  font-weight: 500;
	  padding: 0.875rem 2rem;
  }
  
  .btn-light {
	  background-color: var(--bs-light);
	  border-color: var(--bs-light);
	  color: var(--bs-dark);
  }
  
  .btn-dark {
	  background-color: var(--bs-dark);
	  border-color: var(--bs-dark);
	  color: var(--bs-light);
  }
  
  .visible-xs {
	  display: none;
  }
  
  .card {
	  display: block;
	  border: 0;
	  border-radius: 10px;
	  box-shadow: 0 4px 6px 0px rgb(0 0 0 / 20%);
  }
  
  .form-control {
	  border: 1px solid #d3d3d3;
	  border-radius: 30px;
	  color: #404040;
	  display: block;
	  font-size: 0.875rem;
	  margin: 5px 0 7px;
	  padding: 0.5rem 0.875rem;
  }
  
  .btn-accent {
	  background-color: var(--bs-tertiary);
	  color: var(--bs-dark);
  }
  
  .btn-accent:hover {
	  background-color: var(--bs-primary);
  }
  
  .btn-dark {
	  background-color: var(--bs-dark);
	  color: var(--bs-light);
  }
  
  .btn-dark:hover {
	  opacity: 0.85;
  }
  
  * .parallax-bg {
    background-position: center center !important;
  }

  .split-bg {
    min-height: 20rem;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
  }

  /* ==================
  Header/Navbar
  =====================*/
  
  #topbar {
	  background: var(--bs-secondary);
	  color: var(--bs-dark);
  }
  
  #topbar ul {
	  display: flex;
	  justify-content: space-between;
	  margin: 0 0 0 auto;
	  align-items: center;
	  padding: 0.5rem 0;
	  flex-wrap: wrap;
	  list-style: none;
	  max-width: 50%;
  }
  
  #topbar li {
	padding-left: 10px;
	text-align: center;
  }
  
  .topbar-link {
	color: var(--bs-dark);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	padding-left: 15px;
  }
  
  .navbar-nav {
	align-items: center;
  }
  
  .nav-item {
	padding: 0 1rem 0 0;
  }
  
  .nav-item:last-of-type .nav-link {
	background: var(--bs-secondary);
	padding: 0.75rem 2.125rem;
	font-weight: 500;
	text-transform: uppercase;
	margin-left: 1rem;
	color: var(--bs-dark);
	}
  
  .nav-link {
	color: #fcf0e7;
  }
  
  .topbar-link iconify-icon {
	color: var(--bs-dark);
	margin-right: 5px;
	top: 3px;
	position: relative;
  }
  
  .branding {
	  font-weight: bold;
	  font-size: 1.2rem;
  }
  
  #top-nav a {
	  margin-left: 1rem;
	  text-decoration: none;
	  color: var(--byf-dark);
	  font-weight: 600;
	  transition: color 0.3s ease;
  }
  
  #top-nav a.button {
	  background: var(--byf-accent);
	  color: var(--byf-dark);
	  padding: 0.5rem 1rem;
	  border-radius: 4px;
  }
  
  #top-nav a:hover {
	  color: #d98047;
  }
  
  /* ==================
  Hero Section
  =====================*/
  
  #hero {
	  background: var(--bs-dark);
	  padding: 2rem 0 0;
	color: #fcf0e7;
  }

  #hero .btn {
	background: #fff;
	color: var(--bs-dark);
  }
  
  #hero .heading {
	color: var(--bs-light);
  }
  
  #hero .heading .bold {
	font-weight: 600;
  }
  
  .hero-image {
	max-width: 100%;
  }

  #hero .hero-text {
	padding: 3rem 0 5rem;
  }

  #hero .hero-text h1 {
	font-size: 2.5rem;
	line-height: 1.25;
	margin-bottom: 1rem;
	}

  .hero-text h1 span {
	color: var(--bs-secondary);
	font-style: italic;
	display: block;
  }

  #hero .hero-testimonial {
	background: var(--bs-secondary);
  }

  #hero .carousel-item .col-md-8 {
	position: relative;
	padding: 0;
  }

  #hero .arrow-box {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--bs-dark);
    z-index: 999;
    height: 100px;
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carousel-control-next, .carousel-control-prev {
    top: 0;
    bottom: 0;
	position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
	width: 100%;
    padding: 0;
    color: #fff;
    text-align: center;
    border: 0;
    opacity: 1;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 21px;
    height: 32px;
    background-position: 50%;
    background-size: 100% 100%;
}

  /* ==================
 Services Section
  =====================*/
  
  #services-overview {
	padding: 5rem 0;
  }

  #services-overview .service-card {
	text-align: center;
	padding: 0 2rem;
	border-right: 1px solid var(--bs-dark);
  }

  #services-overview .col-md-3:last-child .service-card {
	border-right: none;
  }

  .service-card h3 {
	text-decoration: none;
	color: var(--bs-dark);
	font-size: 1.5rem;
  }

  .service-card iconify-icon {
	margin-bottom: 1.5rem;
  }

  .service-card a {
	text-decoration: none;
	text-align: center;
  }
  
  
  /* ==================
  Index Section
  =====================*/
  
  #index h2 {
	color: var(--bs-primary);
	font-size: 2.15rem;
	font-weight: 500;
	margin-bottom: 1.75rem;
	}
  
  #index .subtitle {
	font-size: 1.25rem;
	margin-bottom: 1rem;
	color: var(--bs-dark);
	}

	#index .content {
		background: var(--bs-gray);
		padding: 4rem 7rem 8rem 5rem;
	}

    #index .split-bg {
        background-image: url(file:///C:/Users/Gil_G/OneDrive/Desktop/BYF%20Items/new%20layout%20files/Boutique%20Layout%20Code%20Files%203/Boutique%20Layout%20Code%20Files%203/site_images/index.webp);
    }

	#index .btn-primary {
		margin-top: 3rem;
	}

  /* ==================
  Industries Section
  =====================*/
  
  #industries .split-bg {
        background-image: url(file:///C:/Users/Gil_G/OneDrive/Desktop/BYF%20Items/new%20layout%20files/Boutique%20Layout%20Code%20Files%203/Boutique%20Layout%20Code%20Files%203/site_images/whoweserve.webp);
	}
  
	#industries .content {
		padding: 3rem 5rem;
		background: var(--bs-light);
	}

	#industries h2 {
		color: var(--bs-primary);
	}

	  
  #industries .subtitle {
	font-family: var(--byf-header-font);
	font-size: 1.25rem;
	margin-bottom: 1rem;
	color: var(--bs-dark);
	}

	.industry-list {
		list-style: none;
		margin: 2rem 0;
		padding-left: 0;
	}

	.industry-list li {
		padding: 1.5rem 0;
		font-size: 1.5rem;
		font-family: var(--byf-header-font);
		font-weight: 400;
		border-bottom: 2px solid var(--bs-dark);
	}

	.industry-list li:last-child {
		border-bottom: none;
	}
  /* ==================
  Inner Pages
  =====================*/
  
  #inner-hero {
	background: var(--bs-primary);
	color: #fefefe;
  }
  
  #inner-hero h1 {
	font-size: 2.5rem;
	color: var(--bs-light);
	padding-left: 5rem;
  }

  #inner-hero .hero-text {
	max-width: 1900px;
	padding: 4rem 2rem;
  }

  #inner-content .inner-header {
	padding: 2rem 0 3rem;
  }

  #inner-content {
	background: var(--bs-light);
	padding-bottom: 4rem;
  }

  #inner-content h3 {
	margin-bottom: 1rem;
  }

  #inner-content ul {
	list-style: none;
	margin-top: 1rem;
	padding-left: 0;
  }

  .inner-header .col-md-6:nth-child(1) {
	padding: 3rem 5rem 2rem 0;
	border-right: 2px solid var(--bs-dark);
  }
  
  #inner-cta {
	text-align: center;
	background: var(--bs-primary);
	padding: 4rem 0;
	}

  #inner-cta .container {
	max-width: 975px;
  }
  
  #inner-cta h2 {
	font-size: 3.25rem;
	margin-bottom: 1.5rem;
	font-weight: 400;
	color: var(--bs-light);
	}

	#inner-cta p {
		color: #fefefe;
	}
  
  
  /* ==================
  About Section
  =====================*/
  
  #about .subtitle {
	 font-size: 1.5rem;
	 color: var(--bs-light);
	 text-transform: uppercase;
	 margin-bottom: 0.5rem;
  }
  
  #about p {
	color: var(--bs-light);
	font-size: 1.05rem;
  }
  
  #about h2 {
	margin-bottom: 1.5rem;
	font-weight: 500;
  }
  
  #about img {
	border-radius: 20px;
	box-shadow: 4px 4px 0 #212121;
	width: 100%;
  }
  
  /* ==================
  Services Section
  =====================*/
  
  #services .card {
	background: rgba(var(--bs-primary-rgb), 0.2);
	color: var(--bs-primary);
	text-align: center;
	padding: 1rem 1.25rem;
	margin: 1rem 0;
  }
  
  #services .subtitle {
	color: var(--bs-primary);
	font-size: 1.25rem;
	text-transform: uppercase;
	text-align: center;
  }
  
  #services .card iconify-icon {
	margin: 1rem auto;
  }
  
  #services .card h3 {
	font-size: 1.25rem;
  }
  
  /* ==================
  CTA
  =====================*/
  
  #cta {
	  background: var(--bs-primary);
	  color: #efefef;
	  text-align: center;
	  padding: 6rem 0 7rem;
  }

  #cta .container {
	max-width: 975px;
  }

  #cta h2 {
	font-size: 3.25rem;
	margin-bottom: 3rem;
  }

  #cta p {
	font-size: 1.1rem;
	margin-bottom: 3rem;
  }

  /* ==================
  FAQS
  =====================*/
  
#faqs {
	background: var(--bs-secondary);
	padding: 3rem 0 5rem;
	text-align: center;
}

#faqs h2 {
	font-size: 3.25rem;
	color: #fff;
	margin-bottom: 2rem;
}

#faqs .accordion-item {
	margin: 0.75rem 0;
}
  
  /* ==================
  Pricing Packages
  =====================*/
  
  #pricing {
	background: var(--bs-light);
	padding: 3rem 0;
	text-align: center;
	}
  
  #pricing .subtitle {
	text-transform: uppercase;
	color: var(--bs-primary);
	font-size: 1.5rem;
  }
  
  #pricing h2 {
	margin-bottom: 2rem;
  }
  
  .pricing-tiers {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	 }

  .pricing-tiers .bronze{
	background: rgba(var(--bs-secondary-rgb), 0.5);
  }

    .pricing-tiers .silver {
background: var(--bs-gray);
	}
  
  .tier .body {
	padding: 0 2rem;
  }
  
  .tier p {
	line-height: 1.85;
  }
  
  .tier .btn {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	width: 235px;
	text-align: center;
	}
  
  .tier {
	background: var(--bs-secondary);
	position: relative;
	min-height: 450px;
	width: 90%;
	box-shadow: 0px 2px 17px -10px #212121;
}
  
  .tier ul {
	margin: 2.5rem 0 5rem;
	text-align: left;
	}
  
  .tier h3 {
	  margin-bottom: 0.75rem;
	  text-align: center;
	  font-size: 1.75rem;
	  font-weight: 400;
	  background: var(--bs-primary);
	  color: #ededed;
	  padding: 1.35rem 0;
	 }

/* ==================
Affiliates
=====================*/


	 #affiliates .carousel-item {
		text-align: center;
	 }

	 #affiliates .affiliate {
		max-width: 200px;
		margin: 1rem 2rem;
	 }
  
	 #affiliates {
		padding: 1rem 0;
	 }


/* ==================
  Testimonials
  =====================*/

  #testimonials {
	background: var(--bs-gray);
	padding: 5rem 0 6rem;
	text-align: center;
  }

  #testimonials .subtitle {
	font-family: var(--byf-header-font);
  }

  #testimonials .container {
	max-width: 975px;
  }

  #testimonials h2 {
	font-size: 3.25rem;
	color: var(--bs-primary);
	margin-bottom: 3rem;
  }

  #testimonials p {
	font-size: 1.1rem;
  }


  /* ==================
  Blog Feed
  =====================*/

  #blog-feed {
	padding: 6rem 0 7rem;
  }

  #blog-feed h2 {
	text-align: center;
	margin-bottom: 2rem;
  }

  #blog-feed h3 {
    font-size: 1.5rem;
    color: var(--bs-dark);
    margin: 2rem 0;
  }

  .blog-post .excerpt {
	border-top: 3px solid var(--bs-dark);
	padding: 2rem 0;
  }

  .blog-post .post-img {
	max-height: 200px;
	overflow: hidden;
  }

  .post-img img {
	width: 100%;
  }

  .excerpt {
	max-height: 400px;
	text-overflow: ellipsis;
  }

  /* ==================
  Footer
  =====================*/
  
  #footer {
	background: var(--bs-dark);
	padding: 3rem 0 2rem;
  }

  #footer::before {
	content: "";
	width: 50rem;
	height: 1px;
	background: #ededed;
	display: block;
	margin: 1rem auto 3rem;
	text-align: center;
	}

  #footer h4 {
	font-size: 1.15rem;
	font-weight: 400;
	margin-bottom: 1.25rem;
  }

  #footer :is(li, p) {
	font-size: 0.925rem;
	margin: 0.25rem 0;
	}

  #footer .footer-columns {
	display: flex;
	padding-bottom: 2rem;
	border-bottom: 1px solid #ededed;
	}

  #footer .footer-column {
	flex-basis: 20%;
	color: #efefef;
	padding-right: 1.5rem;
	}

  
  #footer {
	position: relative;
  }
  
  #footer ul {
	list-style: none;
	padding-left: 0;
	justify-content: space-between;
	}
  
	.footer-bottom {
		padding: 2rem 0 0;
		text-align: center;
	}

	.copyright {
		color: #efefef;
		margin-bottom: 0;
	}

  .footer-menu a {
	text-decoration: none;
	font-weight: 500;
  }

  .social-media a {
	font-weight: 500;
	text-transform: uppercase;
	padding-bottom: 0.25rem;
	text-decoration: none;
	border-bottom: 1px solid var(--bs-primary);
  }
  
  /* ==================
  Media Queries
  =====================*/
  
  @media (max-width: 1024px) {
	  .top-bar {
		  flex-direction: column;
		  align-items: flex-start;
	  }
  
	  .top-nav {
		  display: flex;
		  flex-wrap: wrap;
		  gap: 0.5rem;
	  }
  }
  
  @media (max-width: 768px) {
	  .services-overview,
	  .pricing-tiers,
	  .about,
	  .footer-columns {
		  flex-direction: column;
		  align-items: center;
	  }
  
	  .service-card,
	  .tier {
		  width: 90%;
	  }
  
	  .hero {
		  padding: 2rem 1rem;
	  }
  
	  .about .image,
	  .about .content {
		  width: 100%;
	  }
  
	  .top-nav a {
		  margin-left: 0;
	  }
  }
  
  @media (max-width: 480px) {
	  body {
		  font-size: 15px;
	  }
  
	  h1 {
		  font-size: 1.75rem;
	  }
  
	  .btn {
		  padding: 0.5rem;
		  font-size: 0.9rem;
	  }
  }