.elementor-kit-6{--e-global-color-primary:#255684;--e-global-color-secondary:#F3F1EC;--e-global-color-text:#6C757F;--e-global-color-accent:#2DD881;--e-global-color-0f66699:#FFFFFF;--e-global-color-c22c21d:#2B314F;--e-global-color-2f0db02:#6DA6DB;--e-global-color-6ba74d0:#083937;--e-global-color-bf25e1f:#6EB0A8;--e-global-color-69f2cb7:#4F2B3D;--e-global-color-a52a54e:#F1E3D3;--e-global-color-0272994:#A36F48;--e-global-color-8a51625:#FFFFFF99;--e-global-typography-primary-font-family:"Caladea";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1344px;}.e-con{--container-max-width:1344px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */body{
    overflow-x: hidden;
}

html{
    font-size: 62.5%; 
}

.no-fade{
    opacity: 1 !important;
}


/*------------------------------------*
  #MAIN-HEADER
*------------------------------------*/

/*
** Styling the main header
*/
.main-header{
    position: fixed !important;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 99;
    background: transparent !important;
    background: var(--seaview) !important;
    border-radius: 24px;
    padding: 24px 0px;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}

/*
** Setting the width of the logos container
*/
.main-header .logos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 16px;
    width: calc(100% - 32px);
}

