/*
Theme Name: Coastal Fresh
Author: Colossus Media Group
Description: Coastal Fresh Theme
Version: 1.0
Template: bootstrap-component-blox
*/

/* ===== Fonts ===== */

@font-face {
    font-family: 'Males';
    src: url('fonts/Males.woff2') format('woff2'),
        url('fonts/Males.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-SemiBold.woff2') format('woff2'),
        url('fonts/Gabarito-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-ExtraBold.woff2') format('woff2'),
        url('fonts/Gabarito-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-Bold.woff2') format('woff2'),
        url('fonts/Gabarito-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-Regular.woff2') format('woff2'),
        url('fonts/Gabarito-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
	--bff-primary: #12393C;
	--bff-secondary: #EF733E;
	--bff-accent: #66C7C0;
	--bff-purple: #00464F;
	--bff-dark: #12393C;
	--bff-white: #FFF1E7;
	--bff-font: 'Montserrat';
}

/* ===== Global ===== */

html,
body { 
	overflow-x: hidden;
	font-family: var(--bff-font);
	color: var(--bff-dark);
}

a,
a:hover {
	text-decoration: none;
}

/* ===== Custom Classes ===== */

.z-front {
	z-index: 5;
}

.z-back {
	z-index: 1;
}

.fw-600 {
	font-weight: 600;
}

.fw-800 {
	font-weight: 800;
}

.font-script {
	/*font-family: 'Males';*/
	font-family: "Nerko One", cursive;
}

.rounded-lg {
	border-radius: 15px;
}

.shadow {
    box-shadow: 0 0 1rem rgba(0,0,0,.3)!important;
}

.lh-sm {
	line-height: .8em!important;
}

.bff-display-1 {
   font-size: 6rem;
}

.b-25 {
	bottom: 25%;
}

.w-70 {
	max-width: 70%;
}

/* ===== Word Rotation ===== */

.bff-rotate-word {
	position: absolute;
	bottom: 0;
	left: 0
}

.bff-rotate-word-hide {
	display: none;
}

/* ===== Text Color ===== */

.bff-text-primary {
	color: var(--bff-primary);
}

.bff-text-secondary {
	color: var(--bff-secondary);
}

.bff-text-dark {
	color: var(--bff-dark);
}

.bff-text-accent {
	color: var(--bff-accent);
}

.text-white {
	color: var(--bff-white) !important;
}

.bff-text-purple {
	color: var(--bff-purple) !important;
}

/* ===== Background Color ===== */

.bff-bg-primary {
	background-color: var(--bff-primary);
}

.bff-bg-secondary {
	background-color: var(--bff-secondary);
}

.bff-bg-dark {
	background-color: var(--bff-dark);
}

.bg-white {
	background-color: var(--bff-white)!important;
}

.bff-bg-purple {
	background-color: var(--bff-purple)!important;
}

/* ===== Button ===== */

.btn {
	font-weight: 800;
	border-radius: 3px;
	font-size: 18px;
	padding: 10px 20px;
	border-radius: 50px;
}

.bff-btn-primary {
	background-color: var(--bff-primary);
	color: var(--bff-accent);
}

.bff-btn-primary:hover {
	background-color: var(--bff-accent);
	color: var(--bff-white);
}

.bff-btn-secondary {
	background-color: var(--bff-secondary);
	color: var(--bff-white);
}

.bff-btn-secondary:hover {
	background-color: var(--bff-accent);
	color: var(--bff-purple);
}

.bff-btn-dark {
	background-color: var(--bff-dark);
	color: var(--bff-white);
}

.bff-btn-dark:hover {
	background-color: var(--bff-dark);
	color: var(--bff-white);
	opacity: .8
}

.bff-btn-accent {
	background-color: var(--bff-accent);
	color: var(--bff-primary);
}

.bff-btn-accent:hover {
	background-color: var(--bff-secondary);
	color: var(--bff-white)
}

.bff-btn-purple {
	background-color: var(--bff-purple);
	color: var(--bff-accent)!important
}

.bff-btn-purple:hover {
	background-color: var(--bff-secondary);
	color: var(--bff-white)!important
}

/* ===== Navbar ===== */

#nav-header .dropdown-toggle::after {
	font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	position: relative;
	top: 5px;
}

