/*
Theme Name: HOA Theme
Description: Custom HOA theme built on Hello Elementor foundation
Author: WPPoland.com Mariusz Szatkowski for houseofangular.io
Template: hello-elementor
Version: 1.0.0-393
Text Domain: hoa-theme
*/

@import url("../hello-elementor/style.css");

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --wp--style--global--content-size: 100%;
}

/* ========================================
   Container & Layout
   ======================================== */
.wp-block-group__inner-container,
.wp-block-cover__inner-container,
.wp-block-group,
.wp-block-cover {
    max-width: 100% !important;
}

.container,
.wp-container,
.elementor-container {
    max-width: 100% !important;
}

/* ========================================
   Tables
   ======================================== */
.post table thead:first-child tr:first-child th {
    border-block-start: 0;
}
.wp-block-table thead{
    border-bottom: 0;
}
.post table td, 
.post table th{
    border: 1px solid;
    border-color: #1B3146!important;
    padding: 1em;
    width: auto;
    text-align: left;
    vertical-align: top;
}
.post table td{
    background: #0F1C29;
}
.post table th{
    background: #17293C;
}

/* Table responsive wrapper */
.post table,
.wp-block-table table,
.wp-block-table,
table {
    width: 100%;
    table-layout: fixed;
    max-width: 100%;
    border-collapse: collapse;
    margin-block-end: 0;
}

/* General table styles for equal column widths */
table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .post table,
    .wp-block-table table,
    .wp-block-table,
    table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        display: block;
    }
    
    .post table td,
    .post table th,
    .wp-block-table table td,
    .wp-block-table table th,
    table td,
    table th {
        max-width: 300px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ========================================
   Third-party Plugins
   ======================================== */
#accel-snackbar {
    display: none;
}

/* Complianz Cookie Plugin */
#cmplz-cookies-overview .cmplz-dropdown, #cmplz-document .cmplz-dropdown, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown {
    background-color:#1B3146;
    padding: 1em; 
    color: #fff;
}
.cookies-per-purpose div{
    border: 1px solid #1B3146;
}
#cmplz-cookies-overview .cmplz-dropdown p, #cmplz-cookies-overview .cmplz-dropdown h4, #cmplz-cookies-overview .cmplz-dropdown ul, #cmplz-document .cmplz-dropdown p, #cmplz-document .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown ul, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h4, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown ul,
#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description, #cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data, #cmplz-document .cmplz-dropdown .cmplz-service-description, #cmplz-document .cmplz-dropdown .cmplz-sharing-data, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-service-description, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cmplz-sharing-data{
    padding: 0;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose, #cmplz-document .cmplz-dropdown .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose{
    border: 1px solid #1B3146;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header,
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .function-header, #cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose .function-header,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .retention-header, #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose .retention-header,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name-header, #cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose .name-header,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div, #cmplz-document .cmplz-dropdown .cookies-per-purpose div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose, #cmplz-document .cmplz-dropdown .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose{
    background-color: #0F1C29;
    color: #fff;
}
#cmplz-cookies-overview svg, 
#cmplz-manage-consent-container svg{
    fill: #fff;
    a::after{
        fill: #fff;
    }
}

/* ========================================
   Header & Navigation
   ======================================== */
.header {
    background: #000 !important;

    .elementor-nav-menu--main:not(.e--pointer-framed) a.elementor-item {
        position: relative;
        overflow: hidden;
    }

    .elementor-nav-menu--main:not(.e--pointer-framed) a.elementor-item:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 0;
        background: linear-gradient(to right, #e30629, #9a4cf8);
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        max-width: 75%;
        z-index: 1;
    }

    .elementor-nav-menu--main:not(.e--pointer-framed) a.elementor-item:hover:after,
    .elementor-nav-menu--main:not(.e--pointer-framed) a.elementor-item:focus:after {
        width: 75%;
    }

    #mainmenutablet a {
        background: linear-gradient(to right, #e30629, #9a4cf8);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 10px 15px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition:
            background 0.3s,
            box-shadow 0.3s;
        box-shadow: 0 2px 8px rgba(154, 76, 248, 0.15);
    }

    #mainmenu .but a, .head-menu #but a {
        @media only screen and (min-width: 1025px) {
            background: linear-gradient(to right, #e30629, #9a4cf8);
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px 15px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition:
                background 0.3s,
                box-shadow 0.3s;
            box-shadow: 0 2px 8px rgba(154, 76, 248, 0.15);
        }
        @media only screen and (max-width: 1024px) {
            display: table;
            margin: 0 auto;
        }
    }
}

