/*
 Theme Name:   spinupcreative
 Template:     Divi
*/


@import url("../Divi/style.css");


/* =Theme customization starts here
-------------------------------------------------------------- */


.et_pb_text_inner a {
  letter-spacing: normal;
  transition: letter-spacing 3s ease;
}

.et_pb_text_inner a:hover {
  letter-spacing: 0.5px; /* Adjust as needed */
}

/* MAIN MENU SUBNAV MAKE WIDER */
.nav li ul {
	width:270px !important;
	padding: 10px 12px !important;
}

/* Main-menu styles */
.et_pb_menu .et_pb_menu__menu .menu-item-has-children > a::after {
	content: "\43"; /* Solid down triangle from ETMODULES */
	font-family: 'ETMODULES';
	color: #ffffff; /* White */
	font-size: 12px;
	margin-left: 8px;
	display: inline-block;
	vertical-align: middle;
}

/* Sub-menu styles */
 .nav li ul.sub-menu li {
	position: relative;
	padding-left: 1.5em;
	font-size: 14px !important;
	line-height: 2em !important;
	margin-bottom: 0.5em;
}

.nav li ul.sub-menu li::before {
	content: "\24"; 
	font-family: 'ETMODULES';
	position: absolute;
	left: 0;
	color: #ff9933;
}

.et_mobile_menu li a:hover, .nav ul li a:hover {
    background-color: transparent !important;
}

.et-menu li li a{
	width: 100% !important;
	padding: 0 !important;
}



/* REMOVING WHITE LINE BELOW MAIN HEADER - not totally working on all screen sizes though */
@media (max-width: 1500px) {
  /* Remove bottom spacing from custom header section */
  .et-l--header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Remove top spacing from first section on the page */
  .et_builder_inner_content .et_pb_section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Optional: Remove any margin between header and main content wrapper */
  .et-l--body {
    margin-top: 0 !important;
  }
}





/* VERTICALLY ALIGN CONTENT MODULES IN A ROW */
.vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

/* HOMEPAGE SLIDER STYLES */

/* Stop title and content from animating in each slide */
.et_pb_slider .et_pb_slide_description {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Prevent fade-in or slide-in for headers and text */
.et_pb_slider .et_pb_slide_title,
.et_pb_slider .et_pb_slide_content {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Optional: Prevent re-animation when slider changes */
.et_pb_slider .et_pb_slide {
  animation: none !important;
}


/* Fixed gradient overlay across all slides */

.custom-gradient-slider {
  position: relative;
  overflow: hidden;
}

.custom-gradient-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  z-index: 1;
  background: linear-gradient(to bottom, #142c37 0%, transparent 100%);
  pointer-events: none; /* Let clicks pass through */
}


/* Ensure slide titles/content stay above the overlay */
.custom-gradient-slider .et_pb_slide_description {
  z-index: 2;
}

.et-pb-controllers {
	background-image: url('/wp-content/uploads/2025/05/Slider-Controllers-Fishies-v2.jpg');
	background-size: auto 33px; /* Force image height */
	background-position: center center;
	background-repeat: no-repeat;
	height: 33px; /* Container height */
	padding: 7px 0 0 0;
	bottom: 0 !important;
}

/* Tablet (between 768px and 980px) */
@media (min-width: 768px) and (max-width: 980px) {
  .et-pb-controllers {
		padding: 8px 0 8px 0 !important;
	  	background-size: cover !important;
  }
	.et-pb-controllers a{
		width: 15px !important;
		height: 15px !important;
		border-radius: 15px !important;
	}
}

/* Mobile (below 767px) */
@media (max-width: 767px) {
  .et-pb-controllers {
		padding: 6px 0 20px 0 !important;
	  	background-size: cover !important;
  }
	.et-pb-controllers a{
		width: 12px !important;
		height: 12px !important;
		border-radius: 12px !important;
	}
}


.et-pb-controllers a{
	width: 20px !important;
	height: 20px !important;
	border-radius: 20px !important;
	background-color: #284b56 !important;
	border: 1px solid #fff !important;
	opacity: 1 !important;
}

.et-pb-controllers a.et-pb-active-control{
	background-color: #FF9933 !important;
	border: 1px solid #FF9933 !important;
}

/* homepage slider - Force full height at every container level */
.et_pb_slider,
.et_pb_slider .et_pb_slides,
.et_pb_slider .et_pb_slide {
  height: 100% !important;
  min-height: 80vh; 
  position: relative;
}

/* homepage slider - Make the slide content container use flexbox and align to top */
.et_pb_slider .et_pb_slide_description {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center;
}

.et_pb_slide_content h1{
	text-transform: uppercase !important;
	font-size: 42px !important;
	font-weight: 700 !important;
	letter-spacing: 5px !important;
}

/* Tablet (between 768px and 980px) */
@media (min-width: 768px) and (max-width: 980px) {
	.et_pb_slide_content h1{
		font-size: 38px !important;
	}
}

/* Mobile (below 767px) */
@media (max-width: 767px) {
  .et_pb_slide_content h1{
		font-size: 32px !important;
	}
}

.et_pb_slide_content .subtitle-centered{
    font-size: 20px !important;
    color: #589FAF !important;
    letter-spacing: 20px;
	font-weight: 400 !important;
	padding-left:10px !important;
}


.subtitle-left{
    letter-spacing: 20px;
}
.subtitle-centered{
    letter-spacing: 20px;
	padding-left: 10px !important;
}



/* HOMEPAGE MAP COMMUNITY LIST STYLES */
.location-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0px !important;
  margin: 0;
  list-style: none;
  position: relative; 
}


.location-item {
  width: 220px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.1rem;
  color: #122023;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  background-color: transparent;
  border: 1px solid #122023;
  transition: all 0.3s ease;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 150px auto;
  z-index: 1;
  text-transform: uppercase;
}
  .location-item:not(:first-child) {
  border-left: none;
}

/* dot separator */
.location-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-color: #f7941d;
  border: 5px solid #fff;
  outline: 1px solid #122023;
  border-radius: 50%;
  z-index:22
}