#navbar-brand-logo img, #bff-footer img.bff-footer-logo {
    width: 200px;
}

@media (max-width: 991px) {
	#navbar-brand-logo img, #bff-footer img.bff-footer-logo {
		width: 100px;
	}	
}

#bff-top-navbar a {
	transition: all .3s;
	color: var(--bff-secondary);
}

#bff-top-navbar a:hover {
	color: var(--bff-accent)!important;
}

#navbar-main-menu .nav-link {
	color: var(--bff-purple);
	font-weight: bold;
	font-size: 18px;
	transition: all .3s;
}

#navbar-main-menu .nav-link:hover {
	color: var(--bff-secondary);
}

#bff-logo {
	width: 270px
}

.bff-btn-navbar a {
	background: var(--bff-secondary);
	color: var(--bff-white)!important;
	padding-left: 25px!important;
	padding-right: 25px!important;
	margin-left: 20px!important;
	border-radius: 50px!important;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
}

.bff-btn-navbar a:hover {
	background: var(--bff-accent);
	color: var(--bff-dark)!important;
}

/* ===== Toggler ===== */

#toggler:focus, 
#toggler:active {
    outline: 0;
}

#toggler span {
    width: 30px;
    height: 3px;
    display: block;
    background-color: var(--bff-dark);
    margin: 7px 0;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

#toggler span:nth-child(1) {
    -webkit-transform: translatey(10px) rotate(-45deg);
        -ms-transform: translatey(10px) rotate(-45deg);
            transform: translatey(10px) rotate(-45deg);
}

#toggler span:nth-child(2) {
    opacity: 1;
    width: 0;
}

#toggler span:nth-child(3) {
    -webkit-transform: translatey(-10px) rotate(45deg);
        -ms-transform: translatey(-10px) rotate(45deg);
            transform: translatey(-10px) rotate(45deg);  
}

#toggler.collapsed span {
    -webkit-transform: translatey(0) rotate(0deg);
        -ms-transform: translatey(0) rotate(0deg);
            transform: translatey(0) rotate(0deg);
    opacity: 1;
    width: 30px;   
}

/* ===== Header ===== */

#bff-header .arrows {
	display: flex;
	color: #AEBC26;
	position: absolute;
	bottom: 10%;
	width: 50px;
	left: 9%;
	height: 100%;
}

#bff-header .arrows i {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	font-size: 30px;
	border-radius: 50px;
	border: 3px solid #AEBC26;
}

#bff-header .arrows i:hover {
	background: #34380b;
}

/* ===== Gallery ===== */

#bff-gallery img {
	transition: all .3s;
}

#bff-gallery img:hover {
	opacity: .8
}

/* ===== Rewards Section ===== */

#bff-rewards img {
	transform: scale(1.15);
	transform-origin: 100% 50%;	
}

/* ===== Menu ===== */

.bff-number {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	color: #fff;
	background: var(--bff-secondary);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-right: 5px;
}

.bff-active h4 {
	position: relative;
}

.bff-active h4:before {
	content: '';
	background-image: url(/wp-content/uploads/2023/11/swirl-1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 80px;
	height: 20px;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translatex(-50%);
}

#bff-nav-items img.w-100.shadow.rounded-lg.mb-3 {
    background-color: #fff !important;
}

/* ===== Fundraising ===== */

#bff-fundraising-blurbs i {
	background: var(--bff-secondary);
	height: 150px;
	width: 150px;
	color: var(--bff-white);
	border-radius: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

@media (min-width: 992px) {
	#bff-fundraising-blurbs .col {
		height: 400px !important;
	}	
}

.bff-bg-fundraising {
	background: url("/wp-content/uploads/2025/05/CoastalFresh_Web_FundraisingHeader-scaled.jpg") center/cover;
}

#bff-fundraising-form .has-form textarea {
    background: lightgrey !important;
    border-radius: 0 !important;
    border: 0px !important;
	font-weight: bold !important;
}

#fundraising-img {
	margin-top: -150px;
    margin-left: 0px !important;
    width: 1200px !important;
}

