@charset "UTF-8";

/*
Theme Name: Kingfisher
Theme URI: 
Author: Kingfisher
Author URI: 
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.3
Requires PHP: 5.6
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

.gradient-bg{background: #473B89;
background: linear-gradient(90deg,rgba(71, 59, 137, 1) 0%, rgba(202, 47, 142, 1) 50%, rgba(246, 145, 51, 1) 100%);}
.elementor-button.elementor-button-link{background: #473B89; transition:all 0.4s ease-out; background:linear-gradient(90deg,rgba(71, 59, 137, 1) 0%, rgba(202, 47, 142, 1) 50%, rgba(246, 145, 51, 1) 100%) !important;}
.elementor-button.elementor-button-link:hover{color:#fff !important;}
.elementor-button.elementor-button-link svg{width:11px !important;}
.elementor-button.elementor-button-link:hover{background: #473B89; background:linear-gradient(90deg,rgba(246, 145, 51, 1) 0%, rgba(202, 47, 142, 1) 50%, rgba(71, 59, 137, 1) 100%) !important;}
.elementor-counter-number, .elementor-counter-number-suffix{  background:linear-gradient(90deg,rgba(71, 59, 137, 1) 0%, rgba(202, 47, 142, 1) 50%, rgba(246, 145, 51, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.elementor-button-icon{transform:rotate(0deg); transition:all 0.4s ease-out;}
.elementor-button:hover .elementor-button-icon{transform:rotate(45deg);}
.elfi-filter-nav{text-align:center; background:#F1B87A; border-radius: 100px;  padding:1px; }
.elfi-filter-nav ul{display:inline-block; margin:0 auto;
 overflow:hidden; background:#fff; }
.elfi-filter-nav ul li{background:#FFFCF8; margin: 0 !important;  padding: 18px 30px !important;}
.elfi-filter-nav ul li + li{border-left:1px solid #F1B87A;}
.transparent-btn .elementor-button, .transparent-btn .elementor-button:hover, .transparent-btn .elementor-button:focus {background:transparent !important; color:#F36F21 !important;}
.elfi-free-item__info{display:none !important;}
.e-n-tabs .e-n-tab-title[aria-selected="true"]{background:linear-gradient(90deg,rgba(71, 59, 137, 1) 0%, rgba(202, 47, 142, 1) 50%, rgba(246, 145, 51, 1) 100%) !important;}
.testimonial-card .testimonial-rating{margin-bottom:26px; color:#FFC107; font-size:20px;}
.testimonial-card{max-width:526px;}
.testimonial-content{color:#fff; margin-bottom:60px;}
.testimonial-footer .testimonial-user{display:flex; gap:0 28px; align-items:center;}
.testimonial-footer .testimonial-user h4{font-size:24px; color:#fff; font-weight:500;}
.testimonial-footer .testimonial-user{color:#fff;}
.testimonial-footer img{width:110px; height:110px; overflow:hidden; border-radius:50%;}
.testimonial-nav{position:absolute; right:50px; bottom:12px; width:100px;}
.testimonial-slider-wrap .swiper-button-next:hover, .testimonial-slider-wrap .swiper-button-prev:hover{background:#fff; }
.testimonial-slider-wrap .swiper-button-next:hover svg path, .testimonial-slider-wrap .swiper-button-prev:hover svg path{fill:#000;}
.testimonial-slider-wrap .swiper-button-next, .testimonial-slider-wrap  .swiper-button-prev{width:33px; height:33px; border-radius:50%; border:1px solid #fff; display:flex; align-items:center; justify-content:center;}
.testimonial-slider-wrap .swiper-button-next:after, .testimonial-slider-wrap  .swiper-button-prev:after{display:none;}


.elementor-8 .elementor-element.elementor-element-87bf1ec > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title[aria-expanded="true"]{border:0 none!important; padding-bottom:0 !important;}
.hover_six.active{border:0 none !important;}
.elfi-filter-nav{margin:0  auto 50px; display:inline-block !important;}
.elfi-filter-wrapper-d6d1973{text-align:center;}
.elfi-filter-nav ul{display:flex; padding-left:0; border-radius:50px;}
.hover_six.active{position:relative; color:#fff;}
.hover_six.active{ background:linear-gradient(90deg,rgba(71, 59, 137, 1) 0%, rgba(202, 47, 142, 1) 50%, rgba(246, 145, 51, 1) 100%) !important; border-radius:50px; content:""; }


.field-wrap{position:relative;}
.field-wrap .field-icon{position:absolute; right:23px; top:23px;}
.field-wrap input{height:70px; width:100%;}
.field-wrap textarea{height:184px; width:100%;}
.wpcf7-form-control-wrap{width:100%;}
.cf7-submit-btn{border:0 none; background:linear-gradient(90deg,rgba(71, 59, 137, 1) 0%, rgba(202, 47, 142, 1) 50%, rgba(246, 145, 51, 1) 100%) !important; transition:all 0.4s ease-out; }
.cf7-submit-btn:hover{background:linear-gradient(90deg,rgba(246, 145, 51, 1) 0%, rgba(202, 47, 142, 1) 50%, rgba(71, 59, 137, 1) 100%) !important;}
.cf7-submit-btn .btn-icon{transform:rotate(0deg); transition:all 0.4s ease-out; margin-left:6px; display:inline-block;}
.cf7-submit-btn:hover .btn-icon{transform:rotate(45deg);}
.powered-by a{font-size:14px;}
.mobile-pill-filter{display:none;}
.mobile-pill-filter .pill-selected{padding:19px 30px; text-align:center; background:linear-gradient(90deg,rgba(71, 59, 137, 1) 0%, rgba(202, 47, 142, 1) 50%, rgba(246, 145, 51, 1) 100%) !important; color:#fff; border-radius:50px;}
.mobile-pill-filter .pill-selected{position:relative; margin-bottom:20px; cursor:pointer;}
.mobile-pill-filter .pill-selected .arrow{position:absolute; right: 20px; top:50%; transform:translateY(-50%); transition:transform 0.25s ease;}
.mobile-pill-filter.active .pill-selected .arrow{transform:translateY(-50%) rotate(180deg);}
.pill-options{display:none;}
/* Dropdown panel: one solid white card so the image grid can't show through */
.pill-options{background:#fff; border:1px solid #F1B87A; border-radius:24px; padding:8px; box-shadow:0 14px 34px rgba(24,16,5,0.18); overflow:hidden;}
.pill-options .pill-option{border:0; margin:0; padding:16px 22px; border-radius:16px; color:#000; background:#fff; cursor:pointer;}
.pill-options .pill-option + .pill-option{border-top:1px solid #FBE8D2;}
.pill-options .pill-option:active, .pill-options .pill-option:hover{background:#FFF6EA;}
.mobile-pill-filter{position:relative;}
.pill-options{position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 111;
  width: 100%;}
.mobile-pill-filter.active .pill-options{display:block;}
.mobile-menu-wrap{height:100%; width:100%; display:none; transition: all 0.4s ease-out; opacity:0; visibility:hidden; z-index:-1111;}
.mobile-menu-wrap.active{opacity:1; visibility:visible; z-index:11111; display:block;}
.mobile-menu-wrap .hfe-nav-menu li{border-bottom:1px solid #4565C8;}
.mobile-menu-wrap .hfe-nav-menu li:last-child{border-bottom:0 none;}
@media (max-width:1365px){
	.elfi-filter-nav ul li{padding:18px 20px !important; font-size:16px;}
}
@media (max-width:1050px){
	.elfi-filter-nav{display:none !important;}
	.mobile-pill-filter{display:block;}
}
@media (max-width:767px){
	.footer-divider{border-top:1px solid rgba(255,255,255,0.4);}
	.footer-divider .hfe-nav-menu__layout-horizontal .hfe-nav-menu{display:block !important; text-align:center; width:100%;}
	.footer-divider .hfe-nav-menu__layout-horizontal .hfe-nav-menu li{margin-right:0; width:100%; margin:8px 0 !important; text-align:center;}
	.footer-divider .hfe-nav-menu__layout-horizontal .hfe-nav-menu li a{text-align:center; justify-content:center;}
	.e-n-tabs-heading button{width:100% !important; flex:0 0 100% !important; text-align:center;}
	.grid-item{width:calc(50% - 5px) !important;}
	.testimonial-nav{position: relative;
  right: auto;
  bottom: 12px;
  width: 100px;
  left: 0;
  margin-top: 50px;}
	.testimonial-footer .testimonial-user{gap:15px;}
	.testimonial-content{margin-bottom:30px;}
	.testimonial-footer img{width:85px; height:85px;}
	.testimonial-footer .testimonial-user h4{font-size:20px; line-height:1.4;}
}
.header-fix-row{transition:all 0.5s ease-out;}
.bg-white  .header-fix-row{background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.08); position:fixed; left:0; width:100%;}
.social-icon-footer .elementor-grid-item:last-child a{border-right-width:0 !important;}
/* ==========================================================================
   Recent Projects — 5-column grid (matches Figma)
   Overrides the ELFI addon's Isotope masonry, which cannot produce the
   fixed 2-row grid with a double-width tile that the design calls for.
   ========================================================================== */

/* Neutralise Isotope's absolute positioning + inline width:24% */
.elfi-filter-wrapper-d6d1973 .grid-init{
	display:grid !important;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:clamp(10px,1.5vw,24px);
	position:static !important;
	height:auto !important;
	width:100%;
}
.elfi-filter-wrapper-d6d1973 .grid-item{
	position:relative !important;
	left:auto !important;
	top:auto !important;
	transform:none !important;
	width:auto !important;
	margin:0 !important;
	float:none !important;
	aspect-ratio:163/157;
}
.elfi-filter-wrapper-d6d1973 .grid-item .elfi-free-item{
	position:absolute;
	inset:0;
	border-radius:16px;
	overflow:hidden;
}
.elfi-filter-wrapper-d6d1973 .grid-item .elfi-free-item__image{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform 0.5s ease;
}
/* Hover zoom on Recent Project tiles */
.elfi-filter-wrapper-d6d1973 .grid-item .elfi-free-item:hover .elfi-free-item__image{
	transform:scale(1.08);
}
/* Explicit placement — only while the "All" tab is active. When a category
   is filtered the tiles fall back to plain 1x1 auto-flow, so no holes. */
.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(1){grid-column:1;      grid-row:1;}
.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(2){grid-column:2;      grid-row:1/span 2; aspect-ratio:auto;}
.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(3){grid-column:3/span 2; grid-row:1; aspect-ratio:auto;}
.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(4){grid-column:5;      grid-row:1/span 2; aspect-ratio:auto;}
.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(5){grid-column:3;      grid-row:2;}
.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(6){grid-column:4;      grid-row:2;}
.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(7){grid-column:1;      grid-row:2;}

/* Recent Projects — responsive. The explicit cell placement above only makes
   sense on the 5-column desktop grid, so it is reset below. !important is
   required: the :has() rules outrank these on specificity. */
@media (max-width:1050px){
	.elfi-filter-wrapper-d6d1973 .grid-init{grid-template-columns:repeat(3,minmax(0,1fr));}
	.elfi-filter-wrapper-d6d1973 .grid-item{
		grid-column:auto !important;
		grid-row:auto !important;
		aspect-ratio:163/157 !important;
	}
}
@media (max-width:767px){
	.elfi-filter-wrapper-d6d1973 .grid-init{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
}

/* Mobile "All" view — staggered 2-column layout per the mobile design:
   tools + structure stacked left, river tall right, glass full-width,
   excavation + bridge pair, skyscraper full-width. !important needed to beat
   the uniform 1x1 reset in the max-1050 block above. */
@media (max-width:767px){
	.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(1){grid-column:1 !important;    grid-row:1 !important;}
	.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(2){grid-column:2 !important;    grid-row:1/span 2 !important; aspect-ratio:auto !important;}
	.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(7){grid-column:1 !important;    grid-row:2 !important;}
	.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(3){grid-column:1/-1 !important; grid-row:3 !important; aspect-ratio:2.16 !important;}
	.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(5){grid-column:1 !important;    grid-row:4 !important;}
	.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(6){grid-column:2 !important;    grid-row:4 !important;}
	.elfi-filter-wrapper-d6d1973:has(.elfi-filter-nav li.active[data-filter="*"]) .grid-item:nth-child(4){grid-column:1/-1 !important; grid-row:5 !important; aspect-ratio:1/1 !important;}
}

/* Recent Projects — container containment fix.
   .e-con-inner is a column flex container. Because Elementor sets
   .elementor-widget-container{height:100%}, the elfi widget's content size
   collapses to ~55px as a FLEX ITEM, so the section stops growing and the
   next section paints over the grid (reproducible at <=767px; the old Isotope
   layout hid this by setting an explicit inline height on .grid-init).
   display:grid takes the widget out of flex intrinsic sizing while keeping
   widget spacing byte-identical to the current flex behaviour
   (block/flow-root both shift it by 20px). No-op at >=768px. */
.elementor-element-a811c31 > .e-con-inner{
	display:grid !important;
	grid-template-columns:minmax(0,1fr) !important;
}
.elfi-free-item small.elfi-cat{display:none !important;}
.tab-filter .elfi-filter-nav{display:none !important;}