/*
Theme Name: The Family Partnersip
Theme URI: https://www.ashtreedesign.net/ash-tree-design/contact-us.html
Author: Ash Tree Design
Author URI: https://www.ashtreedesign.net
Description: Private Theme
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
Tags: one-column
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Joiin
This theme, like WordPress, is licensed under the GPL.


*/










/* Fundamentals */




:root {
    --brand-navy: #1C7490;
    --brand-blue: #2EC1F1;
    --brand-grey: #134555;
    --brand-green: #68C240;
    --brand-sky: #E4F7FD;
}






*{outline:none;}



html {
	scroll-behavior: smooth;
      scroll-padding-top: 40px; /* height of your fixed header */
}

body {
    position: relative;
    overflow-x: hidden;
}

html,
body{
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	min-height:100%; 
      font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    background-color: #ffffff

}



body {
color: var(--brand-grey);
    font-size: 19px;
    line-height: 32px; 
}



a {
color: var(--brand-blue);
	text-decoration: underline;  transition: 0.4s;
}


a:visited {
color: var(--brand-grey);
	text-decoration: none;  transition: 0.4s;
}
	

a:hover {
	text-decoration: none; color: var(--brand-grey);
	outline: none;
}
	

a img ,img{
	border: none;
}	

a:focus, a:hover, a:active {
	outline: none;
}

a.more-link{display:none;}

img,fieldset{border:none;}

img{max-width: 100%;}

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.sticky{}
.screen-reader-text{}
.gallery-caption{}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}










/* Titles and Paragraphs */


h1,h2,h3,h4, h5{
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 10px;
	margin: 0;
  font-family: "League Spartan", sans-serif;
}

h1{font-size: 66px; line-height:59px; font-weight: 600;}

h2{font-size: 51px; line-height:48px; font-weight: 500; }

h3{font-size: 40px; line-height:38px; font-weight: 500;}

h4{font-size: 35px; line-height:35px; font-weight: 500; padding-bottom: 5px;}

h5{font-size: 13px; line-height:17px; text-transform: uppercase;     display: flex;
    align-items: center;
    gap: 14px; margin-bottom: 50px;  font-weight: 500; letter-spacing: 0.5px; margin-top: 10px;}


h5::before {
    content: "";
    width: 20px;
    height: 3px;
background-color: var(--brand-blue);
    flex-shrink: 0;
}


.centeredtitles h5,.centeredtitles h4,.centeredtitles h3,.centeredtitles h2 {
    justify-content: center;
}


p{
	padding: 0;
	margin: 0px; padding-bottom: 12px;
}

li{
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 7px;  
}


ul,ol{padding-left: 25px; margin-top: 0px}

ul.widget{
	list-style:none;
	padding:0;
	margin:0;
}

b,strong{

    font-weight: 600; color: var(--brand-grey);
}


blockquote{
    background-color: #FBFBFB;
    padding: 25px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 30px;
    border-bottom-color: #08344C;
    border-bottom-width: 5px;
    border-bottom-style: solid
}









/* Theme Wrappers */


.wrap{	 
    max-width: 1250px;     margin: 0 auto; padding-left: 25px; padding-right: 25px
}

.page-template-page-sub .wrap{	 
    max-width: 1300px; 
}

.wrap:after{display: table; clear:both; content:'';}

#wrapper{
	background:none;
	padding:0;
	margin:0;
	width:100%;
	box-shadow:none;
}


#mainbody{ max-width:100%; margin-left: auto; margin-right: auto;  }








/* Theme Header */



#headerwrap{
    width: 100%;max-width: 100%;
    display: block; position: relative; padding-top: 50px; padding-bottom: 60px;     --header-height: 0px;
}


.page-template-page-sub #headerwrap{
padding-bottom: 40px
}



#headerwrap .wrap{
position: relative;  max-width: 1400px
}


#centredlogo{
animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s; z-index: 99999; padding-bottom: 15px; text-align: center; width: 100%; display: block
}

#centredlogo img{
height: 130px; width: auto
}


