@charset "UTF-8";

/* CSS Document */

/*
Theme Name: Savasa
Theme URI: https://savasawellness.com/
Author: Consociate
Author URI: https://consociate.marketing
Text Domain: savasa-wellness
*/

/* GENERAL 
#################################################### */

html, body {
  overflow-x: hidden;
}

body { font-family: "raleway", sans-serif; font-weight: 400; font-style: normal; 
	font-size: 20px }

h1, h2, h3, h4, h5, h6 { font-family: "raleway", sans-serif; line-height: 1.25em; 
	font-weight: 700; margin-bottom: 1.25rem }
h1 { font-size: 60px }
h2 { font-size: 52px }
h3 { font-size: 44px }
h4 { font-size: 34px }
h5 { font-size: 28px }
h6 { font-size: 22px }

p { margin-bottom: 1.4rem }

.left { text-align: left }
.right { text-align: right }
.center { text-align: center }

/* Fonts */

.norm { font-weight: 400 }
.semi { font-weight: 600 }
b, strong, .bold { font-weight: 700; }

.caps { text-transform: uppercase }
.small, small { }

.sans { font-family: "raleway", sans-serif; font-weight: 400 }
.script { font-family: "coquito", sans-serif; }

/* // <weight>: Use a value from 400 to 700
// <uniquifier>: Use a unique and descriptive class name */

/* Colors */