/*
** Adding the logo underline symbol
*/
.main-header .logos .seaview-park-logo::after,
.main-header .logos .warden-bay-logo::after,
.main-header .logos .vanity-village-logo::after{
    content: '';
    position: absolute;
    bottom: -24px;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url('https://seaviewleysdown.co.uk/wp-content/uploads/2024/10/logo-underline.svg');
    mask-image: url('https://seaviewleysdown.co.uk/wp-content/uploads/2024/10/logo-underline.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: white;
    transition: background-color 0.3s ease;
    opacity: 0;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}

/*
** Sizing and positioning the logos
*/
.main-header .logos .logo svg {
    width: 100%;
    height: 100%;
}
.main-header .logos .logo .elementor-icon-wrapper  {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
** Hiding the diamond bullets on mobile
*/
.main-header .logos .logo-bullet {
    display: none;
}

.main-header .logos .logo-bullet .elementor-widget-container svg path{
    fill: #fff;
}
/*
** positioning the toggle in the center
*/
.main-header .main-menu {
    width: 100%;
}

.main-header .main-menu .elementor-menu-toggle{
    background: transparent;
}
/*
** Hiding the hamburger
*/
.main-header .main-menu .elementor-menu-toggle svg{
    display: none;
}
/*
** Adding the menu text
*/
.main-header .main-menu .elementor-menu-toggle::before{
    content: "Menu";
    width: 100%;
    font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
    font-weight: var( --e-global-typography-accent-font-weight );
    font-size: clamp(1.5rem, 2.5vw, 1.7rem) !important;
    line-height: 1.7 !important;
    padding: 8px 24px !important;
    margin: 0 !important;
    display: flex;
    border-radius: 24px;
    background: rgba(0,0,0,.2) !important;
}

.main-header .main-menu .menu-item{
    opacity: 0.6;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}

/*
** Adding the diamond symbol above the menu items
*/
.main-header .main-menu .menu-item::before{
    content: url("https://seaviewleysdown.co.uk/wp-content/uploads/2024/11/menu-active-white.svg");
    position: absolute;
    top: -32px;
    left: calc(50% - 2px);
    width: 6px;
    height: 100%;
    opacity: 0;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
.about .main-header .main-menu .menu-item::before,
.contact .main-header .main-menu .menu-item::before,
.news .main-header .main-menu .menu-item::before{
    content: url("https://seaviewleysdown.co.uk/wp-content/uploads/2024/10/menu-active-icon.svg");
    width: auto;
}

/*
** Setting the hover opacity for the menu items
*/
.main-header .main-menu .menu-item:hover,
.main-header .main-menu .menu-item.current-menu-item{
    opacity: 1;
}

/*
** Hover state for the diamoned symbol
*/
.main-header .main-menu .menu-item:hover:before,
.main-header .main-menu .menu-item.current-menu-item:before{
    top: -24px;
    opacity: 1;
}

@media only screen and (min-width: 768px) {
    /*
    ** Styling the main header
    */
    .main-header{
        flex-wrap: nowrap;
        position: fixed;
        background: transparent !important;
        background: var(--seaview) !important;
        border-radius: 24px;
        padding: 24px 32px;
        margin: 32px 16px;
        width: calc(100vw - 32px);
    }
    /*
    ** Setting the width of the logos container
    */
    .main-header .logos {
        justify-content: left;
        width: 100%;
    }
    .main-header .main-menu {
        width: 20%;
    }
    .main-header .logos .logo .elementor-icon,
    .main-header .logos .logo-bullet,
    .main-header .logos .logo-bullet .elementor-widget-container {
        display: flex;
        align-items: center;
    }
}

@media only screen and (min-width: 1024px) {
    .main-header .main-menu {
        width: 100%;
    }
}




/*------------------------------------*
  #TYPOGRAPHY
*------------------------------------*/

.small-text p{
	font-size: 1.4rem !important;
    line-height: 2.4 !important;
}

p, 
td,
li,
ol,
.elementor-field-label{
    font-size: clamp(1.5rem, 2.5vw, 1.7rem) !important;
    line-height: 1.7 !important;
}
p {
    padding-top: 1rem;
}
li{
    font-size: 1.6rem !important;
}
.h6-h1 h1, h6 {
	font-size: 1.4rem !important;
	line-height: 2.4rem !important;
	text-transform: uppercase;
	letter-spacing: 1.6px;
}
h5 {
	font-size: 1.8rem !important;
	line-height: 2.8rem !important;
}
h4 {
	font-size: 2rem !important;
	line-height: 3.2rem !important;
}
h3 {
	font-size: 2.8rem !important;
	line-height: 3.8rem !important;
}
.h2-h1 h1, h2 {
    font-size: clamp(2.2rem, 2.8vw, 4.6rem) !important;
    line-height: 1.2 !important;
}
.large h2{
    font-size: clamp(2.8rem, 5.4vw, 5.4rem) !important;
	line-height: 1.3 !important;
}

h1{
    font-size: clamp(2.8rem, 5.4vw, 5.4rem) !important;
    line-height: 1.2 !important;
}
.hero h1,
.hero h2 {
    font-size: 9vw !important;
	line-height: 11vw !important;
}
  
@media only screen and (min-width: 768px) {
    .hero h1,
    .hero h2{
        font-size: 7vw !important;
	    line-height: 9vw !important;
    }
}

@media only screen and (min-width: 1024px) {
 
    h5 {
    	font-size: 2.2rem !important;
    	line-height: 3.4rem !important;
    }
    h4 {
    	font-size: 2.8rem !important;
    	line-height: 3.8rem !important;
    }
    h3 {
    	font-size: 3.2rem !important;
    	line-height: 4.2rem !important;
    }
    .hero h1,
    .hero h2{
	    font-size: 7.7rem !important;
    	line-height: 8.2rem !important;
    }
    .banner-medium .title h1,
    .banner-medium .title h2{
	    font-size: 4rem !important;
    	line-height: 5rem !important;
    }
}

.post-content ul{
    margin-bottom: 24px;
    margin-top: 24px;
}

.post-content ul li{
    margin-bottom: 16px;
}


/*
** Setting the color and adding an underline to the text links
*/ 
.text-col a,
span > a {
    color: var( --e-global-color-primary ) !important;
    position: relative;
    text-decoration: none;
}
.text-col a::after,
span > a::after,
.elementor-icon-list-item .elementor-icon-list-text::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px; /* Position the underline slightly below the text */
  height: 1px; /* Thickness of the underline */
  background-color: currentColor; /* Matches the link color */
  opacity: 0;
  transform: translateY(4px); /* Moves the line downward initially */
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.text-col a:hover::after,
span > a:hover::after,
.elementor-icon-list-item a:hover.elementor-icon-list-text::after{
  opacity: 1;
  transform: translateY(0); /* Moves the underline into position */
}




/*------------------------------------*
  #PADDING - Removes default padding from columns
*------------------------------------*/

.elementor-element-populated{
    padding: 0 !important;
    margin: 0 !important;
}




/*------------------------------------*
  #SPACING
*------------------------------------*/

/*
** Small padding
*/ 
.padding-lr-sm {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.padding-l-sm {
    padding-left: 16px !important;
}
.padding-r-sm {
    padding-right: 16px !important;
}
.padding-tb-sm {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.padding-t-sm {
    padding-top: 16px !important;
}
.padding-b-sm {
    padding-bottom: 16px !important;
}
/*
** Medium padding
*/
.padding-lr-md {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.padding-l-md {
    padding-left: 32px !important;
}
.padding-r-md {
    padding-right: 32px !important;
}
.padding-tb-md {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.padding-t-md {
    padding-top: 16px !important;
}
.padding-b-md {
    padding-bottom: 16px !important;
}

.padding-lr {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
.padding-tb {
    padding-top: 48px;
    padding-bottom: 48px;
}
.padding-t {
    padding-top: 48px;
}
.padding-b {
    padding-bottom: 48px;
}


@media only screen and (min-width: 768px) {

    .padding-lr{
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
    .padding-tb{
        padding-top: 64px;
        padding-bottom: 64px;
    }
    .padding-t{
        padding-top: 64px;
    }
    .padding-b{
        padding-bottom: 64px;
    }
    /*
    ** Medium padding
    */
    .padding-lr-md {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .padding-tb-md {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .padding-t-md {
        padding-top: 32px !important;
    }
    .padding-b-md {
        padding-bottom: 32px !important;
    }
    .section-large{
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

@media only screen and (min-width: 1024px) {

    .padding-lr {
        padding-left: 4.1666666667vw !important;
        padding-right: 4.1666666667vw !important;
    }
    .padding-l {
        padding-left: 4.1666666667vw !important;
    }
    .padding-r {
        padding-right: 4.1666666667vw !important;
    }
    .padding-tb{
        padding-top: 8.3333333334vw;
        padding-bottom: 8.3333333334vw;
    }
    .padding-t{
        padding-top: 8.3333333334vw;
    }
    .padding-b{
        padding-bottom: 8.3333333334vw;
    }
}




/*------------------------------------*
  #BUTTONS
*------------------------------------*/
/*
** Masking the before and after content
*/
.btn-primary{
    overflow: hidden;
    border-radius: 48px;
    margin-top: 24px;
}

/*
** Button styling
*/
.btn-primary .elementor-button,
.btn-text{
    background: transparent !important;
    font-family: var( --e-global-typography-accent-font-family ), Sans-serif !important;
    font-weight: var( --e-global-typography-accent-font-weight ) !important;
    font-size: clamp(1.5rem, 2.5vw, 1.7rem) !important;
    line-height: 1.7 !important;
    padding: 16px 32px 14px 32px;
    border-radius: 48px;
    overflow: hidden !important;
}

/*
** Adding the pill shape
*/
.btn-primary .elementor-button:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var( --e-global-color-primary ) !important;
    padding: 16px 32px;
    border-radius: 48px;
    overflow: hidden !important;
}
.btn-text{
    background: transparent !important;
    border: 1px solid #fff;
    padding: 12px 32px;
    border-radius: 48px;
    overflow: hidden !important;
    z-index: 1;
}

/* Ensure the p element is always on top */
.btn-text p{
    color: #fff !important;
    z-index: 2; 
    position: relative;
}

/*
** Moving the text above the background
*/
.btn-primary .elementor-button-text{
    color: #fff !important;
    z-index: 2 !important;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}

/*
** Adding the background fill element
*/
.btn-primary .elementor-button-text:before{
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - 50px);
    z-index: -1;
    overflow: hidden !important;
    background: var( --e-global-color-secondary );
    width: 100px;
    height: 100px;
    border-radius: 100%;
    opacity: 0;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}
.btn-text:after{
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - 50px);
    z-index: 0; /* Ensure this is behind everything */
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    opacity: 0;
    transition: top 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) ;
}

/*
** Background fill element hover effect
*/
.btn-primary .elementor-button:hover .elementor-button-text:before{
    top: calc(50% - 50px);
    transform: scale(2.5);
    opacity: 1;
}

.btn-text:hover:after{
    top: calc(50% - 50px);
    transform: scale(2.5);
    opacity: 1;
}

/* Ensure text color changes on hover */
.btn-primary .elementor-button:hover .elementor-button-text,
.btn-text:hover p{
    color: var(--e-global-color-primary) !important;
}




/*------------------------------------*
  #ICON-BUTTON
*------------------------------------*/
.icon-btn .elementor-button .elementor-button-content-wrapper{
    align-items: center;
    gap: 16px;
}
.icon-btn .elementor-button-icon{
    z-index: 3;
    display: flex;
    background: white;
    border-radius: 100%;
    padding: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}
.icon-btn .elementor-button-icon svg path{
    fill: var( --e-global-color-primary ) !important;
}

.btn-primary.icon-btn .elementor-button,
.btn-primary.icon-btn .elementor-button::before {
    padding: 8px 32px 8px 8px !important;
    height: 56px !important;
}




/*------------------------------------*
  #BUTTON-COLOURS
*------------------------------------*/


/*
** Background fill effect colour
*/
.postid-551 .btn-primary .elementor-button-text:before{
    background: var( --e-global-color-secondary );
}




/*------------------------------------*
  #BUTTON-COLOURS-FOR-THE-PARKS
*------------------------------------*/

:root{
    --seaview-park-dark: #2B314F;
    --seaview-park-light: #6DA6DB;
    --warden-bay-dark: #083937;
    --warden-bay-light: #6EB0A8;
    --vanity-village-dark: #4F2B3D;
    --vanity-village-light: #A36F48;
}

.seaview-park .btn-primary .elementor-button::before{
    background: var(--seaview-park-dark) !important;
}
.seaview-park .btn-primary .elementor-button:hover .elementor-button-text{
    color: var(--seaview-park-dark) !important;
}
/* Ensure text color changes on hover */
.seaview-park .btn-text:hover p{
    color: var(--seaview-park-dark) !important;
}


.warden-bay .btn-primary .elementor-button::before{
    background: var(--warden-bay-dark) !important;
}
.warden-bay .btn-primary .elementor-button:hover .elementor-button-text{
    color: var(--warden-bay-dark) !important;
}
/* Ensure text color changes on hover */
.warden-bay .btn-text:hover p{
    color: var(--warden-bay-dark) !important;
}


.vanity-village .btn-primary .elementor-button::before{
    background: var(--vanity-village-dark) !important;
}
.vanity-village .btn-primary .elementor-button:hover .elementor-button-text{
    color: var(--vanity-village-dark) !important;
}
/* Ensure text color changes on hover */
.vanity-village .btn-text:hover p{
    color: var(--vanity-village-dark) !important;
}





/*------------------------------------*
  #BACKGROUND-IMAGE
*------------------------------------*/
/*
.background-image{
    position: relative;
}

.img-col:has(.background-image) { 
    min-height: 50vh;
}
*/

.img-col{
    min-height: auto;
}
    
/**
 * Sizing the image (to maintain it's ratio)
 */
.background-image:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.background-image,
.background-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.background-image img {
    object-fit: cover;
}
    
    


/*------------------------------------*
  #TEXT-BANNER-SECTION
*------------------------------------*/

/*
** Setting the height
*/
.text-banner-container,
.text-banner{
    min-height: 60vh;
}

/*
** Making the banner fix in position
*/
.text-banner{
    position: fixed;
}

/*
** Styling the text
*/
.text-banner-container .title,
.text-banner-container .text {
    max-width: 888px !important;
}




/*------------------------------------*
  #BORDERS-AND-MARGINS
*------------------------------------*/

.border-col{
    border-radius: 32px;
}
.border-col-top{
    border-radius: 32px 32px 0 0;
}

.margin-sm{
    width: calc(100% - 32px);
    margin: 16px;
}

    
    

/*------------------------------------*
  #TEXT-AND-IMAGE-SECTION
*------------------------------------*/

.text-image{
    /*border-radius: 32px 32px 0 0;*/
    overflow: hidden;
}

.text-image .img-col{
    min-height: 50vh !important;
    margin-bottom: 24px;
    border-radius: 24px;
    overflow: hidden;
}

/*
** Space between the icon and contact detail
*/ 
.text-image .elementor-icon-list-items{
    display: flex;
    flex-direction: column;
    gap: 8px !important;
}
.text-image .elementor-icon-list-item{
    gap: 4px;
}

/*
** Adding a background to the contact icons
*/ 
.text-image .elementor-icon-list-icon{
    background: #2DD881;
    padding: 12.5px;
    border-radius: 100%;
}

/*
** Removing the icon margin
*/ 
.text-image .elementor-icon-list-icon svg{
    margin: 0 !important;
    fill: #fff !important; 
}

@media only screen and (min-width: 1024px) {

    .text-image .text-col,
    .text-image .img-col{
        width: 50%;
    }
    .text-image .img-col{
        min-height: 50vw !important;
        margin-bottom: 0;
    }
}




/*------------------------------------*
  #TEXT-AND-GALLERY-SECTION
*------------------------------------*/

.text-gallery .img-col{
    border-radius: 24px !important;
    overflow: hidden !important;
    margin-top: 24px;
}
.text-gallery .img-col img{
    border-radius: 24px;
    object-fit: cover;
}

.text-gallery .img-col .elementor-image-carousel-wrapper{
    border-radius: 24px !important;
    overflow: hidden !important;
}

.text-gallery .text-col{
    margin-top: 24px;
}

@media only screen and (min-width: 1024px) {
    .text-gallery {
        padding-left: 48px
    }
    .text-gallery .text-col,
    .text-gallery .img-col{
        width: 50%;
        margin-top: 0;
    }
    .text-gallery .img-col img{
        height: calc(50vw - 32px) !important;
        width: calc(50vw - 32px) !important;
    }
}




/*------------------------------------*
  #LISTING-TEXT-AND-GALLERY-SECTION
*------------------------------------*/

.listing-text-gallery .text-col{
    margin-top: 12.5vw;
}
.listing-text-gallery  .e-n-accordion-item-title{
    margin: 0;
    padding: 0 0 24px;
}

.listing-text-gallery  .e-n-accordion-item-title-text{
    width: auto;
    padding: 8px;
    font-size: clamp(1.5rem, 2.5vw, 1.7rem) !important;
    font-weight: 600;
    margin: 0 !important;
}

.listing-text-gallery  .e-n-accordion-item-title-text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.listing-text-gallery  .fade-out {
    opacity: 0;
}




/*------------------------------------*
  #TEXT-AND-ACCORDION
*------------------------------------*/

/*
** Styling the accordion
*/
.text-accordion .e-n-accordion-item{
    border-radius: 24px;
    overflow: hidden;
}

/*
** Removing the default icon
*/
.text-accordion .e-n-accordion-item .e-n-accordion-item-title-icon{
    display: none;
}

/*
** Adding the icons
*/
.text-accordion .accordion-element-1 .e-n-accordion-item-title:before{
    content: url("https://seaviewleysdown.co.uk/wp-content/uploads/2024/10/Love-Shield-icon.svg");
    width: 24px;
}
.text-accordion .accordion-element-2 .e-n-accordion-item-title:before{
    content: url("https://seaviewleysdown.co.uk/wp-content/uploads/2024/10/Check-Badge-icon.svg");
    width: 24px;
}
.text-accordion .accordion-element-3 .e-n-accordion-item-title:before{
    content: url("https://seaviewleysdown.co.uk/wp-content/uploads/2024/10/Real-Estate-Action-House-Check-icon.svg");
    width: 24px;
}
.text-accordion .accordion-element-4 .e-n-accordion-item-title:before{
    content: url("https://seaviewleysdown.co.uk/wp-content/uploads/2024/10/Maps-Pin-icon.svg");
    width: 24px;
}


.text-accordion .e-n-accordion-item-title {
	padding-right: 64px;
}

/*
** Styling the accodion title text
*/
.text-accordion .e-n-accordion-item-title-text{
	font-size: 1.8rem !important;
	line-height: 2.4rem !important;
    transition: all 0.3s ease-in-out;
}

/*
** Adding the icon
*/
.text-accordion .e-n-accordion-item-title:after{
    content: url("https://seaviewleysdown.co.uk/wp-content/uploads/2024/10/chevron.down_.svg");
    position: absolute;
    right: 32px;
    margin-left: auto;
    background: #fff;
    border-radius: 100%;
    width: 32px !important;
    height: 32px !important;
    padding: 8px;
    transition: all 0.3s ease-in-out;
}
.home .text-accordion .e-n-accordion-item-title:after{
    background: var( --e-global-color-secondary );
}

.elementor-kit-6 .e-n-accordion-item[open] .e-n-accordion-item-title:after{
    transform: rotate(180deg); 
    background: var( --e-global-color-secondary );
}

.text-accordion .e-n-accordion-item-title:hover:after{
    background: var( --e-global-color-secondary );
    padding: 4px;
    width: 24px !important;
    height: 24px !important;
    right: 36px;
}
.home .text-accordion .e-n-accordion-item-title:hover:after{
    background: #fff;
}

@media only screen and (min-width: 1440px) {
    .text-accordion .e-n-accordion-item:hover .e-n-accordion-item-title-text{
        padding-left: 8px !important;
    }
}

@media only screen and (max-width: 1024px) {
    .text-accordion {
        padding: 0;
    }
    .text-accordion .accordion-col{
        padding-top: 0;
    }
    .e-n-accordion .e-n-accordion-item .e-con {
        padding: 0 24px 32px 24px !important;
    }
}




/*------------------------------------*
  #TEXT-AND-FORM-SECTION
*------------------------------------*/

/*
** Adding a rounded border to the section
*/ 
.text-form.border-col{
    border-radius: 8px;
}

/*
** Setting the link colour to white
*/ 
.text-form .text-col .elementor-icon-list-items a{
    color: #fff !important;
}

/*
** Space between the icon and contact detail
*/ 
.text-form .text-col .elementor-icon-list-items{
    gap: 8px;
}
.text-form .text-col .elementor-icon-list-item{
    gap: 4px;
}

/*
** Adding a background to the contact icons
*/ 
.text-form .text-col .elementor-icon-list-icon{
    background: #fff;
    padding: 12.5px;
    border-radius: 100%;
}

/*
** Removing the icon margin
*/ 
.text-form .text-col .elementor-icon-list-icon svg{
    margin: 0 !important;
}

/*
** Positioning the WH logo at the bottom
*/ 
.text-form .text-col .wh-group{
    margin-top: auto;
    gap: 8px !important;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}
.text-form .text-col .wh-group svg path{
    transition: all .6s cubic-bezier(.4,0,.2,1);
}

/*
** Styling the form labels
*/ 
.text-form .form-col .elementor-field-label {
    padding-left: 16px;
	font-size: 1.4rem !important;
    line-height: 2.4 !important;
}

/*
** Styling the dropdown fields
*/ 
.elementor-field-textual{
    font-size: 1.4rem !important;
    line-height: 2.4 !important;
}

/*
** Positioning the submit button
*/ 
.text-form .form-col .elementor-button {
    margin-top: 16px;
}

/*
** Styling the WH group hover state
*/ 
.text-form .text-col .wh-group:hover svg path{
    fill: var( --e-global-color-accent ) !important;
}

/*
** Styling the form field hover state
*/ 
.text-form .form-col .elementor-field:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

@media only screen and (min-width: 1024px) {
    /*
    ** Adding a rounded border to the section
    */ 
    .text-form.border-col{
        padding: 16px;
    }
    /*
    ** Positioning the WH logo at the bottom
    */ 
    .text-form .text-col .wh-group{
        gap: 12px !important;
    }
    /*
    ** Styling the WH group hover state
    */ 
    .text-form .text-col .wh-group:hover{
        gap: 16px !important;
    }
}




/*------------------------------------*
  #PARK UNITS
*------------------------------------*/


.park-units{
    overflow-x: auto;
    width: 100%;
    flex-wrap: nowrap !important;
    justify-content: left;
    scrollbar-width: none; /* Firefox */
}

/*
** Setting the loop item to fill it's container
*/
.park-units .elementor-loop-container{
    display: flex !important;
    height: 100%;
    gap: 16px !important;
}

/*
** Styling for each unit type within the park units
*/
.park-units .unit-type {
    border-radius: 24px;
    overflow: hidden;
    gap: 0;
    min-width: calc(100vw - 64px) !important;
    min-height: calc(100vw - 64px) !important;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}

.park-units::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge, and Opera */
}

/*
** Add transition effect for images in unit type
*/
.park-units .unit-type img,
.our-locations .location img{
    transition: all .6s cubic-bezier(.4,0,.2,1);
}

/*
** Apply gradient overlay to the background image
*/
.park-units .unit-type .background-image::after,
.our-locations .location .background-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(42, 89, 135, 0.60) 0%, rgba(42, 89, 135, 0.60) 100%);
    z-index: 0;
    border-radius: 24px;
}

.our-locations .location .background-image::after{
    border-radius: 16px;
}

/*
** Position title and location above the background image
*/
.park-units .unit-type .title,
.park-units .unit-type .park-location{
    z-index: 2;
}

/*
** Position button text at the bottom of each unit
*/
.park-units .unit-type .btn-text{
    position: absolute;
    bottom: 24px;
}

/*
** Scale the image on hover
*/
.park-units .unit-type:hover img,
.our-locations .location:hover img{
    transform: scale(1.2);
}

/*
** Trigger the hover effect for the button background
*/
.park-units .unit-type:hover .btn-text:after,
.our-locations .location:hover .btn-text:after{
    top: calc(50% - 50px);
    transform: scale(1.5);
    opacity: 1;
}

/* 
** Ensure text color changes on hover 
*/
.park-units .unit-type:hover .btn-text p,
.our-locations .location:hover .btn-text p{
    color: var(--e-global-color-primary) !important;
}

@media only screen and (min-width: 768px) {
    
    /*
    ** Styling for each unit type within the park units
    */
    .park-units .unit-type {
        min-height: 50vw !important;
        min-width: 50vw !important;
    }
}

@media only screen and (min-width: 1024px) {
    
    .park-units{
        width: auto;
        justify-content: center;
    }
    
    /*
    ** Setting the loop item to fill it's container
    */
    .park-units .elementor-loop-container{
        gap: 24px !important;
    }
    
    /*
    ** Styling for each unit type within the park units
    */
    .park-units .unit-type {
        min-height: auto !important;
        min-width: auto !important;
        width: 25vw !important;
        height: 25vw !important;
    }
}



/*------------------------------------*
  #OUR-LOCATIONS-SECTION
*------------------------------------*/

.our-locations .location{
    padding: 24px !important;
    border-radius: 16px;
    overflow: hidden;
    gap: 0;
    min-height: 33vw;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}

/* Adding the background fill effect */
.our-locations .location:after{
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - 50px);
    z-index: 0; /* Ensure this is behind everything */
    background: var( --e-global-color-c22c21d );
    width: 100px;
    height: 100px;
    border-radius: 100%;
    opacity: 0;
    transition: all .8s cubic-bezier(0.4, 0, 0.2, 1);
}

.our-locations .location:hover:after{
    top: calc(50% - 25vw);
    left: calc(50% - 25vw);
    width: 50vw;
    height: 50vw;
    opacity: 1;
    transform: scale(3);
}

/*
** Position title above the background image
*/
.our-locations .location .title {
    position: absolute;
    z-index: 2;
    transition: opacity .6s ease; /* Add transition for fading */
}

/*
** Positiong the text above the content
*/
.our-locations .location .location-reverse {
    z-index: 2; /* Above the background */
}

/*
** Position text and button text within the container
*/
.our-locations .location .text,
.our-locations .location .btn-text {
    position: relative;
    opacity: 0; /* Start hidden */
    transition: opacity .6s ease; /* Fade effect */
}

/*
** Title and text hover effects
*/
.our-locations .location:hover .title {
    opacity: 0 !important; /* Fade out title */
}
.our-locations .location:hover .location-reverse .text,
.our-locations .location:hover .location-reverse .btn-text {
    opacity: 1 !important;
}

/*
** Park colours
*/

/* Adding the background fill effect */
.our-locations .seaview-park:after{
    background: var( --e-global-color-c22c21d );
}
.our-locations .warden-bay:after{
    background: var( --e-global-color-6ba74d0 );
}
.our-locations .vanity-village:after{
    background: var( --e-global-color-69f2cb7 );
}
    
/* 
** Ensure text color changes on hover 
*/
.our-locations .seaview-park:hover .btn-text p{
    color: var(--e-global-color-primary) !important;
}
.our-locations .warden-bay:hover .btn-text p{
    color: var(--e-global-color-primary) !important;
}
.our-locations .vanity-village:hover .btn-text p{
    color: var(--e-global-color-primary) !important;
}

@media only screen and (min-width: 1024px) {

    .our-locations .location{
        padding: 48px !important;
    }
}




/*------------------------------------*
  #TEXT-CENTERED-SECTION
*------------------------------------*/

.text-centered{
    overflow: hidden;
}

.text-centered .text{
    max-width: 888px !important;
}

.text-centered .text-graphic{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) !important;
    z-index: 0;
    width: 100vw;
    height: auto;
}
.text-centered .text-graphic svg{
    width: 100vw;
    height: auto;
}




/*------------------------------------*
  #THE-LOCAL-AREA-SECTION
*------------------------------------*/

.the-local-area .elementor-icon svg path{
    fill: var( --e-global-color-accent )
}




/*------------------------------------*
  #ENQUIRE-CTA-SECTION
*------------------------------------*/

.enquire-cta::before{
    content: url("https://seaviewleysdown.co.uk/wp-content/uploads/2024/10/enquire-graphic.svg");
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-30%);
    width: 60%;
    height: 100%;
    opacity: 0.1;
    z-index: 0;
}




/*------------------------------------*
  #UNIT-LISTINGS
*------------------------------------*/
/*
** Positioning the CTA last in the list
*/
[data-elementor-id="2466"] {
   order: 2;
}

/*
** Changing it's colour for each park
*/
.seaview-park [data-elementor-id="2466"] .first-to-know {
    background: var( --e-global-color-c22c21d ) !important;
}
/*
** Changing it's colour for each park
*/
.warden-bay [data-elementor-id="2466"] .first-to-know {
    background: var( --e-global-color-6ba74d0 ) !important;
}
/*
** Changing it's colour for each park
*/
.vanity-village [data-elementor-id="2466"] .first-to-know {
    background: var( --e-global-color-69f2cb7 ) !important;
}




/*------------------------------------*
  #DARK-SECTION
*------------------------------------*/
/*
** Changing the text and link colour for each park
*/
.dark-section a{
    color: #fff !important;
}
.dark-section .text p{
    color: var( --e-global-color-8a51625 ) !important;
}


/*
** Changing the title colour for each park
*/
.seaview-park .dark-section .title h4{
    color: var( --e-global-color-2f0db02 ) !important;
}
.warden-bay .dark-section .title h4{
    color: var( --e-global-color-bf25e1f ) !important;
}
.vanity-village .dark-section .title h4{
    color: var( --e-global-color-a52a54e ) !important;
}
.seaview-park .dark-section{
    background-color: var( --e-global-color-c22c21d ) !important;
}
.warden-bay .dark-section{
    background-color: var( --e-global-color-6ba74d0 ) !important;
}
.vanity-village .dark-section{
    background-color: var( --e-global-color-69f2cb7 ) !important;
}




/*------------------------------------*
  #NEWS-POSTS-TEMPLATE
*------------------------------------*/

/*
** Styling the news post thumb
*/
.news-post-thumb{
    height: 100%;
}
.news-post-thumb .news-featured-image{
    border-radius: 24px;
    overflow: hidden !important;
}
.news-post-thumb .news-featured-image img{
    width: 100%;
    transition: transform 0.3s ease;
}
.news-post-thumb:hover img{
    transform: scale(1.2);
}
.post-category {
    padding: 0 8px;
    border-radius: 4px;
    background: var(--stone, #F3F1EC);
}
.news-post-link{
    margin-top: auto;
}

/*
** Adding an underline to the Read More link
*/
.news-post-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px; /* Position the underline slightly below the text */
  height: 1px; /* Thickness of the underline */
  background-color: var( --e-global-color-primary );
  opacity: 0;
  transform: translateY(4px); /* Moves the line downward initially */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.news-post-thumb:hover .news-post-link::after {
  opacity: 1;
  transform: translateY(0); /* Moves the underline into position */
}

/*
** Adding the white background behind the featured image
*/
.post-banner::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 333px;
    bottom: 0;
    left: 0;
    background: white;
    z-index: 0;
}

/*
** Styling the excerpt
*/
.post-banner .post-excerpt {
    max-width: 660px !important;
    z-index: 1;
}

/*
** Styling the featured image
*/
.post-banner .post-featured-image {
    height: 500px;
    max-width: 888px;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

/*
** Setting the width of the post-content
*/
.post-content-container {
    max-width: 888px !important;
}




/*------------------------------------*
  #COLOUR-CHANGES
*------------------------------------*/

/*------------------------------------*
  #HOME
*------------------------------------*/

/* Background color when the header is scrolled */
.main-header.scrolled {
    background: #fff !important;
    margin-top: 16px;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}

.main-header.scrolled svg path{
  fill: #255684 !important;
}

.main-header.scrolled a{
  color: #255684 !important;
}

/*
** Adding the main-header underline
*/
.main-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: opacity .6s cubic-bezier(.4,0,.2,1);
}

.main-header.scrolled::after {
    display: none;
}

/* Logo styles */
.home .logo-bullet {
  opacity: 1;
}




/*------------------------------------*
  #ABOUT #CONTACT
*------------------------------------*/

/* 
** Default Logo opacity
*/
.about .logo-bullet {
  opacity: 1;
}

/* 
** Logo color
*/
.about .main-header svg path,
.contact .main-header svg path,
.privacy-policy .main-header svg path,
.post-type-archive-news .main-header svg path{
    fill: var( --e-global-color-primary ) !important;
}

/*
** Adding the main-header underline
*/
.about .main-header::after,
.contact .main-header::after,
.privacy-policy .main-header::after,
.post-type-archive-news .main-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: var( --e-global-color-primary );
    opacity: 0.2;
    transition: opacity .6s cubic-bezier(.4,0,.2,1);
}

@media only screen and (min-width: 1024px) {
    /* 
    ** Navigation color
    */
    .about .main-header a,
    .contact .main-header a,
    .privacy-policy .main-header a,
    .post-type-archive-news .main-header a{
        color: var( --e-global-color-primary ) !important;
    }
    .about .main-header .sub-menu a,
    .contact .main-header .sub-menu a,
    .privacy-policy .main-header .sub-menu a,
    .post-type-archive-news .main-header .sub-menu a{
        color: var( --e-global-color-secondary ) !important;
    }
    .about .main-header .sub-menu a:hover,
    .contact .main-header .sub-menu a:hover,
    .privacy-policy .main-header .sub-menu a:hover,
    .post-type-archive-news .main-header .sub-menu a:hover{
        color: var( --e-global-color-primary ) !important;
    }

}




/*------------------------------------*
  #COMBINED-COLOUR-STYLES - (3 Parks)
*------------------------------------*/

/*
** Adding the main-header underline
*/
.seaview-park .main-header::after,
.warden-bay .main-header::after,
.vanity-village .main-header::after{
    background-color: rgba(255, 255, 255, 0.2);
}

/* 
** Logo color when the header is scrolled
*/
.seaview-park .main-header.scrolled svg path,
.warden-bay .main-header.scrolled svg path,
.vanity-village .main-header.scrolled svg path {
  fill: #fff !important;
}

/* 
** Navigation color when the header is scrolled
*/
.seaview-park .main-header .logos .elementor-icon,
.seaview-park .main-header.scrolled a,
.warden-bay .main-header .logos .elementor-icon,
.warden-bay .main-header.scrolled a,
.vanity-village .main-header .logos .elementor-icon, 
.vanity-village .main-header.scrolled a {
  color: #fff !important;
}

/*------------------------------------*
  #SEAVIWEW-PARK
*------------------------------------*/

/* 
** Background color when the header is scrolled
*/
.seaview-park .main-header.scrolled{
    background: var( --e-global-color-c22c21d ) !important;
}
.seaview-park .main-header .seaview-park-logo::after{
    bottom: -16px;
    opacity: 1;
}

/*
** Text and Icon colour in the Text & Gallery Section
*/
.seaview-park .text-gallery .elementor-icon-list-icon svg .cls-1{
    fill: var( --e-global-color-c22c21d ) !important;
}
.seaview-park .text-gallery .elementor-icon-list-text{
    color: var( --e-global-color-c22c21d ) !important;
}

/*
** Listing Template Banner
*/
.park-seaview-park .medium-banner h1,
.park-seaview-park .medium-banner h2 {
    color: var( --e-global-color-2f0db02 ) !important;
}

.park-seaview-park .medium-banner .elementor-icon-list-items .elementor-icon-list-text{
    color: var( --e-global-color-c22c21d ) !important;
} 

.park-seaview-park .medium-banner .background-image::after{
    background: var( --e-global-color-c22c21d );
}



/*
** Unit Loop Thumb - gradient overlay
*/
 .seaview-park .park-units .unit-type .background-image::after {
    background: rgba(43, 49, 79, 0.8);
}
 .seaview-park .park-units .unit-type .park-location p{
    color: #6DA6DB !important;
}

/* 
** Ensure text color changes on hover 
*/
.seaview-park .park-units .unit-type:hover .btn-text p{
    color: var( --e-global-color-c22c21d ) !important;
}

/*------------------------------------*
  #WARDEN-BAY
*------------------------------------*/

/* 
** Background color when the header is scrolled
*/
.warden-bay .main-header.scrolled{
    background: var( --e-global-color-6ba74d0 ) !important;
}

.warden-bay  .main-header .warden-bay-logo::after{
    bottom: -16px;
    opacity: 1;
}

/*
** Listing Template Banner
*/
.park-warden-bay .medium-banner h1,
.park-warden-bay .medium-banner h2{
    color: var( --e-global-color-bf25e1f ) !important;
}
/* Banner details */
.park-warden-bay .medium-banner .elementor-icon-list-items .elementor-icon-list-text{
    color: var( --e-global-color-6ba74d0 ) !important;
} 
/* Banner image overlay */
.park-warden-bay .medium-banner .background-image::after{
    background: var( --e-global-color-6ba74d0 ) !important;
}
/* Banner button text */
.park-warden-bay .medium-banner .btn-text:hover p {
    color: var( --e-global-color-6ba74d0 ) !important;
}
/* Enquiry section background */
.park-warden-bay .enquire-cta {
    background: var( --e-global-color-bf25e1f ) !important;
}

/*
** Text and Icon colour in the Text & Gallery Section
*/
.warden-bay .text-gallery .elementor-icon-list-icon svg .cls-1{
    fill: var( --e-global-color-6ba74d0 ) !important;
}
.warden-bay .text-gallery .elementor-icon-list-text{
    color: var( --e-global-color-6ba74d0 ) !important;
}

/*
** Text & Gallery Section
*/
.park-warden-bay .text-gallery .subtitle h5{
    color: var( --e-global-color-bf25e1f ) !important;
}
.park-warden-bay .text-gallery .title h4{
    color: var( --e-global-color-6ba74d0 ) !important;
}
.park-warden-bay .text-gallery .e-n-accordion-item[open] .e-n-accordion-item-title{
    color: var( --e-global-color-bf25e1f ) !important;
}
.park-warden-bay .text-gallery .e-n-accordion-item svg path{
    fill: var( --e-global-color-bf25e1f ) !important;
}
.park-warden-bay .text-gallery .e-n-accordion-item:not([open]):hover .e-n-accordion-item-title{
    color: var( --e-global-color-6ba74d0 ) !important;
}

/*
** Unit Loop Thumb - gradient overlay
*/
.warden-bay .park-units .unit-type .background-image::after {
    background: rgba(8, 57, 55, 0.8);
}
.warden-bay .park-units .unit-type .park-location p{
    color: var( --e-global-color-bf25e1f ) !important;
}
/* 
** Ensure text color changes on hover 
*/
.warden-bay .park-units .unit-type:hover .btn-text p{
    color: var( --e-global-color-6ba74d0 ) !important;
}




/*------------------------------------*
  #VANITY-VILLAGE
*------------------------------------*/

/* 
** Background color when the header is scrolled
*/
.vanity-village .main-header.scrolled{
    background: var( --e-global-color-69f2cb7 ) !important;
}

.vanity-village .main-header .vanity-village-logo::after{
    bottom: -16px;
    opacity: 1;
}

/*
** Text and Icon colour in the Text & Gallery Section
*/
.vanity-village .text-gallery .elementor-icon-list-icon svg .cls-1{
    fill: var( --e-global-color-69f2cb7 ) !important;
}
.vanity-village .text-gallery .elementor-icon-list-text{
    color: var( --e-global-color-69f2cb7 ) !important;
}

/*
** Text centered section
*/
.vanity-village .text-centered h2,
.vanity-village .supplier-logos h2 {
    color: var( --e-global-color-69f2cb7 ) !important;
}

/*
** Listing Template Banner
*/
.park-vanity-village .medium-banner h1,
.park-vanity-village .medium-banner h2{
    color: var( --e-global-color-a52a54e ) !important;
}
/* Banner details */
.vanity-village .medium-banner .elementor-icon-list-items .elementor-icon-list-text{
    color: var( --e-global-color-69f2cb7 ) !important;
} 
/* Banner button text */
.park-vanity-village .medium-banner .btn-text:hover p {
    color: var( --e-global-color-69f2cb7 ) !important;
}
/* Banner image overlay */
.park-vanity-village .medium-banner .background-image::after{
    background: var( --e-global-color-69f2cb7 );
}
/* Enquiry section background */
.park-vanity-village .enquire-cta {
    background: var( --e-global-color-0272994 ) !important;
}
/* Enquiry section title colour */
.park-vanity-village .enquire-cta h2 {
    color: var( --e-global-color-a52a54e ) !important;
}
/* Enquiry section button colours */
.park-vanity-village .enquire-cta .btn-primary .elementor-button:before{
    background: var( --e-global-color-69f2cb7 ) !important;
}
.park-vanity-village .enquire-cta .btn-primary:hover .elementor-button-text {
    color: var( --e-global-color-69f2cb7 ) !important;
}


/*
** Unit Loop Thumb - gradient overlay
*/
.vanity-village .park-units .unit-type .background-image::after {
    background: rgba(79, 43, 61, 0.8);
}
.vanity-village .park-units .unit-type .park-location p{
    color: var( --e-global-color-a52a54e ) !important;
}

/* 
** Ensure text color changes on hover 
*/
.vanity-village .park-units .unit-type:hover .btn-text p{
    color: var( --e-global-color-69f2cb7 ) !important;
}

/* 
** hide ride recaptua on forms 
*/

.grecaptcha-badge { 
    visibility: hidden !important;
}

/* 
** single page blog heading styles 
*/

ul { margin-bottom: 20px;} 
ol { margin-bottom: 20px;}

.single-news  h2 {
padding-top: 20px;
font-size: 30px !important;
color: #255684 !important;
font-family: Caladea;
font-weight: 400 !important;
    
}

.single-news  h3 {
padding-top: 20px;
font-size: 25px !important;
color: #255684 !important;
font-family: Caladea;
font-weight: 300 !important;
}

.single-news  h4 {
padding-top: 20px;
font-size: 25px !important;
color: #255684 !important;
font-family: Caladea;
font-weight: 300 !important;
}

.single-news  h5 {
padding-top: 20px;
font-size: 25px !important;
color: #255684 !important;
font-family: Caladea;
font-weight: 300 !important;
}

.schema-faq-question {
    font-size: 20px !important;
    color: #255684;
    font-family: Caladea;
    
}/* End custom CSS */