/* ===========================
	1. RESET & BASE STYLES
=========================== */
html, body { overflow-x: hidden; }

/* ===========================
	2. GLOBAL UTILITIES
=========================== */
/* ===== Colors ===== */
.origin-background-color{ background-color: hsl(180.66, 100%, 35.88%) !important;}
.origin-color{ color: hsl(180.66, 100%, 35.88%) !important; }
.color-gray{ color: hsl(216, 2.92%, 66.47%) !important; }
.color-black{ color: black !important; }
.background-blk{ background-color: black !important; }
.background-light-grey{ color: hsl( 0, 0%, 90.98%) !important; }


/* ===== Backgrounds & Images ===== */
.bg-img-position-right{
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
}
.fit-cover{ object-fit: cover; }

/* ===== Heights & Widths ===== */
.h-70vh{ height: 70vh; }
.h-100dvh{ height: 100dvh; }
.min-vh-80{ min-height: 80vh !important; }
.max-width-70{ max-width: 70% !important; }
.max-width-80{ max-width: 80% !important; }
.max-width-33{ max-width: 33.33333% !important;}
.width-100{ width: 100%; }
.width-300{ width: 300px !important;}
.line-h-1{ line-height: 1; }

/* ===== Typography ===== */
.c-text-xs{ font-size: 1.25rem; }
.c-text-s{ font-size: 1.3rem; }
.c-text-2{ font-size: 2rem; }
.c-text-three{ font-size: 3rem; }
.c-text-3{ font-size: 3.5rem; }
.c-text-l{ font-size: 4rem; }
.c-text-5{ font-size: 5rem; }
.c-text-6{ font-size: 6rem; }
.c-text-lg{ font-size: 10rem; }
.c-font-weight600{ font-weight: 600 !important; }
.c-font-bolder{ font-weight: 800 !important; }
.no-underline { text-decoration: none !important;}

/* ===== Spacing ===== */
.space-evenly{ justify-content: space-evenly !important; }
.padding-t-3 { padding-top: 3rem !important; }
.padding-t-5 { padding-top: 5rem !important; }
.padding-b-3 { padding-bottom: 3rem !important; }
.padding-b-4 { padding-bottom: 4rem !important; }
.padding-0{ padding: 0 !important; }
.padding-4{ padding: 4rem !important; }
.margin-left-10{ margin-left: 10rem !important; }
.custom-margin-bottom{ margin-bottom: 3rem !important; }
.mb-22{ margin-bottom: 22rem !important; }

/* ===== Positioning & Layers ===== */
.z-1 { z-index: 1 !important;}

