/* =====================================================================
   Eleanor Insurance - brand theme (loaded AFTER custom.css)
   Static for now. Later the same variables are written from the DB
   (FT_SiteSetting colors) by the master page.
   Brand colors from the logo: blue #0033A0, red #D32630
   ===================================================================== */
:root{
	--primary-color				: #0A1F4D;	/* headings, dark text */
	--secondary-color			: #F3F6FC;	/* light section background */
	--bg-color					: #FFFFFF;
	--text-color				: #5B6475;
	--accent-color				: #D32630;	/* brand red - buttons, highlights */
	--accent-secondary-color	: #0033A0;	/* brand blue - top bar, dark sections, sticky header */
	--accent-secondary-rgb		: 0, 51, 160;
	--white-color				: #FFFFFF;
	--divider-color				: #0A1F4D1A;
	--dark-divider-color		: #FFFFFF1A;
}

/* custom.css hard-codes the template green (#123017) in these overlays */
.hero::before{
	background: linear-gradient(180deg, rgba(var(--accent-secondary-rgb), 0.00) 25.27%, var(--accent-secondary-color) 87.65%);
}
.intro-video::before{
	background: linear-gradient(180deg, rgba(var(--accent-secondary-rgb), 0.50) 10%, rgba(var(--accent-secondary-rgb), 0.00) 50%, rgba(var(--accent-secondary-rgb), 0.90) 100%);
}
.cta-box::before{
	background: linear-gradient(270deg, transparent 48.07%, rgba(var(--accent-secondary-rgb), 0.90) 94.01%);
}
.case-study-item-image a figure::before{
	background: linear-gradient(180deg, rgba(var(--accent-secondary-rgb), 0.00) 50%, rgba(var(--accent-secondary-rgb), 0.90) 100%);
}

/* red buttons: white text + white arrow read better than dark navy on red */
.btn-default{
	color: var(--white-color);
}
/* highlighted button (header) fills WHITE on hover/focus, so its text must be dark - not white */
.btn-default.btn-highlighted:hover,
.btn-default.btn-highlighted:focus{
	color: var(--accent-secondary-color);
}
.btn-default.btn-highlighted:focus::after{
	left: 0;
	right: 0;
	opacity: 1;
}
.btn-default::before,
.readmore-btn::before{
	background-image: url('../images/eleanor/icons/arrow-white.svg');
}

/* logo size: any logo fits its box without being stretched.
   Wide logo (e.g. 360 x 120) = limited by height and width; square / round logo (class set by the
   website from the picture's shape) = a bit taller so it does not look tiny. */
.navbar-brand{
	display: flex;
	align-items: center;
}
.navbar-brand img{
	display: block;
	width: auto;
	height: auto;
	max-height: 50px;
	max-width: 230px;
	object-fit: contain;
}
.navbar-brand img.logo-square{
	max-height: 70px;
	max-width: 70px;
}
.footer-logo img,
.footer-logo-prime img,
.footer-logo-stone img{
	display: block;
	width: auto;
	height: auto;
	max-height: 56px;
	max-width: 240px;
	object-fit: contain;
}
.footer-logo img.logo-square,
.footer-logo-prime img.logo-square,
.footer-logo-stone img.logo-square{
	max-height: 100px;
	max-width: 100px;
}
#loading-icon img{
	width: 60px;
	height: auto;
}

/* Eleanor menu has 7 items (template had 6): keep each item on one line */
.main-menu .nav-menu-wrapper{
	margin: 0 10px;
}
.main-menu ul li{
	margin: 0 2px;
}
.main-menu ul li a{
	white-space: nowrap;
	font-size: 15px;
	padding: 12px 8px !important;
	text-transform: none;
}
.main-menu ul li.submenu > a:after{
	margin-left: 5px;
}
.main-menu ul ul{
	width: 260px;
}
.main-menu ul ul li a{
	white-space: normal;
}
@media only screen and (max-width: 1399px){
	.navbar-brand img{
		max-height: 42px;
		max-width: 200px;
	}
	.navbar-brand img.logo-square{
		max-height: 62px;
		max-width: 62px;
	}
	.main-menu ul li a{
		font-size: 14px;
		padding: 12px 6px !important;
	}
}
@media only screen and (max-width: 1199px){
	/* not enough room next to 7 menu items; the quote link is still in the top bar/menu */
	.main-menu .header-btn{
		display: none;
	}
}

