/**
Theme Name: Franklyn James
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: franklyn-james
Template: astra
*/
a:focus {
  	outline: none;
}
#primary {
	margin-bottom: 0;
	margin: 0 !important;
	padding: 0 !important;
}
.ast-container {
	max-width: 100% !important;
	padding: 0 !important;
}
.ast-article-single{
	padding: 0px !important;
}
:not(.p-mb) > p{
	margin: 0px !important;
}
.color-green a{
	color: #9ACA3C !important;
}
.italic-me{
	font-style: italic;
}
.uppercase-me{
	text-transform: uppercase;
}
.span-italic span{
	font-style: italic;
	color: #9ACA3C;
}
.w-300{
	font-weight: 300 !important;
}
.w-300 .elementor-icon-list-text{
	font-weight: 300 !important;
}
.green span{
	color: #9ACA3C;
	font-family: "Playfair Display", sans-serif;
}
/* Header */
#header{
	width: 100% !important;
	transition: 0.3s ease-in-out;
}
 
#header.scrolled{
	background: #2d2d2d !important;
}
 
#header.scrolled .e-con-inner{
	transition: 0.3 ease-in-out;
}
 
#header.scrolled > .e-con-inner{
	padding-top: 25px !important;
	padding-bottom: 25px !important;
}

/* End-Header */

/* Header-border-and-background */
.page #header > .e-con-inner{
	border-bottom: 1px solid #FFFFFF1F !important;
}
.page #header.scrolled > .e-con-inner, .home.page #header > .e-con-inner{
	border-bottom: 0px !important;
}
.single-property #header{
	background-color: #1F1F1F;
}
/* Parent box */
.hover-box {
	position: relative;
	overflow: hidden;
}

/* Button + Icon initial state */
.hover-box .hover-btn{
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.4s ease;
}
.hover-box .hover-icon {
	opacity: 0;
	transition: all 0.4s ease;
}
.hover-icon img{
	box-shadow: none !important;
}
/* Optional: keep button at bottom */
.hover-box .hover-btn {
	position: absolute;
	bottom: 15px;
	left: 15px;
}

/* Optional: icon position (top-right like your design) */
.hover-box .hover-icon {
	position: absolute;
	top: 15px;
	right: 15px;
}

/* Hover effect */

.hover-box:hover .hover-btn,
.hover-box:hover .hover-icon {
	opacity: 1;
	transform: translateY(0);
}

.hover-box .hover-title{
	transition: all 0.4s ease;
}
.hover-box:hover  .hover-title{
	margin-bottom: 50px;
	transition: all 0.4s ease;
}
.hover-btn:hover{
	background: #688C22 !important;
}
/* On Hover border 0 to 100 */
.hover-border {
  	position: relative;
}

.hover-border::after {
	content: "";
	position: absolute;
	inset: 0;
	border-bottom: 2px solid #9ACA3C; 

	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
	z-index: 5;
}

.hover-border:hover::after {
	transform: scaleX(1);
}

/* End On Hover border 0 to 100 */
.poperty-border.hover-border::after , .hover-border.poperty-image-box::after{
	border-bottom: 5px solid #9ACA3C !important; 
	z-index: 2;
}
.guide-box:hover{
	cursor: pointer;
}
.guide-box:hover .guide-point .elementor-heading-title{
	color: #ffffff !important;
}
.guide-button{
	display: none !important;
}
.guide-box:hover .guide-button{
	display: block !important;
}
.tab-img {
	display: none;
	transition: opacity 0.4s ease;
}

.tab-img.active {
	display: block;
}

.guide-box.tab-btn.active {
	background-color: #9ACA3C !important;
	color: #fff;
}
.icon-size .elementor-button-icon svg{
	width: 43px !important;
	height: 42px !important;
}
.icon-size .elementor-button-content-wrapper{
	align-items: center;
}


/* Reset counter */
.step-wrapper {
	counter-reset: step;
}

/* Each item increments */
.step-item {
	counter-increment: step;
}