#bff-page-apply .wpforms-uploader,
#bff-page-apply textarea{
	background-color: #d3d3d3!important;
	border: none!important;
}

/* ===== Has Form ===== */

#bff-modal-rewards .wpforms-submit {
	background: var(--bff-accent)!important;
	color: var(--bff-primary)!important;
}

#bff-modal-rewards .wpforms-submit:hover {
	background: var(--bff-secondary)!important;
	color: #fff!important;
}

.has-form .wpforms-container {
	margin-bottom: 0!important;
	margin-top: 0!important;
}

.has-form .wpforms-submit {
	color: var(--bff-white)!important;
	background: var(--bff-primary)!important;
	padding: 10px 20px!important;
	border: none!important;
	font-weight: bold!important;
	border-radius: 50px!important;
}

.has-form select {
	border: 0!important;
	background: #D3D3D3!important;
	border-radius: 0!important;
}

.has-form .wpforms-submit:hover {
	background: var(--bff-accent)!important;
	color: var(--bff-primary)!important;
}

/* ===== Contact ===== */

#bff-contact-form .wpforms-container .wpforms-field {
	padding: 5px 0 !important;
}

#bff-contact-form .wpforms-container-full input,
.has-form input,
#bff-contact-form .wpforms-container-full textarea {
	color: black !important;
	border-radius: 0 !important;
	border: none !important;
	background: lightgrey !important;
	font-weight: 600!important;
}

#bff-contact-form .wpforms-container-full input::placeholder,
#bff-contact-form .wpforms-container-full textarea::placeholder{
	color: black !important;
	opacity: 1 !important;
}

#bff-contact-form #bff-contact-form-social i {
	display: inline-flex;
	font-size: 24px;
	height: 40px;
	width: 40px;
	border-radius: 50px;
	background: var(--bff-secondary);
	color: var(--bff-white);
	justify-content: center;
	align-items: center;
}

#bff-contact-form .col-lg-7 iframe {
	border: 8px solid var(--bff-accent) !important;
	border-radius: 30px;
}

/* ===== Footer ===== */
.bff-violet {
    color: var(--bff-purple);
}
#bff-footer .position-relative {
	left: 40px;
}

#bff-footer a {
	color: var(--bff-purple);
}

#bff-footer a:hover {
	color: var(--bff-secondary);
}

#bff-footer i {
	display: inline-flex;
	font-size: 24px;
	height: 40px;
	width: 40px;
	border-radius: 50px;
	background: var(--bff-accent);
	color: var(--bff-white);
	justify-content: center;
	align-items: center;
}

#bff-footer i:hover {
	background: var(--bff-secondary);
}

#bff-footer svg {
	max-width: 300px;
}

footer {	
	background: var(--bff-white); 
	color: var(--bff-dark);
	font-size: 18px;
}

footer a {
	color: var(--bff-dark);
}

footer a:hover {
	color: var(--bff-primary);
}

@media (max-width: 1400px) {
	#bff-contact-join h2 {
		font-size: 60px;
	}
}

@media (max-width: 992px) {
	
	.bff-display-1 {
   		font-size: 4.5rem;
	}
	
	#navbar-main-menu .nav-link {
		padding-top: 0;
	}
	
	.bff-btn-navbar a {
		margin-left: 0px!important;
		margin-bottom: 20px;
		display: inline-block;
		padding-top: 10px!important;
		margin-top: 5px
	}
	
	.w-70 {
		max-width: 100%;
	}
	
	#bff-footer .position-relative {
		left: 0;
	}
	
	#bff-header .btn {
		font-size: 12px;
		padding: 8px 12px;
	}
	
	.b-25 {
		bottom: 20%;
	}
	
	#bff-header .arrows i {
		height: 25px;
		width: 25px;
		font-size: 14px;
	}
	
	#bff-header .arrows {
		bottom: 5%;
	}

}

@media (max-width: 768px) {
	
	.bff-display-1 {
   		font-size: 3.5rem;
	}
	
	#bff-header .arrows i {
		height: 35px;
		width: 35px;
		font-size: 16px;
	}
	
	#bff-header .arrows {
		position: static;
	}
	
	.b-25 {
		bottom: 10%;
	}
}

@media (max-width: 576px) {}