.but a {
    background: linear-gradient(to right, #e30629, #9a4cf8);
    color: #fff !important;
    border: none;
    border-radius: 4px;
    padding: 15px 18px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition:
        background 0.3s,
        box-shadow 0.3s;
    box-shadow: 0 1px 4px rgba(154, 76, 248, 0.1);
}

.gradientborder.textcenter a span {
    text-align: center;
    margin: auto;
}

/* ========================================
   Hero Section
   ======================================== */
#hero {
    background-image:
        linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
        linear-gradient(90deg, #e30629 0%, #9a4cf8 100%);
    
    @media only screen and (min-width: 1025px) and (max-width: 1149px) {

        .e-con-inner {
            flex-direction: column;
            padding-top: 5em;
        }
        .hero-left{
            order: 2;
        }
        .hero-right{
            order: 1;
            min-height: 300px;
        }
        .hero-right,
        .hero-left{
            width:80%;
            align-self: flex-start;
        }
        
    }
    
    .elementor-headline-dynamic-text,
    .emphasised {
        background: #000;
        margin-bottom: -10px;
        line-height: 1.3em;
    }

    .emphasised {
        padding:0 15px 15px 15px;
    }

    .elementor-headline-dynamic-text {
        padding:0 20px 15px 15px;
    }

    .elementor-headline-dynamic-text:after,
    .emphasised:after {
        left: 0.3em;
        bottom: 12px!important;
        max-width: 68%;
    }
    .after{
        transform: translateY(-0.3em);
        display: block;

        @media only screen and (min-width: 768px) {
            transform: translateY(-0.6em);
        }
    }
    .elementor-headline-dynamic-wrapper-wrap{
        min-width: 219px;
    }

    @media only screen and (max-width: 431px) {
        .mobile {
            .elementor-headline-dynamic-wrapper-wrap{
                    transform: translate(50px, -87px);
                }
            }
            .after {
                transform: translateY(-103px);

                .emphasised {
                    transform: translate(107px, -66px)
                }
            }
            .elementor-widget-button{
                margin-top: -177px;
            }
    }

    @media only screen and (min-width: 432px) and (max-width: 562px) {
        .elementor-headline-dynamic-wrapper-wrap{
            width: 250px;
            transform: translate(50px, -87px);
        }
        .after {
            transform: translateY(-103px);

            .emphasised {
               margin-top: 10px
            }
        }
    }
    @media only screen and (min-width: 563px) and (max-width: 767px) {
        .elementor-headline-dynamic-wrapper-wrap{
            width: 250px;
            transform: translate(-226px,0);
        }
    }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .tablet{
            .elementor-headline-dynamic-wrapper-wrap{
                display: block!important;
                margin-top: -10px; 
                width: 250px;
            }
            .your{
                transform: translate(310px, -120px)
            }
            .after{
                margin-top: -74px;
                .emphasised{
                    transform: translate(371px, -95px);
                }
            }
        }
        
    }
}

.emphasised {
    position: relative;
    color: #fff;
    font-weight: 700;
    display: inline-block;
    line-height: 1.3em;
    &.small:after{
        bottom: 4px;
        left: 12px;
        height: 2px;
        width: calc(75% - 15px)!important;
    }
}

.hero .elementor-headline-dynamic-text:after,
.elementor-toc__list-item-text.elementor-item-active:after,
.emphasised:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -3px;
    height: 4px;
    left: 0;
    width: 0;
    background: linear-gradient(to right, #e30629, #9a4cf8);
    max-width: 75%;
    animation: underlineExpand 0.6s ease-out 0.3s forwards;
}

/* ========================================
   Table of Contents (TOC)
   ======================================== */
.elementor-toc__body .elementor-toc__list-item-text-wrapper:before {
    color: #ababab;
    align-self: normal;
}

.elementor-toc__list-item-text-wrapper:has(.elementor-item-active):before {
    color: #ffffff !important;
    font-weight: bold !important;
}

.elementor-toc__list-item-text-wrapper .elementor-item-active + *:before {
    color: #ffffff !important;
    font-weight: bold !important;
}

.elementor-toc__list-item-text-wrapper .elementor-item-active::before {
    color: #ffffff !important;
    font-weight: bold !important;
}

.elementor-toc__list-wrapper .elementor-toc__list-item {
    margin-bottom: 1.5em;
}

.elementor-toc__list-item-text-wrapper {
    position: relative;

    .elementor-toc__list-item-text.elementor-item-active {
        font-weight: 700;
    }

    .elementor-toc__list-item-text.elementor-item-active:after {
        left: 1.5em;
        height: 0.2em;
        bottom: -0.3em;
    }
}
.elementor-toc__header{
    padding-bottom: 0!important;
}

.elementor-toc__list-item-text.elementor-item-active:after {
    left: 1.5em;
    height: 0.2em;
    bottom: -0.3em;
    background: linear-gradient(to right, #e30629, #9a4cf8) !important;
    animation: underlineExpand 0.6s ease-out 0.3s forwards !important;
}

/* Table of Contents - Stop sticky 400px before viewport bottom */
.elementor-widget-table-of-contents {
    position: sticky !important;
    top: 100px !important;
    bottom: 470px !important;
    z-index: 10 !important;
}

/* Custom Table of Contents */
.hoa-custom-toc {
    background: #0F1C29;
    border: none;
    border-radius: 0;
    padding: 1.5rem;
    padding-bottom: 2.5rem;
    margin: 0rem 0 3em;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Sticky TOC */

.elementor-sticky--active{
    .hoa-custom-toc.hoa-toc-sticky {
        margin-top: 50px;
    }
}
.hoa-custom-toc.hoa-toc-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
}

.hoa-toc-header h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0;
    border-bottom: none;
}

.hoa-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: chapter-counter;
}

.hoa-toc-item {
    margin-bottom: 0.75rem;
    counter-increment: chapter-counter;
}