/* Add number before title */
.step-item .step-title .elementor-heading-title::before {
	content: counter(step, decimal-leading-zero) " ";
	color: #9ACA3C;
	font-style: italic;
}
.custom-loading-btn .prev, .custom-loading-btn .next{
	padding: 15px 40px;
    background: #9ACA3C;
}
.custom-loading-btn .prev:hover, .custom-loading-btn .next:hover{
    background: #80A92F;
}
.uppercase-me button{
	text-transform: uppercase;
}
.key-features ul {
	display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px 50px;
	margin-left: 20px;
}
.ul-ol-style ul , .ul-ol-style ol{
	padding: 0;
	margin-left: 20px;
	margin-bottom: 0px;
}
.poperty-image-box{
	overflow: hidden;
}
.poperty-box img{
	transition: transform 0.3s ease;
}
.poperty-box:hover img{
	transition: transform 0.3s ease;
	transform: scale(1.1) !important;
}

/* Poperty-gallery */
.property-gallery {
	display: flex;
	gap: 15px;
}

.thumbs-slider {
	width: 120px;
 	height: 431px; 
}

.thumbs-slider .swiper-slide {
	height: auto !important;
	opacity: 0.6;
	cursor: pointer;
}
.thumbs-slider .swiper-slide-thumb-active {
	opacity: 1;
	border: 2px solid #7fbf3f;
}
.main-slider {
  	flex: 1;
	height: 431px;
}
.main-slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thumbs-wrapper{
    position: relative;
}
.thumb-prev,
.thumb-next{
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    z-index: 5;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    user-select: none;
}

.thumb-prev{
    top: -18px;
}

.thumb-next{
    bottom: -18px;
}

/* End-Poperty-gallery */

.toggle-content {
	max-height: 0px;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.toggle-content.show {
	max-height: 1000px ; 
}
.elementor-button-icon {
	transition: transform 0.3s ease;
}
.rotate-icon {
	transform: rotate(180deg);
}

/* mobile-sub-menu */
 #header-menu span.sub-arrow{
    position: absolute;
    right: 10px;
	padding-top: 0;
}
#header-menu span.sub-arrow svg{
	display: none;
}
#header-menu span.sub-arrow::before{
	content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: 8px;
    vertical-align: middle;
} 
/* mobile-sub-menu */



.word-break{
	word-break: break-word;
	overflow-wrap: break-word;
}
.custom-gallery .gallery {
	margin: 0px !important;
}
.custom-gallery .gallery-item{
	padding-right: 0px !important;
}

.home-heading h1{
	line-height: 1.2em !important;
}
.plus-icon span{
	font-size: 45px;
	line-height: 1;
}
.hover-box.area img {
	transition: transform 0.4s ease;
}
.hover-box.area:hover img{
	transform: scale(1.1);
}
.hover-box.area {
	position: relative;
	overflow: hidden;
}
.hover-box.area::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0.4;
	transition: opacity 0.4s ease;
	z-index: 3;
}
.hover-box.area:hover::before {
	opacity: 0.6;
}
 .hover-box.area .area-title {
	 z-index: 4;
}

.contact-form .elementor-form select{
	line-height: 1;
	color: #2B2D30;
}
.toggle-btn a{
	cursor: pointer;
}

/* Area Page Blackbox */
.blackbox-sections{
	display: grid;
	gap: 30px;
    grid-template-columns: repeat(2, 1fr);
}
.blackbox-card{
	background-color: #1F1F1F;
	padding: 40px;
}
.blackbox-header{
	display: flex;
	margin-bottom: 20px;
}
.blackbox-title{
	font-family: "Playfair Display", serif;
	font-size: 30px;
	font-weight: 400;
	color: #fff;
}
.blackbox-number{
	font-family: "Playfair Display", serif;
	font-size: 30px;
	font-weight: 400;
	color: #9ACA3C;
    font-style: italic;
	line-height: 1;
}
.blackbox-description{
	font-family: "Google Sans Flex", sans-serif;
	font-size: 16px;
	color: #fff;
}
/* End Area Page Blackbox */
/* Area Page Statistics */
.market-box-wrapper{
	display: grid;
	gap: 30px;
    grid-template-columns: repeat(2, 1fr);
}
.market-box-card {
	border: 1px solid #9ACA3C;
	padding: 30px;
}
.market-box-title, .market-box-price{
	font-family: "Playfair Display", serif;
	font-weight: 400;
	color: #9ACA3C;
	margin-bottom: 10px;
}
.market-box-title{
	font-size: 20px;
}
.market-box-price{
	font-size: 30px;
}
.market-box-price::before{
    content: "£";
}
.market-box-description{
	font-family: "Google Sans Flex", sans-serif;
	font-size: 16px;
	color: #2B2D30;
}
/* End Area Page Statistics */
/* Area Page favourite spots */
.favourite-spot-item {
	font-family: "Google Sans Flex", sans-serif;
	font-size: 20px;
	color: #2B2D30;
	margin-bottom: 5px;
}
/* End Area Page favourite spots */