/* ===================== Hero slider (HERO_SLIDER) ===================== */
/* keep the slider BELOW the template's blue shading (.hero::before, z-index 1) */
.ft-hero .hero-bg-video{
	z-index: 0;
}
.ft-hero::before{
	background: linear-gradient(180deg, rgba(var(--accent-secondary-rgb), 0.55) 0%, rgba(var(--accent-secondary-rgb), 0.15) 35%, rgba(var(--accent-secondary-rgb), 0.75) 70%, var(--accent-secondary-color) 100%);
}
.ft-hero .ft-hero-slider .swiper,
.ft-hero .ft-hero-slider .swiper-wrapper,
.ft-hero .ft-hero-slider .swiper-slide{
	height: 100%;
}
.ft-hero .ft-hero-img{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transform: scale(1.08);
	transition: transform 7s linear;
}
.ft-hero .swiper-slide-active .ft-hero-img{
	transform: scale(1);
}
.ft-hero .ft-hero-text{
	display: none;
}
.ft-hero .ft-hero-text.ft-active{
	display: flex;
	animation: ftFadeUp .8s ease both;
}
@keyframes ftFadeUp{
	from{ opacity: 0; transform: translateY(30px); }
	to{ opacity: 1; transform: none; }
}

/* moving strip of partner companies */
.ft-partners{
	width: calc(74% - 1.042vw);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ft-marquee-track{
	display: flex;
	align-items: center;
	gap: 50px;
	width: max-content;
	animation: ftMarquee 60s linear infinite;
}
.ft-partners:hover .ft-marquee-track{
	animation-play-state: paused;
}
@keyframes ftMarquee{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}
.ft-partner{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	color: var(--white-color);
}
.ft-partner img{
	height: 40px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}
.ft-partner-name{
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
	opacity: .9;
}
.ft-partner-name::before{
	content: '\f058';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	color: var(--accent-color);
	margin-right: 10px;
}
@media only screen and (max-width: 991px){
	.ft-partners{ width: 100%; }
}

/* ===================== Icon grid (ICON_GRID) ===================== */
.ft-icon-grid-section{
	padding: 100px 0;
	background: var(--secondary-color);
}
.ft-icon-grid{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}
.ft-icon-tile{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 28px 12px;
	min-height: 150px;
	transition: all .3s ease-in-out;
}
.ft-icon-tile-icon{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-size: 26px;
	transition: all .3s ease-in-out;
}
.ft-icon-tile-icon img{
	max-width: 32px;
	max-height: 32px;
}
.ft-icon-tile-name{
	font-weight: 600;
	color: var(--primary-color);
	line-height: 1.3em;
}
.ft-icon-tile:hover{
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
	transform: translateY(-4px);
}
.ft-icon-tile:hover .ft-icon-tile-name{
	color: var(--white-color);
}
.ft-icon-tile:hover .ft-icon-tile-icon{
	background: var(--accent-color);
	color: var(--white-color);
}
.ft-section-btn{
	margin-top: 40px;
}
.ft-section-btn .btn-default{
	margin-right: 50px;
}
@media only screen and (max-width: 1199px){
	.ft-icon-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media only screen and (max-width: 767px){
	.ft-icon-grid-section{ padding: 50px 0; }
	.ft-icon-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.ft-icon-tile{ min-height: 120px; padding: 20px 8px; }
}

/* ===================== Banner with photo (IMAGE_BANNER) ===================== */
.ft-image-banner{
	padding: 100px 0;
}
.ft-image-banner-box{
	position: relative;
	overflow: hidden;
	background: var(--accent-secondary-color);
	border-radius: 30px;
	padding: 50px 50px 0;
}
.ft-image-banner-box::before{
	content: '';
	position: absolute;
	right: -120px;
	top: -120px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--accent-color);
	opacity: .9;
}
.ft-image-banner-box.ft-image-left::before{
	right: auto;
	left: -120px;
}
.ft-image-banner-text{
	position: relative;
	z-index: 1;
	padding-bottom: 50px;
}
.ft-image-banner .section-title h2,
.ft-image-banner .section-title p{
	color: var(--white-color);
}
.ft-image-banner .section-title .section-sub-title{
	color: var(--white-color);
	border-color: var(--dark-divider-color);
}
.ft-banner-points{
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
}
.ft-banner-points li{
	color: var(--white-color);
	font-weight: 500;
}
.ft-banner-points li i{
	color: var(--accent-color);
	margin-right: 8px;
}
.ft-image-banner-box:not(.ft-image-left) .ft-banner-points li i{
	color: var(--white-color);
}
.ft-banner-buttons{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 0;
}
.ft-btn-light{
	background: var(--white-color);
	color: var(--primary-color);
}
.ft-btn-light::before{
	background-color: var(--white-color);
	background-image: url('../images/theme/icons/arrow-primary.svg');
}
.ft-image-banner-image{
	position: relative;
	z-index: 1;
	text-align: center;
}
.ft-image-banner-image img{
	max-height: 460px;
	width: auto;
	max-width: 100%;
	border-radius: 20px 20px 0 0;
	object-fit: cover;
}
@media only screen and (max-width: 991px){
	.ft-image-banner{ padding: 50px 0; }
	.ft-image-banner-box{ padding: 30px 20px 0; border-radius: 20px; }
}

/* ===================== Website forms: captcha, messages ===================== */
.ft-hp{
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}
.ft-captcha-box{
	max-width: 520px;
}
.ft-captcha-head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.ft-captcha-head label{
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
}
.dark-section .ft-captcha-head label{
	color: var(--primary-color);
}
.ft-captcha-refresh{
	font-size: 14px;
	color: var(--text-color);
}
.ft-captcha-refresh:hover{
	color: var(--accent-color);
}
.ft-captcha-row{
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.ft-captcha-img,
.ft-captcha-inputs{
	flex: 1 1 200px;
	min-height: 70px;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--bg-color);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
}
.ft-captcha-img img{
	max-width: 100%;
	height: auto;
}
.ft-captcha-inputs{
	gap: 8px;
}
.ft-cap-digit{
	width: 42px;
	height: 46px;
	border: none;
	border-bottom: 3px solid var(--divider-color);
	background: transparent;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-color);
	outline: none;
}
.ft-cap-digit:focus{
	border-bottom-color: var(--accent-secondary-color);
}
.ft-cap-digit::placeholder{
	color: #9aa3b2;
}
.ft-enquiry-form .ft-invalid,
.ft-cap-digit.ft-invalid{
	border-color: var(--error-color, #e65757) !important;
	border-bottom-color: var(--error-color, #e65757) !important;
}
.ft-form-msg{
	display: none;
	margin-top: 15px;
	padding: 10px 14px;
	border-radius: 8px;
	font-weight: 500;
}
.ft-form-msg.ft-msg-ok{
	background: #e8f6ec;
	color: #18794e;
}
.ft-form-msg.ft-msg-error{
	background: #fdecec;
	color: #c0392b;
}
.ft-newsletter-msg{
	margin-top: 10px;
	font-size: 14px;
}
button.ft-busy{
	opacity: .7;
	cursor: wait;
}

/* ===================== Inner-page designs ===================== */
.ft-mv-section, .ft-timeline-section, .ft-awards-section, .ft-downloads-section,
.ft-form-block, .ft-branches, .page-team, .page-blog{
	padding: 100px 0;
}
.ft-mv-section, .ft-awards-section{
	background: var(--secondary-color);
}
.page-services .service-item, .page-team .team-item, .page-blog .post-item{
	margin-bottom: 30px;
}
.ft-card-icon{
	width: 56px; height: 56px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--secondary-color); color: var(--accent-color); font-size: 24px;
	margin-bottom: 15px;
}
.ft-card-icon img{ max-width: 30px; max-height: 30px; }

/* mission & vision */
.ft-mv-card{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 40px 35px;
	transition: all .3s ease-in-out;
}
.ft-mv-card:hover{ transform: translateY(-4px); box-shadow: 0 15px 40px rgba(var(--accent-secondary-rgb), .12); }
.ft-mv-icon{
	width: 64px; height: 64px; border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	background: var(--accent-secondary-color); color: var(--white-color); font-size: 28px;
	margin-bottom: 25px;
}
.ft-mv-icon img{ max-width: 34px; max-height: 34px; }
.ft-mv-card h3{ font-size: 24px; margin-bottom: 12px; }
.ft-mv-card p{ margin: 0; font-size: 17px; line-height: 1.7em; }

/* timeline */
.ft-timeline{
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding-left: 40px;
}
.ft-timeline::before{
	content: ''; position: absolute; left: 14px; top: 0; bottom: 0;
	width: 2px; background: var(--divider-color);
}
.ft-timeline-item{ position: relative; margin-bottom: 35px; }
.ft-timeline-item::before{
	content: ''; position: absolute; left: -33px; top: 8px;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--accent-color); box-shadow: 0 0 0 5px var(--bg-color);
}
.ft-timeline-year{
	display: inline-block; background: var(--accent-secondary-color); color: var(--white-color);
	font-weight: 700; border-radius: 30px; padding: 4px 16px; margin-bottom: 10px;
}
.ft-timeline-body{
	background: var(--secondary-color); border-radius: 16px; padding: 22px 25px;
}
.ft-timeline-body figure img{ border-radius: 12px; margin-bottom: 15px; max-height: 220px; object-fit: cover; width: 100%; }
.ft-timeline-body h3{ font-size: 20px; margin-bottom: 8px; }
.ft-timeline-body p{ margin: 0; }