.scrolled {
    position: fixed !important;
    left: 0px !important;
    right: 0px !important;
    top: 0px !important;
    z-index: 99999 !important;
padding-top: 0px!important
}


.scrolled #centredlogo{
display: none!important
}


.scrolled  .wrap {
    max-width: 100%!important; padding-left: 0px!important; padding-right: 0px!important
}


.scrolled  #main-nav {
    border-radius: 0px;
}

 






/* Theme Naivgation Menus */


#main-nav{
  margin: 0 auto;text-align: center;  transition: 0.3s; width: 100%; display: block; background-color: var(--brand-blue); border-radius: 37px; position: relative
}


#main-nav ul{
	list-style:none;
	padding:0;
	margin:0;text-align: center
}

#main-nav ul li{

		margin-left: 0px; margin-right: 0px; margin-bottom: 0px!important; display: inline-block
}



#main-nav ul li a{
    font-size: 14px;
    color: #ffffff;
    padding: 0px 20px;
    display: block;  text-decoration: none; line-height: 75px;font-weight: 600;  text-transform: uppercase; letter-spacing: 2px; margin-left:-2px;  margin-right:-2px;
 }


#main-nav ul li a:hover{
background-color: var(--brand-navy);
}


#back-home-button {
    position: absolute;
    left: 40px;
    top: 20px;
}








/* Dropdown Menus */


#main-nav li ul{
	position: absolute;
	width: 250px;
	z-index: 9999;
	background-color: var(--brand-navy);
	visibility: hidden;
	opacity: 0;
	margin-top: -1px;
	padding: 20px 20px 10px; margin-left: -3px; border-radius: 0px 0px 15px 15px
}

#main-nav li ul li{    float: none; text-align: left; 	margin-left: 0px; margin-right: 0px; display: block;}
#main-nav li ul li.current-menu-item{ border-radius: 0px}
#main-nav li ul li a{
    font-size: 13px;
margin: 0px;
    border: none!important;
    color: #ffffff; letter-spacing: 0px; line-height: 19px; letter-spacing: 1px; padding-top: 6px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px
}

#main-nav li ul li a:hover{color: var(--brand-blue);}
#main-nav li:hover ul{visibility:visible; opacity:1;}

.mobile-nav{display:none;}








/* Banners */


#banner{
    position: relative;
    width: 100%; height: auto
}

#banner img{
    width: 100%; height: auto; min-width: 100%
}


#banner-home{position:relative;}
#banner-home img{width:100%; display:block;}

.flexslider .slides > li{ height: 850px;}

#banner-home .flex-control-nav{right:20px; bottom:30px;z-index:55;text-align: right;}
#banner-home .flex-control-nav li{margin:0 5px;}
#banner-home .flex-control-paging li a{font-size:0;}
#banner-home .flex-control-paging li a{border:1px solid #fff; background:transparent;    width: 12px; height: 12px;}
#banner-home .flex-control-paging li a.flex-active{background:#FFF;}


.show-mob,.close-mob{display:none;}

#new-sub-banner {
    height: 580px; position: relative; z-index: 9; 
}

#new-sub-banner .wrap{
   position: relative; min-height: 580px
}