/* Hover state */
.location-item:hover {
  font-weight: 500;
  background-color: transparent;
  background-image: url('/wp-content/uploads/2025/05/FishHover-opacity20.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 150px auto;
}



/* Active state */
.location-item.active {
  color: #FFFFFF !important;
  background-color: #122023;
  background-image: url('/wp-content/uploads/2025/05/FishHover.png');
  font-weight: bold;
  border: none;
  z-index: -2;
}

@media (max-width: 1200px) and (min-width: 600px) {
  .location-item {
	height: 120px;
	font-size: 0.87rem;
    padding: 0.5em;
    line-height: 1.2em;
    background-size: 100px auto;
  }
     
  .location-item:not(:last-child)::after {
  right: -7px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
}  
.location-item:hover {
  background-size: 100px auto;
}   
    
}

/* HOMEPAGE MAP WRAPPER */
.map-wrapper {
  width: 100%;
  aspect-ratio: 1920 / 760;
  position: relative;
}

.map-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-marker {
  position: absolute;
  height: min(15%, 125px); /* use the smaller of 15% or 125px */
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}

@media (max-width: 980px) and (min-width: 768px) {
  .map-marker {
    min-height:80px; /* optional: fine-tune here for crispness */
    transform: translate(-55%, -70%);
}
}
  

.map-marker.active {
  display: block;
}


/* About page - special boxes */

.special-boxes .et_pb_column{
	border: 1px solid #122023;
}

.special-boxes .et_pb_column:not(:first-child) {
  	border-left: none !important;
}

/* dot separator */
.special-boxes .et_pb_column:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-color: #f7941d;
  border: 5px solid #fff;
  outline: 1px solid #122023;
  border-radius: 50%;
  z-index:22
}

.special-boxes h3{
	background-color: #122023;
	background-image: url('/wp-content/uploads/2025/05/FishHover.png');
	background-size: 170px;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	padding: 20px 30px;
    border: none;
    z-index: -2;
}

.special-boxes p{
	padding: 30px !important;
}

/* Mobile (below 767px) */
@media (max-width: 980px) {
.special-boxes .et_pb_column:not(:first-child) {
  	border-left: 1px solid #122023 !Important; 
}
.special-boxes .et_pb_column:not(:last-child)::after {
  content: none !important;
}
}

/* Project page - special boxes */

.project-boxes .et_pb_blurb_container{
	padding: 5px 30px 15px 30px;
}

/* checklist */
.checklist ul {
list-style-type: none!important;
}

.checklist ul li:before {
content: '\24'!important;
color: #ff9933;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1em !important;
}

.checklist ul li{
	line-height: 1.8em;
}
/* GRAVITY FORM SUBMIT BUTTON STYLES */
.gform_wrapper input[type="submit"] {
    background-color: #FF9933;
    padding: 0.5em 1em;
    color: #ffffff;
	font-size: 18px;
	font-weight: 500;
	border: 0 !important;
}

.gform_wrapper input[type="submit"]:hover {
    background-color: #3a616c;
}

.gform_wrapper .gfield_label {
  color: #fff !important;
}

.gform_wrapper.gravity-theme .gfield_required{
	color: #ff9933 !important;
}

.gform_wrapper.gravity-theme .ginput_counter{
	color: #fff !important;
}

body .gform_wrapper .gfield input[type="text"],
body .gform_wrapper .gfield input[type="email"],
body .gform_wrapper .gfield input[type="tel"],
body .gform_wrapper .gfield textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #589faf;
  font-size: 16px;
	background-color: #233e46;
}


/* Footer list link format */
.footer-list ul{
	list-style: none;
	padding-left: 0;
}

.footer-list ul li{
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.5em;
	font-size: 14px !important;
}

.footer-list ul li::before {
  	content: "\24"; 
	font-family: 'ETMODULES';
  	position: absolute;
  	left: 0;
  	color: #ff9933; 
}