/* awards */
.ft-award-card{
	text-align: center; background: var(--bg-color); border: 1px solid var(--divider-color);
	border-radius: 20px; padding: 35px 20px; margin-bottom: 30px; height: calc(100% - 30px);
}
.ft-award-icon{
	width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--secondary-color); color: var(--accent-color); font-size: 34px;
}
.ft-award-icon img{ max-width: 60px; max-height: 60px; }
.ft-award-card h3{ font-size: 20px; margin-bottom: 6px; }
.ft-award-card span{ display: block; color: var(--accent-color); font-weight: 600; margin-bottom: 8px; }
.ft-award-card p{ margin: 0; font-size: 15px; }

/* branches */
.ft-branch-card{
	background: var(--bg-color); border: 1px solid var(--divider-color); border-radius: 20px;
	padding: 30px; margin-bottom: 30px; height: calc(100% - 30px);
}
.ft-branch-card h3{ font-size: 22px; margin-bottom: 15px; }
.ft-branch-card h3 span{ display: block; font-size: 15px; color: var(--accent-color); font-weight: 600; margin-top: 4px; }
.ft-branch-card p{ display: flex; gap: 12px; margin-bottom: 10px; }
.ft-branch-card p i{ color: var(--accent-color); margin-top: 5px; width: 16px; }
.ft-branch-card a{ color: var(--text-color); }
.ft-branch-card .readmore-btn{ margin-top: 10px; color: var(--primary-color); }
.ft-branches-inline{ margin: 60px 0 30px; }