.sub-banner-inner{ text-align: left;max-width: 550px; position: absolute; left:8px; bottom: 60px }
.sub-banner-inner h1{}
.sub-banner-inner a{}
.sub-banner-inner p{color: #ffffff;    font-size: 26px;
    line-height: 30px; letter-spacing: 1px; text-shadow: 0px 0px 10px #333333}


.flex-direction-nav{display:none;}
















/* Footer */


#footer-one{}

.page-template-page-sub #footer-one {background-color: #F4F8FA}

#footer-one-inner{padding-top: 50px; padding-bottom: 60px;  display: block; overflow: hidden}
#footer-one p{font-size: 12px;line-height: 22px;; padding-bottom: 0px}
#footer-one a{font-size: 18px;line-height: 26px}
#footer-one li{ padding-bottom: 0px; list-style: none; }
#footer-one ul{ padding: 0px; margin: 0px}


#footer-left{float: left; width: 40%}
#footer-right{float: right; width: 60%; text-align: right}

#footer-left img{max-width: 370px!important}
#footer-right li{display: inline-block; margin-bottom: 0px}

#footer-right li a{font-size: 13px; text-decoration: none; font-weight: 600;  text-transform: uppercase; letter-spacing: 1px;  color: var(--brand-grey); margin-left: 20px}










/* Contact Form 7 */


.wpcf7-form-control-wrap input[type=text],
.wpcf7-form-control-wrap input[type=email]{
    box-sizing: border-box; /* ← prevents padding from increasing width */
    border-radius: 0px;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 25px;
    max-width:100%;
    width: 100%;
    color: #ffffff;
    font-size: 16px;
    line-height: 30px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right:16px;
    background-color: #2F2F2F;
  font-family: "Zain", sans-serif;
    font-weight: 400;
    border-bottom-color: #DADADA; border-bottom-style: solid; border-width: 0px 0px 2px 0px;  
}


.wpcf7-form-control-wrap select {
    appearance: none;         /* Standard */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none;    /* Firefox */
    
    background-image: url('images/selectarrow.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;  /* position arrow */
    background-size: 16px;                   /* adjust size */

    box-sizing: border-box;
    border-radius: 0px;
    margin: 0 0 5px 0;
    max-width:100%;
    width: 100%;
    color: #ffffff;
    font-size: 16px;
    line-height: 30px;
    padding: 16px 40px 12px 16px;  /* extra right padding so text doesn't overlap arrow */
    background-color: #2F2F2F;    font-family: "Zain", sans-serif;
    font-weight: 400;
    border-bottom-color: #DADADA; border-bottom-style: solid; border-width: 0px 0px 2px 0px;   cursor: pointer
}

    
    
    

textarea.wpcf7-form-control.wpcf7-textarea {
    box-sizing: border-box; /* ← prevents padding from increasing width */
    border-radius: 0px;
    margin-top: 25px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 25px;
    max-width: 100%;
    width: 100%;
    color: #ffffff;
    font-size: 16px;
    line-height: 30px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right:12px;
    background-color: #2F2F2F;
  font-family: "Zain", sans-serif;
    font-weight: 400; height: 200px;     border-bottom-color: #DADADA; border-bottom-style: solid;  border-width: 0px 0px 2px 0px;  
}

.wpcf7-form input[type=submit] {
	background-color: #93C020;
	color: #ffffff;
	padding-top: 12px;
	padding-right: 27px;
	padding-left: 27px;
	padding-bottom: 12px;
	text-decoration: none;
	font-size: 15px; display: inline-block; border-radius: 25px;font-weight: 500; margin-top: 20px;    font-family: "Zain", sans-serif;border:none
}



.wpcf7-form-control-wrap input[type=text]::placeholder,
.wpcf7-form-control-wrap input[type=email]::placeholder, textarea.wpcf7-form-control.wpcf7-textarea::placeholder {
    color: #ffffff; 
    opacity: 1;
}


.wpcf7-form-control-wrap select option[disabled] {
    color: #ffffff;
}


.wpcf7-form input[type=checkbox] {
    border: 1px solid #C4C4C4;
}


.wpcf7-form p {
 font-size: 13px!important; line-height: 21px!important
}

.wpcf7-form a {
 font-size: 13px!important; line-height: 21px!important; text-decoration: underline!important; color: #ffffff!important
}

.wpcf7-form a:hover {
text-decoration: none!important; color: #93C020!important
}


.wpcf7-list-item {
    margin: 0 0 0 0!important;
}

.wpcf7-form {
padding-right: 35px
}


.wpcf7 form.sent .wpcf7-response-output {
    border-color: #93C020!important;
    border-radius: 12px;
    font-size: 16px;
    line-height: 27px;
    padding: 12px!important;
}











/* Slide Arrows */


.slick-prev{background: url(images/left.svg) no-repeat center center /cover!important;
    display: block!important;     width: 25px!important;
    height: 25px!important;     left: -4%!important;}

.slick-prev:hover{background: url(images/left-hover.svg) no-repeat center center /cover!important; transition: 0.4s;}

.slick-next{background: url(images/right.svg) no-repeat center center /cover!important;
    display: block!important;width: 25px!important;
    height: 25px!important;     right: -4%!important;}

.slick-next:hover{background: url(images/right-hover.svg) no-repeat center center /cover!important; transition: 0.4s;}

.slick-prev:before{
	content: "\f0a8"!important; font-family:FontAwesome!important; display:none;
}
.slick-next:before{
	    content: "\f0a9"!important;font-family:FontAwesome!important;display:none;
}


#partners-slider .slick-prev{left: -3%!important;}

#partners-slider .slick-next{right: -3%!important;}








/* Animation */

/* ===== Base Style for Transitions ===== */
.fade-in,
.fade-in-up,
.fade-in-down,
.fade-in-up-left,
.fade-in-up-right,
.fade-in-right {
  opacity: 0;
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  will-change: opacity, transform;
}

/* ===== Variants ===== */

.fade-in {
  opacity: 0;
  transition: opacity0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in Up */
.fade-in-up {
  transform: translateY(50px);
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in Down */
.fade-in-down {
  transform: translateY(-60px);
}
.fade-in-down.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in Up Left */
.fade-in-up-left {
  transform: translate(60px, 60px); /* From bottom right */
}
.fade-in-up-left.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Fade-in Up Right */
.fade-in-up-right {
  transform: translate(-60px, 60px); /* From bottom left */
}
.fade-in-up-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Fade-in Right */
.fade-in-right {
  transform: translateX(-60px); /* From left */
}
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}





/* Partner Carousel */


.partners-slider {
  margin: 0 auto;
}

.partner-slide {
  padding: 15px;
  text-align: center;
}

.partner-slide img {
  width: 100%;
  height: auto;
  max-width: 400px;
  max-height: 300px;
  object-fit: contain; /* or 'cover' if you want crop fill */
  margin: 0 auto;
}







/*--------------------------------------------------------------
# Team Carousel
--------------------------------------------------------------*/

.team-slider {
    width: 100%; margin-top: 30px
}

.team-member {
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.team-member-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto 0px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
}

.team-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-member p {
padding-bottom: 0px
}

/* Name */
.team-member-name strong {

    color: var(--brand-grey);
font-size: 23px; line-height: 29px
}

/* Role */
.team-member-role {
font-size: 14px; line-height: 20px; padding-left: 15%; padding-right: 15%
}









/* WP Bakery Styles */


.paddingtopsmall{padding-top:45px}
.paddingbottomsmall{padding-bottom:35px}

.paddingtop{padding-top:90px}
.paddingbottom{padding-bottom: 75px}

.paddingtoplarge{padding-top:160px}
.paddingbottomlarge{padding-bottom:145px}


.paddingright{padding-right: 9%}
.paddingleft{padding-left: 9%}

.nobottommargin{margin-bottom: 0px!important}

.whitetext p, .whitetext a, .whitetext h1, .whitetext h2, .whitetext h3, .whitetext h4, .whitetext li, .whitetext h5{color: #ffffff!important}

.whitetext a:hover{color: var(--brand-navy)!important}

.whitetext .greenbutton a, .whitetext a.greenbutton{color: #ffffff!important}

.whitetext  h5::before {
background-color: #ffffff;
}


.darktext p, .darktext a, .darktext h1, .darktext h2, .darktext h3, .darktext h4, .darktext li{color: var(--brand-grey)!important}


.bluebackground{background-color: var(--brand-blue);}
.navybackground{background-color: var(--brand-navy);}
.greenbackground{background-color: var(--brand-green);}
.skybackground{background-color: var(--brand-sky);}
.wavebackground{background-image:url("images/background-wave.png"); background-repeat: no-repeat; background-position: bottom center; background-size: cover}

.box{
	padding: 70px 35px 50px
}

.roundedcorners{border-radius: 15px}
.roundedcorners img{border-radius:15px}

.imageshadow img{box-shadow: 0px 0px 10px 0px #F2EDED; border-radius: 35px}

.greenbutton a, a.greenbutton{
background-color: var(--brand-green);
	color: #ffffff;
	padding-top: 9px;
	padding-right: 23px;
	padding-left: 23px;
	padding-bottom: 9px;
	text-decoration: none;
	font-size: 12px; display: inline-block; border-radius: 30px;margin-top: 30px;  font-weight: 500;  text-transform: uppercase; letter-spacing: 2px; margin-right: 20px; border: 1px solid var(--brand-green)

}


.greenbutton a:hover, a.greenbutton:hover{
background-color: var(--brand-navy); border: 1px solid #ffffff
}




.textbutton a, a.textbutton{
color: var(--brand-blue);
	text-decoration: none;
	font-size: 12px; display: inline-block; margin-top: 30px;  font-weight: 500;  text-transform: uppercase; letter-spacing: 2px;

}


.textbutton a:hover, a.textbutton:hover{
color: var(--brand-grey)!important;
}


.centeredtitles h5,.centeredtitles h4,.centeredtitles h3,.centeredtitles h2 {
    justify-content: center;
}



.contactbox{
background-color: var(--brand-green);
	
	padding-top: 13px;
	padding-right: 23px;
	padding-left: 23px;
	padding-bottom: 13px;

border-radius: 30px;margin-top: 10px; text-align: center; margin-left: auto; margin-right: auto

}

.contactbox p{color: #ffffff; text-decoration: none;  font-weight: 500; padding-bottom: 0px }
.contactbox img{margin-right: 5px; margin-left: 20px}


.section-with-top-wave {
    position: relative;  
}

.section-with-top-wave::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 145px;
    background: url('images/wave-top.svg') no-repeat bottom;
    background-size: 100% 100%;
}


.section-with-bottom-wave {
    position: relative;  
}

.section-with-bottom-wave::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: 0;
    width: 100%;
    height: 145px;
    background: url('images/wave-bottom.svg') no-repeat top;
    background-size: 100% 100%;
}



.extended-image img {
    position: absolute;
    top: 0;
    left: 90%;
    transform: translateX(-50%);
    min-width: 220%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.icon-circle img{width:120px; height: auto}


.subbanner{
	background-image: url("images/sub-banner-waves.svg");
	background-position: bottom center;
	background-size: contain;
	padding: 60px 20% 160px;
	background-repeat: no-repeat;
	background-color: #66AF47; margin-left: -10px; margin-right: -10px
}


.bannersplit{background-image: url("images/banner-test.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover}


.mobile-nav{display:none}
.mobile-only{display:none!important}
.desktop-only{}






.cky-title{display: none!important}
.cky-notice-des a{color:#ffffff}
.cky-notice-des p{padding-bottom: 5px}


.cky-notice-btn-wrapper .cky-btn {
	font-size: 15px!important;border-radius: 25px!important;
}

.cky-consent-container .cky-consent-bar {
    box-shadow:none!important; background-color: var(--brand-navy)!important; border: none!important; color:#ffffff!important
}


.cky-notice-des p {
color:#ffffff!important
}


.cky-notice-btn-wrapper .cky-btn {
    border-radius: 25px!important;
}



.cky-btn-reject {
background-color: var(--brand-blue)!important; border: none!important
}



.cky-btn-accept {
background-color: var(--brand-green)!important;border: none!important
}








/* 1. Flexbox layout for the row */
.flexrow {
  display: flex;
  flex-wrap: wrap;
}

/* 2. Stretch each column */
.flexrow > .wpb_column {
  display: flex;
  flex-direction: column;
}

/* 3. Stretch inner container */
.flexrow .vc_column-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 4. Make wrapper fill the height */
.flexrow .wpb_wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 5. Stretch the actual Text Block */
.flexrow .wpb_text_column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; min-height: 100px
}