/* ===== Borders & Containers ===== */
.border-primary{ box-shadow: 0 0 0 3px #000; }
.custom-container-max{
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1400px !important;
  padding-right: 15px !important;
}

/* ===========================
	3. GLOBAL ANIMATIONS
=========================== */
@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(30%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-left {
   0% { transform: translateX(0);}
   100% { transform: translateX(-50%);}
}
.observe-fade-slide {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}
.fade-slide-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.overlay-content {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.overlay-content.hide {
  transform: translateY(-100%);
  opacity: 0;
}
.overlay-content.show {
  transform: translateY(0);
  opacity: 1;
}

/* ===== Navbar show/hide ===== */
.navbar.hide { transform: translateY(-100%); }
.navbar.show { transform: translateY(0); }

/* ===============================
	4. COMPONENT-SPECIFIC CSS
=============================== */

/* ---------- Navbar ---------- */

.navbar {
 	background: black;
  transition: transform 0.3s ease;
}
.text-padding{ padding: .5rem 1rem !important; }
a:hover{
  color: hsl(216, 2.92%, 66.47%) !important;
  background: none !important;
}
  
/* ---------- Home Page ---------- */

/* ===== Banner ===== */
.overlay-content button{
  border: none;
  height: 30px;
	width:450px;
	transition: filter 0.3s ease, opacity 0.3s ease;
  }
.overlay-content button:hover{ opacity: 0.8;}
.overlay-content button span{
	font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
}

/* ===== Expert Section ===== */
.expert-message{ max-width: 49%; }

/* ===== Brand Your Brand Section ===== */
.product-bg{ background-color: hsl(216, 2.92%, 66.74%); }
.productSection-title-2{ font-size: 5.5rem; }
.col-md-4{ max-width: 28.33333% !important; }

/* ===== Branding Your Brand Section ===== */
.branding-title-1{ font-size:7rem !important; }
.quote-button{
  padding-right: 26rem;
  padding-bottom: 5rem;
}

/* ===== Making it Happen Section ===== */
.makeItHappen-button-container{ padding: 3rem; }
.makeItHappen-button{ border: 1px solid hsl(180.66, 100%, 35.88%) !important; }
.makeItHappen-button:hover{
  color: white !important;
  background-color: hsl(180.66, 100%, 35.88%) !important;
}

/* ---------- Blog Page ---------- */

.blog-paragraph{
  max-width: 30%;
  margin: 0 auto;
  line-height: 1.6;
}
.row{ justify-content: center; } /* content inside blog card */
.col-md-8{ padding-top: 3rem; } /* content inside blog card */
.mt-3{ color: #00b5b9 !important;}
.ml-1{ /* blog card author's names */
  pointer-events: none;
  color: black !important;
  text-decoration: none !important;
  }
.breadcrumb{
  display:none !important;
}

/* ---------- About Page ---------- */

/* ===== From A Basement ===== */
.basement-text-container{ margin-top:8rem; }

/* ===== Slide Show ===== */
.carousel-indicators li{ background-color: grey !important; }

/* ===== Meet The Team ===== */
.wave-border svg {
  width: 100%;
  height: 100px;
  margin-bottom: -1px; /* Prevent visual gaps */
  line-height: 0;
}

/* ---------- Services Page ---------- */

/* ===== Banner ===== */
.btn-lg{
	width: 400px;
	border-color: hsl(180.66, 100%, 35.88%) !important;
}
.btn-light:hover {
	background-color: hsl(180.66, 100%, 35.88%) !important;
	color: white !important;
}

/* ===== Creating Brands Not Products ===== */
.creatingBrandNotProducts-title-container{ padding-top: 5rem; }
.creatingBrandNotProducts-title-1{ font-size: 5.8rem; }
.creatingBrandNotProducts-title-2{ font-size: 7rem; }
.creatingBrandNotProducts-text-container{
	margin-top: 3rem;
	margin-bottom: 5rem;
}

/* ---------- Holiday Lookbook Page---------- */

#pageData { background-color: #e8e8e8; }
.carousel-control-next-icon{ background-color: rgba(0, 0, 0, 0.3); }
.carousel-control-prev-icon{ background-color: rgba(0, 0, 0, 0.3); }

/* ---------- Marketing QR Page ---------- */

/* ===== Sunset Banner Message ===== */
.sunset-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('https://store-media.mpowerpromo.com/6810e561a2a397b79e3abe75/pages/686eb02d31d940284ba395c5/4-		1752097566435.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}
/* ===== Excursion ===== */
.excursion-container{ padding-top: 8rem !important; }
.overlay-image {
	top: 63%;
	left: 55.2%;
}

/* ===== Men's Apparel ===== */
.apparel-text-container{ margin-bottom: 17rem; }
.premium-comfort-tee{
	margin-top: 43%;
	margin-left: 36%;
}
.left-container{ padding-top: 17rem; }
.legends-sherpa-1{ margin-left: 6rem; }
.legends-sherpa-2{
	bottom: -4%;
	left: 67%;
}
.carson-pant-container{ margin-right: 10rem; }
.legends-carson-pant-2{
	right: 27%;
	top: 21%;
}

/* ===== Women's Apparel ===== */
.womens-header-2{
	top:30%;
	left:40%;
}
.rhone-hoodie{ margin-top: 7rem; }
.legends-pullover-2{
	top: 25%;
	right: 18%;
}
.legends-pullover-1{ margin-left: 5rem; }
.legends-leggings-1{ margin-top: -9rem; }
.legends-leggings-2{
	top:37%;
	left:55%;
	max-width: 400px !important;
}
.legends-pullover-3{
	margin-left: -6rem;
	margin-bottom: -1rem;
}
.legends-pullover-4{
	top:20%;
	left:9%;
}

/* ===== Golf Gear ===== */
.golf-text-container{
	margin-bottom: 22%;
	margin-right: 25%;
}
.greyson-vest{ margin-top: 10rem; }

/* ===== Blankets ===== */
.kanata-throw-wrapper img{ top: 5rem; }
.terrytown-wrapper img{ top: 17rem; }
.kanata-stadium-wrapper img{top: 6rem; }

/* ===== Hard Goods ===== */
.candle-holder{
	margin-top: -63%;
	margin-left: 47%;
}
.plant-wrapper{ margin-left: 10%; }
.lifestyle-2{ top: 10%; }

/* ---------- Footer ---------- */
.footer-logo{ height: 50px !important; }
.footer-links{ padding: .5rem 1rem; }
.footer-item{ border-right: 2px solid black !important; /* Adds a border on the right side of each tab */ }

/* === Desktop View ===*/
@media (min-width: 1200px){
	.marketing-text{
	font-size: 1.25rem;
		max-width: 35% !important
	}
}
  /*Tablet View*/
  @media (min-width:601px) and (max-width:1000px) {
    .nav.d-flex.justify-content-center.align-items-center {
  display: none !important;
}
		.overlay-content h2{
    padding-bottom: 20rem !important;
    }
    .quote-button {
    justify-content: center !important;
  padding-right: 0 !important;
  padding-top: 2rem;
    }
    .makeItHappen-button-container{
    padding: 1rem !important;
    }
    .margin-left-10{ /* About Page row */
    margin-left: 0 !important;
    }
    .ml-md-auto{
    margin-left: 17rem !important;
    }
		.aboutBanner-titleButton-container{
		padding-top: 4rem !important;
		}
    .aboutBanner-title{
    font-size: 2.4rem !important;
    }
    .aboutBanner-title-1{
    font-size: 2rem !important;
    }
    .aboutBanner-title-2{
    font-size: 3rem !important;
    }
    .mt-xl-5{
    margin-top: 3rem !important;
    }
    .meetTheTeam-img-container{
    flex: 0 0 auto !important;
      max-width: 50% !important;
    }
     .footer-item {
       font-size: 0.7rem !important;
      line-height: 0px;
    }
    .bottom-footer-center{
justify-content: center !important;
} 
    .blog-banner-title-1{
    font-size: 4rem !important;
    }
     .blog-banner-title-2{
    font-size: 3rem !important;
    }
    .blog-paragraph{
    max-width: 75% !important;
    }
		.marketing-text{
		max-width: 80% !important;
		}
		.left-container{
		padding-top: 0 !important;
		}
		/* === Marketing QR === */
		.margin-tablet-view-0{
		margin: 0 !important;
		}
		.position-init-tablet-view{
		position: initial !important;
		}
		.tablet-text-size-5{
		font-size: 5rem;
		}
		.blankets-tablet-view{
		margin-bottom: 4rem;
		}
  }
  /*Mobile View*/
  @media (max-width: 600px){
    .container-max{
    padding-left: 0 !important;
    }
    .navbar-brand{
    margin-right: 0 !important;
    }
    .mr-3{
    margin-right: 0 !important;
    }
    .social-nav{
    padding-right: 0 !important;
      padding-left: 0 !important;
    }
    .overlay-content h2{
    padding-bottom: 12rem !important;
      font-size: 2rem !important;
    }
    .overlay-content button{
    width: 300px !important;
    }
    .nav.d-flex.justify-content-center.align-items-center {
  display: none !important;
}
  .col-md-4 {
    max-width: 100.33333% !important;
    }
.col-6 {
        max-width: 100% !important;
}
.branding-title-1 {
        font-size: 3rem !important;
    }
.branding-title-2 {
        font-size: 2rem !important;
    }
.quote-button {
    display: flex;
    justify-content: center !important;
  padding-right: 0 !important;
  padding-top: 2rem;
    }
.promotionTitle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
.promotion-title-2 {
    font-size: 3rem !important;
    }
    .footer-item {
       font-size: 0.7rem !important;
      line-height: 0px;
    }
    .overlay-content-about h2{
    font-size: 2rem !important;
    }
    .margin-left-10{
    margin-left: 0 !important;
    }
		.aboutBanner-titleButton-container{
		padding-top: 4rem !important;
		}
    .aboutBanner-title{
    font-size: 2.3rem !important;
    }
     .aboutBanner-title-1{
    font-size: 2rem !important;
    }
    .aboutBanner-title-2{
    font-size: 3.9rem !important;
    }
    .bottom-footer-center{
justify-content: center !important;
} 
		.serviceBanner-title-container{
		padding-top: 4rem !important;
		}
    .serviceBanner-title{
    font-size: 4rem !important;
    }
    .title-text-container{
    max-width: 100%;
    }
    .creatingBrandNotProducts-title-1{
    font-size: 3.5rem !important;
    }
    .creatingBrandNotProducts-title-2{
    font-size: 4rem !important;
    }
    .btn-lg{
    width: 300px !important;
    }
		.blogTitle-container{
		padding: 6rem !important;
		}
    .blog-banner-title-1{
    font-size: 4rem !important;
    }
    .blog-banner-title-2{
    font-size: 3rem !important;
    }
    .blog-paragraph{
    max-width: 75% !important;
    }
    .row{
  margin-left: 0px !important;
  }
		/* === Marketing QR === */
		.sunset-banner::before{
		background-position: left !important;
			filter: brightness(2);
		}
		 .sunset-banner {
    min-height: 58vh !important;
  }
		.marketing-text-container{
		margin-top: 1rem !important;
		}
		.marketing-text{
font-size: 1.05rem !important;
}
		 .overlay-image {
    position: initial !important;
  }
		.c-text-size-2{
		font-size: 2.5rem !important;
		}
		.c-text-size-3{
		font-size: 3rem !important;
		}
		.c-text-size-4{
		font-size: 4rem !important;
		}
		.max-width-33{
		max-width: 90.33333% !important;
		}
		.premium-comfort-tee {
    margin-top: 0% !important;
    margin-left: 0% !important;
}
		.left-container{
		padding-top: 0 !important;
		}
		.legends-sherpa-1{
		margin-left: 0 !important;
		}
		.legends-sherpa-2{
		bottom: 0 !important;
			left:0 !important;
			position: inherit !important;
		}
		.carson-pant-container{
		margin-right: 0!important;
		}
		.legends-carson-pant-2{
		position: inherit !important;
			right: 0 !important;
			top: 0 !important;
		}
		.justify-content-center-media{
		justify-content: center !important;
		}
		.text-align-center-media{
		text-align: center !important;
		}
		.padding-media-0{
		padding: 0 !important;
		}
		.margin-media-0{
		margin: 0 !important;
		}
		.position-media-int{
		position: initial !important;
		}
		.legends-leggings-1{
		margin-top: 4rem !important;
		}
		.greyson-vest{
		margin-top: 0 !important;
		}
		.blankets-mobile-view{
		position: initial !important;
		}
		.hard-goods{
		margin-bottom: 12rem !important;
		}
		.hardGoods-media-view{
		justify-content: center !important;
		}
		.candle-holder{
		margin: 0 !important;
		}
		.cornhole-set-media{
		background-position: 69% !important;
			min-height: 69vh !important;
		}
  }