/* forms in cards / sidebar */
.ft-form-card{
	background: var(--secondary-color); border-radius: 30px; padding: 40px;
}
.ft-form-card h2{ font-size: 28px; margin-bottom: 25px; }
.ft-form-block-text .section-title{ margin-bottom: 25px; }
.ft-form-block-image{ margin-top: 30px; }
.ft-form-block-image img{ border-radius: 20px; width: 100%; max-height: 420px; object-fit: cover; }
.ft-check-list{ list-style: none; padding: 0; margin: 0 0 25px; }
.ft-check-list li{ display: flex; gap: 12px; margin-bottom: 12px; font-weight: 500; color: var(--primary-color); }
.ft-check-list li i{ color: var(--accent-color); margin-top: 4px; }
.ft-sidebar-form{
	background: var(--secondary-color); border-radius: 20px; padding: 30px 25px; margin-bottom: 30px;
}
.ft-sidebar-form h2{ font-size: 24px; color: var(--accent-color); margin-bottom: 20px; line-height: 1.3em; }
.ft-sidebar-form .ft-captcha-img, .ft-sidebar-form .ft-captcha-inputs{ flex-basis: 100%; }
.page-category-list li.ft-current a{ color: var(--accent-color); font-weight: 700; }

/* detail pages */
.ft-rich-text p{ margin-bottom: 18px; }
.ft-rich-text h3{ font-size: 22px; margin: 25px 0 12px; }
.ft-rich-text ul{ padding-left: 20px; margin-bottom: 18px; }
.ft-detail-list{
	background: var(--secondary-color); border-radius: 20px; padding: 30px; margin: 30px 0;
}
.ft-detail-list h3{ font-size: 22px; margin-bottom: 18px; }
.ft-detail-list ul{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 25px; }
.ft-detail-list li{ display: flex; gap: 10px; }
.ft-detail-list li i{ color: var(--accent-color); margin-top: 4px; }
.ft-detail-children{ margin-top: 40px; }
.ft-detail-children h3{ font-size: 24px; margin-bottom: 25px; }
.ft-detail-children .service-item{ margin-bottom: 30px; }
@media only screen and (max-width: 767px){
	.ft-detail-list ul{ grid-template-columns: 1fr; }
	.ft-form-card{ padding: 25px 18px; border-radius: 20px; }
	.ft-mv-section, .ft-timeline-section, .ft-awards-section, .ft-downloads-section, .ft-form-block, .ft-branches, .page-team, .page-blog{ padding: 50px 0; }
}