.bg-purple { background-color: #5B3A5E }
.bg-teal { background-color: #6AAFAA }
.bg-orange { background-color: #F28C38 }
.bg-cream { background-color: #F7F3EE }

.txt-purple { color: #5B3A5E }
.txt-teal { color: #6AAFAA }

/* Nav */

.navbar { background: #ffffff; border-top: solid 10px #5B3A5E; padding: 20px 0; text-align: center;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important }
.home .navbar { background: #6AAFAA }

.nav-link, 
  .navbar-nav .nav-link.active { font-size: 16px; text-transform: uppercase; font-weight: 600; border-bottom: 3px solid transparent }
.navbar-nav .nav-link.active { border-bottom: 3px solid #6AAFAA }
.home .nav-link, 
  .home .navbar-nav .nav-link.active { color: #fff }

.nav-link:hover { color: #000000; padding-bottom: 8px; border-bottom: 3px solid #6AAFAA }
.home .nav-link:hover { color: #5B3A5E; padding-bottom: 8px; border-bottom: 3px solid #6AAFAA }

.navbar-expand-lg .navbar-nav .nav-link { padding-left: 0 !important; padding-right: 0 !important }
.nav-item { margin-left: 25px; margin-right: 25px }


.navbar-expand-lg .navbar-nav .nav-link { padding-left: 25px; padding-right: 25px }
.navbar-brand { width: 200px }

/* Header animation */

#anime {
    animation: kenny 5s ease-out forwards;
    background-size: cover;
    background-position: center;
    height: 100vh;
    overflow: hidden;
    scale: 1.2;
    background-image: linear-gradient(175deg, rgba(34, 56, 70, 1) 0%, rgba(34, 56, 70, 0.5) 26%, rgba(34, 56, 70, 0) 50%, rgba(34, 56, 70, 1) 100%), url(images/savasa-hand-touching-rippling-water-1920.jpg);
}
@keyframes kenny {
  100% {
    scale: 1;
  }
}

/* Header */

#header .wrap-text { 
    position: absolute; top: 35%; left: 75px; text-align: center }
#header .title { color: #5B3A5E; font-family: "coquito", sans-serif; font-weight: 400; font-size: 50px }
#header p { font-size: 26px; color: #fff; text-align: center; margin-bottom: 25px }
#header .btn { margin-bottom: 15px }

/* Home */

#intro { padding-top: 100px; padding-bottom: 100px; background: #fff; 
	position: relative; z-index: 10 }
#intro h3.title { font-size: 34px }
#intro .subtitle { background: #eee; color: #5B3A5E }
#intro .logo { width: 250px; margin-bottom: 25px }
#intro .feat-ep { padding-left: 50px }

/* Footer */

#footer { background: #fff; padding-top: 50px; padding-bottom: 150px; border-bottom: 10px solid #6AAFAA;
	text-align: center; font-size: 18px }
#footer img { width: 250px }
#footer a { color: #6AAFAA }
#footer .social  { margin-bottom: 15px }
#footer .social .bi { margin: 0 5px }

/* Pages */

#page-header { padding-top: 400px; padding-bottom: 50px; border-bottom: 7px solid #E60219 }


/* Theme */

.subtitle { background: #eee; color: #5B3A5E; padding: 10px 20px 13px; font-weight: 700; 
	font-size: 26px; display: inline-block;
    margin-bottom: 20px; margin-left: -17px }

.border-wave { width: 100%; background-size: cover !important; position: relative; z-index: 5 }
.border-wave.top { background: url(images/border-wavy-white.png) center top no-repeat;
	height: 180px; margin-top: -180px; margin-bottom: -1px; }
.border-wave.bottom { background: url("images/border-wavy-white-footer.svg") center bottom no-repeat; background-size: contain;
	height: 115px; margin-top: -114px }

.image-accent {
    position: relative;
    display: inline-block;
    --accent-width: 35%;
    --accent-height: 8px;
	margin-top: 50px; margin-bottom: 50px !important
}

.image-accent::before,
.image-accent::after {
    content: "";
    position: absolute;
    width: var(--accent-width);
    height: var(--accent-height);
}

.image-accent::before {
    top: -22px;
    left: 0;
    background: #F7F3EF;
}

.image-accent::after {
    bottom: -22px;
    right: 0;
    background: #6AAFAA;
}

#belief .image-accent::before { background: #F28C38 }
#belief .image-accent::after { background: #6AAFAA }


/*
####################################################
C O M P O N E N T S
####################################################
*/

/* IMAGES */

img { max-width: 100%; height: auto; }

.rotate { border: 10px solid #fff; rotate: 5deg;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important; }


/* LINKS */

a { text-decoration: none; transition: 200ms; font-weight: 700; color: #6AAFAA }
a:hover { color: #5B3A5E }

a img { transition: 200ms }
a img:hover { opacity: .7 }

/* BUTTONS */

.btn { background: #5B3A5E; color: #fff; text-transform: uppercase; border-radius: 25px; padding: 0.75rem 1.5rem 0.85rem; font-weight: 700 }
.btn:hover { background: #F28C38; color: #fff }

.wp-block-button__link { background-color: #5B3A5E; color: #fff; text-transform: uppercase;  font-weight: 700;  font-size: 1rem;
	padding: 0.75rem 1.5rem 0.85rem !important;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.wp-block-button__link:hover { background-color: #DD7C2B !important; color: #fff; text-decoration: none }

.btn-teal { background: #6AAFAA; color: #ffffff }

.btn-set .btn { margin-right: 10px }

/* Shadows */

.shadowed { box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important; }
.shadows img { box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; } /* fix img border radius */

.shadow-text { text-shadow: -1px -1px 1px #fff, 1px 1px 1px rgba(0,0,0,.50) }

/* Rounded edges */

.round { border-radius: 25px }

/* Spacing */

.max-800, .max-1000, .max-1200, .max-w { margin-left: auto; margin-right: auto }
.max-800 { max-width: 800px }
.max-1000 { max-width: 1000px }
.max-1200 { max-width: 1200px }

.mar-0 { margin: 0 }
.mar-btm-25 { margin-bottom: 25px }
.mar-btm-0 { margin-bottom: 0 !important }
.mar-top-0 { margin-top: 0 !important }

.pad-left { padding-left: 7% }
.pad-25 { padding-bottom: 25px }

/* Positioning */

.pos-rel { position: relative !important }

/*
####################################################
E X T R A S
####################################################
*/

/* Anchor scroll sticky menu offset */
html {
  scroll-padding-top: 150px;
}

/* WP admin bar offset */
body.admin-bar .navbar {
    margin-top: 32px;
}

/* Nav scroll */

.navbar-fixed-top.scrolled  {
  padding: 10px 0;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  transition: padding box-shadow 200ms ease
}
.navbar-fixed-top.scrolled .navbar-brand {
  width: 150px;
  transition: width 200ms ease
}

/* Full-width in WP Block Editor (Cover block) */
.alignfull {
    width:  100vw;
    max-width:  100vw;
    margin-left:  calc(50% - 50vw);
}
.wp-block-cover.alignfull {
    padding-top: 100px; padding-bottom: 100px; margin-top: 50px; margin-bottom: 75px
}
.wp-block-cover__inner-container { max-width: 1200px }

.alignfull.flush { margin-top: 0; margin-bottom: 0 }

#XXX { overflow-x: hidden } /* Fix for PC horizontal scroll bars with .alignfull */

/* Image Wraps */

.wrap { height: 325px }
.wrap img { 
	object-fit: cover;
    width: 100%;
    height: 100% !important;
}

/* Nav dropdown on hover */
.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

/* HEADING LINES */

/* under + left */
.bordered { position: relative; display: inline-block; margin-bottom: 50px }
.bordered::after { 
	content: "";
	position: absolute;
	bottom: -25px; /* Aligns with bottom of parent */
	left: 0;   /* Starts at left */
	width: 150px;
	height: 10px; /* Adjust thickness as needed */
	background-color: #6AAFAA; /* Adjust color */
}

.heading {
  position: relative;
  display: inline-block; /* keeps text width tight */
  text-align: center;
}
.heading::after {
  content: "";
  display: block;
  width: 100px; /* set your line width */
  height: 8px; /* thickness of the line */
  background-color: #5B3A5E; /* color of the line */
  margin: 25px auto 0; /* centers line below text */
}
.heading.teal::after { background-color: #6AAFAA }

/* Line centered after text vertically */
.line {
  display:inline-block;
  padding: 10px 10px 15px; /* bottom padding should be higher to make up for pseudo border height */
  background: linear-gradient(90deg, transparent 25%, #fff 25%, #fff 75%, transparent 75%);
  background-size: 100% 5px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}

/* Line after text Horizontally */
#partners .heading-line { 
  display: flex;
  align-items: center;
  gap: 1em; /* space between text and line */ }
#partners .line { 
  flex-grow: 1;
  height: 10px;
  background-color: #64B9AE; /* line color */ }




/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Custom */
@media (min-width: 1925px) {

}

/* Extra large devices (large desktops, 1200px and up)
 * No media query since this is the default in Bootstrap because it is "mobile first"
 */
@media (min-width: 1200px) {

}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {

	.nav-item { margin-left: 15px; margin-right: 15px }
	
	#header .wrap-text { top: 25% !important }
	#header .title { font-size: 42px }

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 991px) {
	
	.m-hide { display: none }
	.m-show { display: block }
	
	/* Breaks WP BLOCK columns early w/ tweaks */
	.wp-block-columns { display:block } 
	.wp-block-column:nth-child(2n),
		.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n) { margin-left: 0 }
	
	/* Force columns to stack earlier */
	.wp-block-columns.stack-early {
		flex-direction: column !important;
	  }
	
	/*
	.offcanvas { background: rgb(10,99,153);
		background: linear-gradient(166deg, rgba(10,99,153,1) 0%, rgba(108,201,244,1) 30%, rgba(0,147,216,1) 100%); }
	.offcanvas-title { color: #fff }
	.offcanvas-title img { max-width: 200px }
	.navbar-expand-lg .navbar-nav .nav-link { color: #0A6399; font-size: 22px; font-weight: 700 }
	.offcanvas .navbar-nav .nav-link.active { border-bottom: 0 }
	*/
	
	.offcanvas { background:
		linear-gradient(135deg, rgba(91, 58, 94, .7), rgba(91, 58, 94, 1)),
		url('/wp-content/uploads/2026/09/ocean-waves.jpg') center / cover no-repeat }
	.offcanvas-title img { max-width: 150px }
	.home .navbar-toggler {  background: none; border: 1px solid #fff; font-size: 30px; color: #fff  }
	.navbar-toggler {  background: #6AAFAA; border: 1px solid #fff; font-size: 30px; color: #fff  }
	
	h1 { font-size: 52px !important }
	h2 { font-size: 44px !important }
	h3 { font-size: 34px !important }
	h4 { font-size: 28px !important }
	h5 { font-size: 22px !important }
	h6 { }
	
	.navbar-nav { margin-left: 0 !important }
	.nav-link, .navbar-nav .nav-link.active { font-size: 24px; color: #fff }
	.nav-link:hover, .navbar-nav .nav-link.active:hover { color: #6AAFAA  }
	.navbar-brand { width: 125px; }
	#header .wrap-text p { font-size: 26px; font-weight: 700 }
	
	.wp-block-cover.alignfull { padding-bottom: 50px }
	
	#intro { padding-top: 25px }
	
	#signup { padding-bottom: 100px }
	
	footer { margin-top: 50px }
	footer .mid { margin-top: 50px; margin-bottom: 50px }
	.border-wave.bottom { margin-top: -150px }

}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 767px) {
	
	.reverse-mobile { flex-direction: column-reverse }
	
	.intro { padding: 25px }
	
	#header .wrap-text {
		top: 25% !important; 
		left: 0 !important; 
		padding: 0 25px;
	}
	#head.contact { height: 700px } /* contact */
	#head.podcast { min-height: 600px !important; margin-top: 75px !important;  } /* contact */
}

/* Extra small devices (portrait phones, less than 544px) */
@media (max-width: 543px) {

}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* General Mobile Breakpoint (Covers iPhone 13, 14, 15, Pro, etc.) */
@media only screen and (max-width: 430px) {
	
    /* ADDY's iPhone 13
		Safe catch-all for almost all modern portrait smartphones */
	
	#header .title { font-size: 40px !important }
	#header p { font-size: 20px }
}