.hoa-toc-item:last-child {
    margin-bottom: 0;
}

.hoa-toc-link {
    color: #ababab;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    display: block;
    padding: 0.5rem 0 0.5rem 1.5rem;
    transition: color 0.3s ease;
    position: relative;
}

.hoa-toc-link::before {
    content: counter(chapter-counter) ".";
    display: block;
    position: absolute;
    left: 0;
    top: 0.5rem;
    font-weight: 600;
    color: #ababab;
    line-height: 1.4;
}

.hoa-toc-link:hover {
    color: #ffffff;
}

.hoa-toc-link:hover::before {
    color: #ffffff;
}

.hoa-toc-link.emphasised {
    color: #ffffff;
    font-weight: 700;
}

.hoa-toc-link.emphasised::before {
    color: #ffffff;
    font-weight: 700;
}

.hoa-toc-link.emphasised::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    height: 2px;
    width: 0;
    background: linear-gradient(to right, #e30629, #9a4cf8);
    animation: underlineExpand 0.6s ease-out 0.3s forwards;
}

/* Mobile responsive */
@media (max-width: 1024px) {
    .hoa-custom-toc {
        position: relative;
        top: auto;
        bottom: auto;
        max-height: none;
        margin: 1rem 0;
    }
}

/* ========================================
   Animations
   ======================================== */
@keyframes underlineExpand {
    0% {
        width: 0;
    }

    100% {
        width: 75%;
    }
}

.hoa-toc-link.emphasised:after {
    will-change: width;
}

.hoa-toc-link.emphasised:hover:after {
    width: 90% !important;
    max-width: 90% !important;
    transition: width 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/* ========================================
   Gallery
   ======================================== */
.gallery .gallery {
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1em;

        > :last-child:nth-child(3n+1) {
            grid-column-start: 2;
        }
    }

    img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
    }

    @media only screen and (max-width: 1024px) {
        .gallery-item {
            max-width: 100% !important;
        }
    }
}

@media only screen and (max-width: 1024px) {
    .gallery.gallery-columns-7 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1em;
    }

    .gallery.gallery-columns-7 > .gallery-item:last-child:nth-child(3n+1) {
        grid-column: 2;
        justify-self: center;
    }
}

@media only screen and (max-width: 767px) {
    .gallery.gallery-columns-7 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery.gallery-columns-7 > .gallery-item:last-child:nth-child(2n+1) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 50%;
        max-width: 50%;
    }
}

/* ========================================
   Team Members
   ======================================== */