/* downloads with OTP */
.ft-download-card{
	display: flex; gap: 25px; align-items: flex-start; background: var(--secondary-color);
	border-radius: 24px; padding: 25px; margin-bottom: 30px;
}
.ft-download-cover{ flex: 0 0 150px; margin: 0; }
.ft-download-cover img{ width: 150px; height: 190px; object-fit: cover; border-radius: 14px; }
.ft-download-body{ flex: 1; min-width: 0; }
.ft-download-body h3{ font-size: 24px; margin-bottom: 10px; }
.ft-otp-box{ margin-top: 20px; }
.ft-otp-note{ font-size: 14px; }
.ft-otp-inputs input{ max-width: 220px; font-size: 26px; letter-spacing: 10px; text-align: center; font-weight: 700; margin-bottom: 15px; }
.ft-otp-back{ margin-left: 15px; font-size: 14px; }
@media only screen and (max-width: 575px){
	.ft-download-card{ flex-direction: column; }
}
.ft-video-title{ font-size: 18px; margin-top: 12px; }

/* ---------- Client tools (2026-10-15): header / footer designs, announcement, WhatsApp ---------- */
/* the header sits on the hero; the wrapper keeps it below the announcement bar */
.ft-top-wrap{ position: relative; }
header.main-header.no-topbar{ top: 0; }
.ft-footer-address{ font-size: 16px; line-height: 1.5; }
.ft-bottom-links{ list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.ft-bottom-links li a{ color: var(--white-color); opacity: .8; font-size: 14px; }
.ft-bottom-links li a:hover{ opacity: 1; }

.ft-announcement{ background: var(--accent-color); color: var(--white-color); text-align: center; padding: 8px 0; position: relative; z-index: 101; }
.ft-announcement p{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--white-color); }
.ft-announcement a{ color: var(--white-color); font-weight: 600; text-decoration: underline; margin-left: 6px; }

.ft-whatsapp{
	position: fixed; right: 22px; bottom: 90px; z-index: 999;
	width: 56px; height: 56px; border-radius: 50%;
	background: #25D366; color: #fff; font-size: 30px;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s ease;
}
.ft-whatsapp:hover{ color: #fff; transform: scale(1.08); }
@media only screen and (max-width: 767px){
	.ft-whatsapp{ right: 15px; bottom: 75px; width: 50px; height: 50px; font-size: 26px; }
}

.ft-admin-strip{ background: #ffc107; color: #222; text-align: center; font-size: 14px; padding: 6px 15px; position: relative; z-index: 102; }

/* phones: smaller logo so the menu button keeps its place */
@media only screen and (max-width: 767px){
	.navbar-brand img{
		max-height: 38px;
		max-width: 170px;
	}
	.navbar-brand img.logo-square{
		max-height: 54px;
		max-width: 54px;
	}
}