/* a.has-submenu {
	display: flex;
	justify-content: space-between;
	position: relative;
}
.has-submenu .sub-arrow{
	position: absolute;
	right: 0;
	padding: 15px;
}
.has-submenu .sub-arrow svg{
	display: none;
}
.has-submenu .sub-arrow::before{
	content: '';
	position: absolute;
	right: 5px;
	top: 45%;
	width: 8px;
	height: 8px;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	transform: translateY(-50%) rotate(45deg);
	transition: 0.3s ease;
}
.highlighted .sub-arrow::before{
	transform: translateY(-50%) rotate(-135deg);
} */

.dialog-close-button.offcanvas-close{
	left: 0px;
}
.back-button a{
	position: relative;
	padding-left: 15px;
	font-family: "Google Sans Flex", sans-serif;
	color: #2B2D30;
	font-size: 18px;
}
.back-button a::before{
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-left: 2px solid #2B2D30;
	border-bottom: 2px solid #2B2D30;
	transform: translateY(-50%) rotate(45deg);
}

.property-details-price{
	font-family: "Google Sans Flex", sans-serif;
	font-size: 35px;
	color: #2B2D30;
}
.pw-price{
	font-size: 18px;
}

.no-text-decoration a{
	text-decoration: none !important;
}
.blog-img a{
	width: 100%;
}
.custom-html h2{
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: 30px;
	margin: 20px 0 !important;
}
.custom-html h3{
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: 25px;
	margin: 20px 0 10px !important;
}
.custom-html ul, 
.custom-html ol{
	margin:10px 0 10px 30px;
}
.custom-html a{
	color: var(--e-global-color-primary);
}
.custom-html img{
	width: 100%;
	height: 400px;
	object-fit: cover;
	margin-top: 20px;
	box-shadow: none !important;
}
.loop .e-loop-item {
	border: none !important;
	padding: 0;
}
.custom-html ul li, 
.custom-html ul p,
.custom-html ol li,
.custom-html ol p{
	margin-bottom:10px !important;
}
.custom-html ol li::marker {
    color: var(--e-global-color-accent);
    font-size: 20px;
	font-weight: 600;
}
.custom-html p{
	margin-bottom: 12px;
}
.elementor-nav-menu--main .elementor-nav-menu ul {
    width: auto !important;
}


.office-direction-label {
	font-family: var(--e-global-typography-355916b-font-family), Sans-serif;
    margin: 0 0 14px;
    color: #9ACA3C;
    font-size: 14px !important;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.office-direction-instructions {
	font-family: var(--e-global-typography-6bdbd8f-font-family), Sans-serif;
	font-size: var(--e-global-typography-6bdbd8f-font-size);
	font-weight: var(--e-global-typography-6bdbd8f-font-weight);
	line-height: var(--e-global-typography-6bdbd8f-line-height);
	color: var(--e-global-color-primary);
}

.office-direction-instructions p {
    margin: 0 0 10px;
}

.office-direction-instructions p:last-child {
    margin-bottom: 0;
}

/* Office Details Banner Bg Slide */
.header-image-slider {
    position: relative;
    overflow: hidden;
}

/* Slider image layers */
.header-image-slider .header-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none;
    z-index: 0;
}