.elementor-loop-container .type-team .e-parent{
    border-radius: 20px;

    .team-member-description{
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
}

@media (max-width: 768px) {
    .elementor-widget-reviews.references-slider .swiper-slide{
        padding-top: 0!important;
    }
    .swiper-slide > div {
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center;    
        height: 100%; 
    }
}

/* ========================================
   Testimonials & Reviews
   ======================================== */
.elementor-testimonial {
    display: flex;
    flex-direction: column;
    padding: 1em;

    .elementor-testimonial__image{
        @media (min-width: 768px) and (max-width: 1024px) {
            margin-right: 18px!important;
        }
    }

    .elementor-testimonial__image + cite {
        @media (max-width: 768px) {
            margin-inline-start: 0px!important;
        }
    }

    .elementor-testimonial__name{
        
        margin-top: 7px; 
        margin-bottom: 9px!important;

        @media (min-width: 768px) and (max-width: 1024px) {
            margin-top: 3px;
            margin-bottom: 7px!important;
        }

        @media (max-width: 768px) {
            margin-top: 10px; 
            margin-bottom: 0!important;
        }
    }

    .elementor-testimonial__header {
        order: 2;

        @media only screen and (max-width: 767px) {
            flex-direction: column;
            text-align: center;

            img {
                margin: auto;
            }
        }
    }

    .elementor-testimonial__content {
        order: 1;

        @media only screen and (max-width: 767px) {
            text-align: center;
        }
    }
}

.cky-modal{
    color: #fff!important;
}

/* ========================================
   Buttons & Gradient Borders
   ======================================== */
.gradientborder a.elementor-button {
    position: relative;
    display: inline-flex;
    border-width: 0 !important;
}

@media (max-width: 1024px) {
	.lastcentered.e-grid > .e-con.e-child:last-child {
		justify-self: center;
	}
}

@media (max-width: 1024px) {
	.lastcentered.e-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lastcentered.e-grid > .e-con.e-child {
		grid-column: auto !important;
	}

	.lastcentered.e-grid > .e-con.e-child:last-child:nth-child(2n+1) {
		grid-column: 1 / -1 !important;
		justify-self: center !important;
	}
}

@media (max-width: 767px) {
	.lastcentered.e-grid {
		grid-template-columns: 1fr;
	}
	.lastcentered.e-grid > .e-con.e-child {
		grid-column: auto !important;
		justify-self: stretch !important;
	}
}

.gradientborder-hover a:hover::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(45deg, #e30629, #9a4cf8);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.gradientborder a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(45deg, #e30629, #9a4cf8);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.gallery-icon:hover {
    background: #0a0a0a !important;
}

.accordion-applications{
    .e-n-accordion-item{
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 4px solid;
        border-color: #1B3146;
        
        &[open] {
            border-image: linear-gradient(0deg, #e30629, #9a4cf8) 1;
        }
    }

    .e-n-accordion-item-title{
        align-self: start
    }
}

.gradientborder-left {
    border: 4px solid;
    border-image: linear-gradient(0deg, #e30629, #9a4cf8) 1;
}

/* ========================================
   Text Gradients
   ======================================== */
.textgradient .elementor-heading-title,
.textgradient .elementor-counter-number-wrapper {
    background: linear-gradient(45deg, #e30629, #9a4cf8);
    background-size: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #e30629;
    display: inline-block;
}

.elementor-widget-heading .textgradient .elementor-heading-title {
    background: linear-gradient(45deg, #e30629, #9a4cf8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: #e30629 !important;
    display: inline-block !important;
}

.gradient-text {
    background: linear-gradient(45deg, #e30629, #9a4cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #e30629;
    display: inline-block;
}

.greaterthantext {
    .elementor-icon-box-title {
        margin-top: -2px;
    }
}

.circle .elementor-background-slideshow__slide__image {
    background-repeat: no-repeat;
}

.references {
    .swiper-pagination {
        bottom: -20px !important;
    }
    .swiper-pagination-bullet{
        @media only screen and (max-width: 1024px) {
            width: 20px !important;
            height: 20px !important;
        }
        @media only screen and (max-width: 767px) {
            width: 16px !important;
            height: 16px !important;
        }
    }
    .swiper-pagination-bullet-active {
        padding: 0.4em;
        background: linear-gradient(45deg, #e30629, #9a4cf8) !important;
        transform: translateY(2px);
        width: 32px !important;
        height: 32px !important;

        @media only screen and (max-width: 1024px) {
            width: 24px !important;
            height: 24px !important;
        }
        @media only screen and (max-width: 767px) {
            width: 24px !important;
            height: 24px !important;
        }
    }
}

a:focus {
    outline: none;
}

.team-member {
    .team-content {
        display: none;
    }
    .team-member-description,
    .team-image {
        display: block;
    }
}

.team-member:hover,
.team-member.active {
    height: 100%;
    .team-content {
        display: block;
    }
    .team-member-description,
    .team-image {
        display: none;
    }
}

/* ========================================
   Posts & Blog
   ======================================== */
.category-buttons span {
    padding: 4px 9px;
    background: #fff;
    color: #000;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid #dedede;
    font-weight: 700;
    margin-right: 20px;

    @media (max-width: 767px) {
            display: inline-flex;
            margin-bottom: 15px;
            padding: 7px 9px;
            margin: -5px 15px 15px 0px;
    }
    @media (min-width: 768px) and (max-width: 1024px) {
        font-size: 15px;
        padding: 6.7px 9px;
        display: inline-flex;
        margin-top: -5px;
    }
}

.elementor-post__text {
    display: flex !important;

    .elementor-post__title {
        order: 2;
    }

    .elementor-post__meta-data {
        order: 1;
    }

    .elementor-post__excerpt {
        order: 3;
    }
}

.elementor-post__meta-data {
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 767px) { 
        flex-flow: column-reverse;
        align-items: flex-start;
    }
}

#tech .elementor-post__thumbnail {
    height: 320px;
    min-height: 320px;
    background-color: #1b3146; 
    position: relative;
    overflow: hidden;
    img {
        height: 320px !important;
        width: 100% !important;
        object-fit: contain ;
        object-position: center center ;
        position: static!important; 
        transform: none!important;
        margin: 0;
    }
}

.elementor-post-reading-time {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: #fff;
    font-weight: 500;

    .reading-time-icon {
        margin-right: 5px;
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }
}

.elementor-post-author {
    display: none;
    align-items: center;
    color: #fff;
    font-weight: 500;
    margin-right: 15px;

    @media (max-width: 767px) {
        margin-right: 10px;
        margin-top: 10px;
    }
}

.elementor-post-author.is-acf-author {
    display: inline-flex;
}

.elementor-post-author-pre{
    margin-right: 5px;
}

.nomargin p {
    margin-bottom: 0 !important;
}

.case-studies {
    .elementor-post__text {
        margin-top: 0;
    }
}

.elementor-post-taxonomies {
    margin: 1em 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.taxonomy-term {
    display: inline-block;
    padding: 6px 12px;
    background-color: #ffffff;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.2;
}

.taxonomy-term.emphasised::after {
    bottom: 0.4em;
    height: 2px;
    margin-left: 9px;
    width: 55% !important;
}

.taxonomy-term:hover {
    background-color: #f8f8f8;
    transition: background-color 0.2s ease;
}

@media (max-width: 768px) {
    .taxonomy-term {
        font-size: 11px;
        padding: 5px 8px;
    }

    .elementor-post-taxonomies {
        margin: 12px 0;
        gap: 6px;
    }
}

.arrowleft::before {
    content: "";
    position: absolute;
    top: 0;
    left: -30px;
    width: 9px;
    height: 22px;
    background-image: url(/wp-content/uploads/2025/08/arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.firstarticle {

    .elementor-post__meta-data{justify-content: flex-start;}

    @media only screen and (min-width: 768px) {
        .elementor-post {
            position: relative;
            border: 3px solid red;

            .elementor-post__text {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                background: linear-gradient(to top,
                        rgba(0, 0, 0, 1) 0%,
                        rgba(0, 0, 0, 1) 5%,
                        rgba(0, 0, 0, 0) 50%);
                display: flex !important;
                justify-content: flex-end;
            }
        }
    }
}

.elementor-widget-theme-post-content {

    code,
    .wp-block-preformatted,
    .wpcf7-form {
        background-color: #17293c;
        padding: 1em;
        color: #fff;
    }

    .has-black-color {
        color: #fff !important;
    }

    .wpcf7-form {

        input,
        textarea,
        select {
            background-color: #fff;
            color: #000;
            max-width: 320px;
        }

        label,
        select {
            width: 340px;
        }

        .wpcf7-list-item {
            margin-left: 0;
        }
    }
}

.wp-block-table.is-style-stripes {
    background-color: #17293c;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wp-block-table.is-style-stripes table {
    width: 100%;
    table-layout: fixed;
    max-width: 100%;
    border-collapse: collapse;
}

.wp-block-table.is-style-stripes table td,
.wp-block-table.is-style-stripes table th {
    width: auto;
    padding: 1em;
    border: 1px solid #1B3146;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;
    vertical-align: top;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: #0f1c29;
}

.wp-block-table.is-style-stripes table.has-white-background-color,
.wp-block-table.is-style-stripes table.has-background {
    background-color: #17293c !important;
}

.wp-block-table.is-style-stripes table.has-white-background-color tbody tr:nth-child(even),
.wp-block-table.is-style-stripes table.has-background tbody tr:nth-child(even) {
    background-color: #0f1c29;
}

.wp-block-table.is-style-stripes table.has-white-background-color tbody tr:nth-child(odd),
.wp-block-table.is-style-stripes table.has-background tbody tr:nth-child(odd) {
    background-color: #17293c;
}

/* Mobile responsive styles for striped tables */
@media (max-width: 768px) {
    .wp-block-table.is-style-stripes {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        display: block;
    }
    
    .wp-block-table.is-style-stripes table {
        table-layout: fixed;
        border-collapse: collapse;
    }
    
    .wp-block-table.is-style-stripes table td,
    .wp-block-table.is-style-stripes table th {
        max-width: 300px;
        padding: 0.75em;
        font-size: 0.9em;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ========================================
   Complianz Cookie Banner
   ======================================== */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
    display: none !important;
}

.cmplz-cookiebanner.cmplz-categories-visible .cmplz-btn.cmplz-deny {
    display: block !important;
}

body:has(.cmplz-cookiebanner.cmplz-show) {
    overflow: hidden !important;
}

body:has(.cmplz-cookiebanner.cmplz-show) .cookie-overlay {
    display: flex;
}

body .cmplz-close {
    display: none !important;
}

body .cookie-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none;
}

#cmplz-manage-consent .cmplz-manage-consent {
    display: block !important;
    right: 20px !important;
}

.cmplz-cookiebanner.cmplz-show {
    z-index: 999999999;
}

.chatlio-widget {
    bottom: 20px !important;
}

/* ========================================
   WordPress Blocks
   ======================================== */
.wp-block-pullquote {
    background-color: #17293c;
    padding: 2rem;
    border-radius: 8px;
    position: relative;
    margin: 2rem 0;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    blockquote {
        margin: 0;
        padding: 3em 0 0;
        border: none;
        font-size: 24px;
        line-height: 1.6;
        position: relative;
        text-align: left;
    
        p {
            margin: 0 0 1rem 0;
            color: #fff;
            font-style: italic;
        }
        
        cite {
            color: #ababab;
            font-style: normal;
            font-size: 0.9rem;
            display: block;
            margin-top: 1rem;
        }
    }
}

.wp-block-pullquote::before {
    content: "";
    position: absolute;
    top: 1em;
    left: 1em;
    width: 48px;
    height: 48px;
    background-image: var(--quote-svg-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

p.has-background {
    margin-bottom: 0;
    margin-block-end: 0;
}

.editor-styles-wrapper .wp-block-pullquote {
    background-color: #17293c;
    padding: 2rem;
    border-radius: 8px;
    position: relative;
    margin: 2rem 0;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    body .cmplz-cookiebanner {
        left: 0;
        right: 0;
    }

    body .cmplz-message {
        width: 100%;
        text-align: center;
    }
}

.e-n-accordion-item {
    border: 1px solid #1b3146;
}

.e-n-accordion-item-title-icon {
    margin-left: auto !important;
    float: none !important;
    flex-wrap: nowrap !important;
}

/* ========================================
   Skills & Accordions
   ======================================== */
.skills-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        background: #ffffff;
        border: 1px solid #dedede;
        border-radius: 5px;
        color: #000;
        font-size: 14px;
        font-weight: 700;
        padding: 2px 10px;
        white-space: nowrap;
        transition: all 0.2s ease;

        &:hover {
            opacity: 0.8;
            transform: translateY(-1px);
        }
    }
}

.skill .elementor-icon-box-title {
    transform: translateY(-4px);
}

.roundshape {
    background-color: #1b3146;

    .elementor-heading-title {
        background-color: #1b3146;
        padding: 1em;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gallery-item .gallery-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.elementor-widget-reviews.references-slider {
    .swiper-slide {
        padding-top: 1em;
    }

    @media only screen and (max-width: 767px) {
        .elementor-testimonial__text {
            text-align: left;
        }
    }
}

.elementor-image-box-wrapper {
    display: flex;
    align-items: center;

    .elementor-image-box-img {
        margin: 0;
        padding-right: 10px;
    }

    .elementor-image-box-content {
        margin: 0;
    }
}

@keyframes fadeInDisplay {
    from {
        display: none;
    }
    to {
        display: block;
    }
}

.hover-icon-text-swap {
    p.elementor-icon-box-description {
        display: none;
    }
}

.hover-icon-text-swap:hover {
    p.elementor-icon-box-description {
        animation: fadeInDisplay 0.4s forwards;
        display: block;
    }

    .elementor-widget-image,
    .elementor-icon-box-icon {
        display: none;
    }
}


@media only screen and (max-width: 1024px) {
    .logotypes-gallery .gallery-item {
        max-width: 100%!important;
    }
    .logotypes-gallery .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr)!important;
        gap: 12px;
    }
    .logotypes-gallery .gallery > .gallery-item {
        justify-self: center;

        img{ 
            height: 170px!important;
            padding: 0!important;
        }
    }
    
    .logotypes-gallery .gallery > .gallery-item:last-child:nth-child(2n+1) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 50%;
        max-width: 50%;
    }
}

@media only screen and (max-width: 767px) {
    .logotypes-gallery .gallery {
        grid-template-columns: repeat(2, 1fr)!important;

        img{ 
            object-fit:auto!important;
        }
    }
}

/* ========================================
   Case Studies
   ======================================== */
.casestudies {
    .load-more-button {
        position: relative;
        padding: 18px 24px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 1em auto;
        display: block;
        text-align: center;
        text-decoration: none;
        border: none;
        background: transparent;
        color: #fff;
        width: 100%;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(45deg, #e30629, #9a4cf8);
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(227, 6, 41, 0.3);
        }

        &:active {
            transform: translateY(0);
        }

        &.loading {
            opacity: 0.7;
            cursor: not-allowed;
            pointer-events: none;
        }
    }

    .load-more-spinner {
        display: none;
        margin-left: 8px;
        animation: spin 1s linear infinite;
    }

    .elementor-post:nth-child(n + 5) {
        display: none !important;
    }

    &.has-loaded-more {
        .elementor-post:nth-child(n + 5) {
            display: block !important;
        }
    }
    
    .elementor-post__thumbnail {
        position: relative;
        overflow: hidden;
        
        &.elementor-fit-height {
            height: 200px;
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.elementor-widget-theme-site-logo img[src$=".svg"] {
    width: 116px !important;
    height: 50px !important;
    max-width: 116px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.post table tbody>tr:nth-child(odd)>td, 
.post table tbody>tr:nth-child(odd)>th {
    background-color: #0F1C29;
}

/* ========================================
   Code Blocks & Syntax Highlighting
   ======================================== */
code {
    background-color: #0f1c29;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    color: #e83e8c;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 0.875em;
    padding: 2px 6px;
    white-space: nowrap;
}

p code,
li code,
td code {
    background-color: #0f1c29;
    border: 1px solid #e9ecef;
    border-radius: 3px;
    color: #e83e8c;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 0.85em;
    padding: 1px 4px;
    white-space: nowrap;
}

pre {
    background-color: #0f1c29;
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 1.5rem 0;
    overflow-x: auto;
    padding: 1.5rem;
    white-space: pre;
    word-wrap: normal;
}

pre code {
    background: none;
    border: none;
    color: inherit;
    font-size: inherit;
    padding: 0;
    white-space: inherit;
}

.elementor-widget-theme-post-content code,
.elementor-widget-theme-post-content pre code {
    background: none;
    border: none;
    color: inherit;
    font-size: inherit;
    padding: 0;
    white-space: inherit;
}

.elementor-widget-theme-post-content pre {
    background-color: #0f1c29;
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 1.5rem 0;
    overflow-x: auto;
    padding: 1.5rem;
    white-space: pre;
    word-wrap: normal;
}

.elementor-widget-theme-post-content .elementor-widget-container code,
.elementor-widget-theme-post-content .elementor-widget-container pre {
    background-color: #0f1c29;
}

.elementor-widget-theme-post-content .elementor-widget-container pre code {
    background: none;
    color: inherit;
}

pre code .token.comment,
pre code .token.prolog,
pre code .token.doctype,
pre code .token.cdata,
.elementor-widget-theme-post-content pre code .token.comment,
.elementor-widget-theme-post-content pre code .token.prolog,
.elementor-widget-theme-post-content pre code .token.doctype,
.elementor-widget-theme-post-content pre code .token.cdata {
    color: #90a4ae;
}

pre code .token.punctuation,
.elementor-widget-theme-post-content pre code .token.punctuation {
    color: #b0bec5;
}

pre code .token.property,
pre code .token.tag,
pre code .token.boolean,
pre code .token.number,
pre code .token.constant,
pre code .token.symbol,
pre code .token.deleted,
.elementor-widget-theme-post-content pre code .token.property,
.elementor-widget-theme-post-content pre code .token.tag,
.elementor-widget-theme-post-content pre code .token.boolean,
.elementor-widget-theme-post-content pre code .token.number,
.elementor-widget-theme-post-content pre code .token.constant,
.elementor-widget-theme-post-content pre code .token.symbol,
.elementor-widget-theme-post-content pre code .token.deleted {
    color: #dd0031;
}

pre code .token.selector,
pre code .token.attr-name,
pre code .token.string,
pre code .token.char,
pre code .token.builtin,
pre code .token.inserted,
.elementor-widget-theme-post-content pre code .token.selector,
.elementor-widget-theme-post-content pre code .token.attr-name,
.elementor-widget-theme-post-content pre code .token.string,
.elementor-widget-theme-post-content pre code .token.char,
.elementor-widget-theme-post-content pre code .token.builtin,
.elementor-widget-theme-post-content pre code .token.inserted {
    color: #66bb6a;
}

pre code .token.operator,
pre code .token.entity,
pre code .token.url,
pre code .language-css .token.string,
pre code .style .token.string,
.elementor-widget-theme-post-content pre code .token.operator,
.elementor-widget-theme-post-content pre code .token.entity,
.elementor-widget-theme-post-content pre code .token.url,
.elementor-widget-theme-post-content pre code .language-css .token.string,
.elementor-widget-theme-post-content pre code .style .token.string {
    color: #ffca28;
}

pre code .token.atrule,
pre code .token.attr-value,
pre code .token.keyword,
.elementor-widget-theme-post-content pre code .token.atrule,
.elementor-widget-theme-post-content pre code .token.attr-value,
.elementor-widget-theme-post-content pre code .token.keyword {
    color: #42a5f5;
}

pre code .token.function,
pre code .token.class-name,
.elementor-widget-theme-post-content pre code .token.function,
.elementor-widget-theme-post-content pre code .token.class-name {
    color: #5c6bc0;
}

pre code .token.regex,
pre code .token.important,
pre code .token.variable,
.elementor-widget-theme-post-content pre code .token.regex,
.elementor-widget-theme-post-content pre code .token.important,
.elementor-widget-theme-post-content pre code .token.variable {
    color: #ffb74d;
}

pre {
    position: relative;
}

pre:hover::after {
    content: "Copy";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: #4a5568;
    color: #e2e8f0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

pre:hover::after:hover {
    opacity: 1;
}

.development-services{
    .elementor-icon-box-title{
        @media (min-width: 1025px) {
            max-width: 85%
        }
    }
}

.my-author-image {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    min-width: 100px; 
}

.my-author-name {
    font-size: 24px !important;
    color: white !important;
    font-weight: 600;
}

.my-author-bio {
    font-size: 16px !important;
    color: white !important;
    line-height: 1.5;
}

/* ========================================
   Success Banner
   ======================================== */
.hoa-success-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #EFF2F7;
    border-radius: 12px;
    padding: 40px;
    min-width: 630px;
    max-width: 90vw;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hoa-success-banner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    backdrop-filter: blur(5px);
}

.hoa-success-banner h2 {
    font-size: 32px;
    color: #000;
    margin: 0 0 20px 0;
    font-weight: 600;
}

.hoa-success-banner .separator {
    width: 100%;
    height: 1px;
    background: #E0E0E0;
    margin: 0 0 20px 0;
}

.hoa-success-banner p {
    font-size: 20px;
    color: #000;
    margin: 0;
    line-height: 1.4;
}

.hoa-success-banner .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    box-shadow: none;
}

.hoa-success-banner .close-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.hoa-success-banner.hidden {
    display: none;
}

@media (max-width: 768px) {
    .hoa-success-banner {
        min-width: 90vw;
        max-width: 90vw;
        padding: 30px 20px;
    }
    
    .hoa-success-banner h2 {
        font-size: 28px;
    }
    
    .hoa-success-banner p {
        font-size: 18px;
    }
}


/* ========================================
   Utilities & Overrides
   ======================================== */
.has-link-color {
    color: inherit !important;
}

.has-link-color a,
.has-link-color a:link,
.has-link-color a:visited {
    color: var(--wp--preset--color--link) !important;
}

.has-link-color a:hover,
.has-link-color a:focus {
    color: var(--wp--preset--color--link) !important;
    opacity: 0.8;
}

h1[style*="color:"],
h2[style*="color:"],
h3[style*="color:"],
h4[style*="color:"],
h5[style*="color:"],
h6[style*="color:"],
p[style*="color:"],
div[style*="color:"] {
    color: unset;
}

.wp-block-button .wp-block-button__link.has-text-color,
.wp-block-button .wp-block-button__link.has-text-color:link,
.wp-block-button .wp-block-button__link.has-text-color:visited,
.wp-block-button .wp-block-button__link.has-text-color:hover,
.wp-block-button .wp-block-button__link.has-text-color:focus,
.wp-block-button__link.has-text-color,
.wp-block-button__link.has-text-color:link,
.wp-block-button__link.has-text-color:visited,
.wp-block-button__link.has-text-color:hover,
.wp-block-button__link.has-text-color:focus {
    color: inherit !important;
}

.wp-block-button .wp-block-button__link.has-background,
.wp-block-button .wp-block-button__link.has-primary-gradient-gradient-background,
.wp-block-button__link.has-background,
.wp-block-button__link.has-primary-gradient-gradient-background {
    background: inherit !important;
}

.wp-block-button .wp-block-button__link.has-primary-gradient-gradient-background,
.wp-block-button__link.has-primary-gradient-gradient-background {
    background: var(--wp--preset--gradient--primary-gradient) !important;
}

.wp-block-button .wp-block-button__link.has-small-font-size,
.wp-block-button .wp-block-button__link.has-custom-font-size,
.wp-block-button__link.has-small-font-size,
.wp-block-button__link.has-custom-font-size {
    font-size: inherit !important;
}

.wp-block-button h1,
.wp-block-button h2,
.wp-block-button h3,
.wp-block-button h4,
.wp-block-button h5,
.wp-block-button h6 {
    color: inherit !important;
    font-size: inherit !important;
    margin: inherit !important;
    padding-bottom: 1em;
}

.wp-block-button__link.has-text-color * {
    color: inherit !important;
}


.single .alignwide {
    margin-inline: 0;
}

.single .thecontent hr,
.wp-block-button hr,
.editor-styles-wrapper hr {
    margin-bottom: 1em;
}

/* ========================================
   Editor Styles (Gutenberg)
   ======================================== */
.editor-styles-wrapper {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

.editor-styles-wrapper .wp-block {
    color: #FFFFFF;
    font-family: inherit;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    color: #FFFFFF !important;
    font-family: inherit;
}

.editor-styles-wrapper p {
    color: #FFFFFF;
    font-family: inherit;
}

.editor-styles-wrapper * {
    font-family: inherit;
}

.editor-styles-wrapper .wp-block-button__link {
    color: inherit !important;
    background: inherit !important;
}

.editor-styles-wrapper [style*="color:"] {
    color: unset !important;
}

.editor-styles-wrapper h1[style*="color:"],
.editor-styles-wrapper h2[style*="color:"],
.editor-styles-wrapper h3[style*="color:"],
.editor-styles-wrapper h4[style*="color:"],
.editor-styles-wrapper h5[style*="color:"],
.editor-styles-wrapper h6[style*="color:"],
.editor-styles-wrapper p[style*="color:"],
.editor-styles-wrapper div[style*="color:"],
.editor-styles-wrapper span[style*="color:"] {
    color: unset !important;
}

/* ========================================
   Featured Articles Widget
   ======================================== */
.hoa-featured-articles-widget {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.hoa-featured-article-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #17293c;
    transition: all 0.3s ease;
    border: 1px solid #1b3146;
    overflow: hidden;
}

.hoa-featured-article-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(227, 6, 41, 0.15);
}

.hoa-featured-article-image {
    width: 100%;

    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hoa-featured-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block;
    min-height: 200px;
}

.hoa-featured-article-item:hover .hoa-featured-article-image img {
    transform: scale(1.05);
}

.hoa-featured-article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.hoa-featured-article-title {
    margin: 0 0 0.5rem 0;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
}

.hoa-featured-article-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hoa-featured-article-title a:hover {
    color: #e30629;
}

.hoa-featured-article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.hoa-featured-article-author {
    display: inline-flex;
    align-items: center;
    color: #fff;
}

.hoa-featured-article-author .author-pre {
    margin-right: 0.25rem;
}

.hoa-featured-article-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.hoa-featured-article-reading-time .reading-time-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.hoa-featured-article-excerpt {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #ffffff;
}

.hoa-featured-article-excerpt p {
    margin: 0;
    color: #ffffff;
}

.hoa-no-featured-articles {
    padding: 1.5rem;
    background: #17293c;
    text-align: center;
    color: #ababab;
    font-style: italic;
}

.hoa-hidden-tablet {
    display: block;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hoa-featured-articles-widget {
        grid-template-columns: 1fr;
    }
    
    .hoa-hidden-tablet {
        display: none;
    }
}

@media (max-width: 767px) {
    .hoa-featured-articles-widget {
        grid-template-columns: 1fr;
    }
    
    .hoa-featured-article-content {
        display: flex;
        flex-direction: column;
    }
    
    .hoa-featured-article-meta {
        order: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        margin-bottom: 0.75rem;
    }
    
    .hoa-featured-article-reading-time {
        order: 1;
        color: #ffffff;
    }
    
    .hoa-featured-article-author {
        order: 2;
    }
    
    .hoa-featured-article-title {
        order: 2;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .hoa-featured-article-excerpt {
        order: 3;
    }
}

.header-banner .emphasised:after {
    bottom: -5px;
}

/* ========================================
   Gradient Border Box
   ======================================== */
.gradientborderbox {
    position: relative;
    border-radius: 12px;
    border: 0;
    background-color: #0F1C29;
}

.gradientborderbox::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, #e30629, #9a4cf8);
    border-radius: 14px;
    z-index: -1;
    pointer-events: none;
    border: 0;
}

/* ========================================
   Others
   ======================================== */
@supports selector(:has(*)) {
    body.single-jobs .elementor .elementor-element:has(> .elementor-widget-heading):has(> .elementor-widget-loop-grid .e-loop-nothing-found-message) {
        display: none !important;
    }
}