.header-image-slider .header-slide.active {
    opacity: 1;
}

/* Dark overlay */
.header-image-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(43, 45, 48, 0.5);
    z-index: 1;
    pointer-events: none;
}

/* Elementor content */
.header-image-slider > *:not(.header-slide) {
    position: relative;
    z-index: 2;
}
/* End Office Details Banner Bg Slide */
@media(max-width: 1280px){
	.thumbs-slider , .main-slider{
		height: 350px;
	}
}
@media(max-width: 1024px) {
	.thumbs-slider {
		width: 80px;
	}
	.thumbs-slider .swiper-slide {
		height: 80px;
	}
	.mob-no-br br{
		display: none;
	}
	.blackbox-card{
		padding: 30px;
	}
	.key-features ul {
		grid-template-columns: repeat(1, 1fr);
	}
	
	a.has-submenu {
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.has-submenu .sub-arrow{
		position: absolute;
		right: 0;
		padding: 15px;
	}
	.has-submenu .sub-arrow svg{
		display: none;
	}
	.has-submenu .sub-arrow::before{
		content: '';
		position: absolute;
		right: 5px;
		top: 45%;
		width: 8px;
		height: 8px;
		border-right: 2px solid #FFF;
		border-bottom: 2px solid #FFF;
		transform: translateY(-50%) rotate(45deg);
		transition: 0.3s ease;
	}
	.highlighted .sub-arrow::before{
		transform: translateY(-50%) rotate(-135deg);
	} 
	
	.custom-html h2{
		font-size: 25px;
	}
	.custom-html img{
		height: 350px;
	}
}
@media(max-width: 767px){
	#header.scrolled > .e-con-inner{
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}
	.custom-loading-btn .prev, .custom-loading-btn .next{
		padding: 10px 20px;
	}
	.thumbs-slider , .main-slider {
		height: 300px;
	}
	.blackbox-sections{
    	grid-template-columns: repeat(1, 1fr);
	}
	.blackbox-card{
		padding: 20px;
	}
	.blackbox-title, .blackbox-description{
		text-align: center;
	}
	.blackbox-header{
		justify-content: center;
	}
	.market-box-wrapper{
		grid-template-columns: repeat(1, 1fr);
	}
	.favourite-spot-item , .market-box-title, .market-box-price, .market-box-description{
		text-align: center;
	}
	
	
	.property-gallery{
        flex-direction: column-reverse;
    }
	.main-slider{
		width: 100%;
	}
    .thumbs-wrapper{
        width: 100%;
    }

    .thumbs-slider{
        height: auto;
		width: 100%;
    }
    .main-slider img{
        height: 350px;
    }

    .thumb-prev,
    .thumb-next{
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .thumb-prev{
        left: -10px;
    }

    .thumb-next{
        right: -10px;
        left: auto;
    }
	.thumb-prev, .thumb-next {
		width: 30px;
		height: 30px;
	}
	.custom-html h2,
	.custom-html p{
		text-align: center;
	}
	.custom-html ul p,
	.custom-html ol p{
		text-align: left !important;
	}
	.custom-html img{
		height: 300px;
	}
	.office-direction-label,
	.office-direction-instructions p{
		text-align: center;
	}
	
	/* 	31-08-26 */
	.hover-box .hover-btn{
		opacity: 1;
		position: relative;
    	bottom: 0; 
   		left: 0;
		transform: translateY(0px);
	}
	.hover-box:hover .hover-title {
		margin-bottom: 20px;
	}
	.area-title h3{
		font-size: 23px !important;
	}
}


/* Related Articles grid container */
.fj-related-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
}

/* Individual related article card */
.fj-related-item {
    display: flex;
    flex-direction: column;
    min-width: 0; /* prevents grid blowout from long titles/images */
}

.fj-related-item .elementor {
    width: 100%;
    height: 100%;
}

/* Reset the loop item's internal container so it doesn't fight the grid */
.fj-related-item .e-con.e-parent {
    width: 100%;
    max-width: 100%;
}

.fj-related-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .fj-related-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
    .fj-related-articles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}