/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */
html,
body {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    overflow-x: clip;
}

.header-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

.header-menu a {
    white-space: nowrap !important;
}

.entry-title,
.page-content {
    display: none !important;
}

.hero-custom .elementor-heading-title span ,.ground-heading .elementor-heading-title span , .wait-heading .elementor-heading-title span , .group-heading .elementor-heading-title span {
    color: #FE6C4A;
    font-size: 90px;
}

.elementor .e-ddce851 {
    padding: 230px 80px 100 !important;
}

.elementor .e-ddce851 {
    position: relative;
}

.hero-custom,
.last-banner-custom {
    position: relative;
    overflow: hidden;
}


.hero-custom::before,
.last-banner-custom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            #081A33 0%,
            rgba(8, 26, 51, 0.65) 100%) !important;
    z-index: 0;
    pointer-events: none;
}

.page-id-18 .hero-custom::before {

    background: #081A33 !important;
}

.hero-custom>*,
.last-banner-custom>* {
    position: relative;
    z-index: 1;
}

.page-id-18 .elementor .stadium-collage {
    position: relative ;
    max-width: 812px ;
    aspect-ratio: 640 / 452;
    height: auto ;
    margin: 0 auto ;
    padding: 0 ;
}

.section-custom {
    width: calc(100% - 100px) ;
    max-width: 1600px ;
    margin: -135px auto 0 auto ;
    position: relative ;
    z-index: 10 ;
    background: #ffffff ;
    box-sizing: border-box ;
}


.elementor .stadium-collage {
    position: relative;
    max-width: 640px;
    aspect-ratio: 640 / 452;
    height: auto;
    margin: 0 auto;
    padding: 0;
}

.elementor .stadium-collage img {
    position: absolute;
    max-width: none;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    filter:
        drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 6px 12px rgba(8, 26, 51, 0.3));
}

.elementor .stadium-collage .stadium-img1 {
    top: 0;
    left: 0;
    width: 50.3%;
    z-index: 1;
}

.elementor .stadium-collage .stadium-img2 {
    top: 2.9%;
    left: 43%;
    width: 55.3%;
    z-index: 2;
}

.elementor .stadium-collage .stadium-img3 {
    top: 44.9%;
    left: 4.4%;
    width: 52.3%;
    z-index: 3;
}

.elementor .stadium-collage .stadium-img4 {
    top: 44.2%;
    left: 41.1%;
    width: 55%;
    z-index: 4;
}

/* About page – 7-photo collage card. */
.elementor .About-outer-div {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 620px !important;
       aspect-ratio: 368 / 298;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(8, 26, 51, 0.12);
    overflow: hidden;
}

.elementor .About-outer-div > .elementor-widget-image {
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    line-height: 0;
}

.elementor .About-outer-div > .elementor-widget-image img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Crowd – top left */
.elementor .About-outer-div .About-img1 {
    top: 0;
    left: 0;
    width: 56%;
    z-index: 2;
}

/* Pitch – top right */
.elementor .About-outer-div .About-img5 {
       top: 0;
    left: 54.5%;
    width: 45.5%;
    z-index: 1;
}

/* St Mary's – middle */
.elementor .About-outer-div .About-img4 {
   top: 23%;
    left: 52%;
    width: 29%;
    z-index: 3;
}

/* Beers – right */
.elementor .About-outer-div .About-img6 {
   top: 29%;
    left: 76%;
    width: 24%;
    z-index: 4;
}

/* Arena – bottom left */
.elementor .About-outer-div .About-img2 {
        top: 45.5%;
    left: -9%;
    width: 56%;
    z-index: 5;
}

/* Fans outside the ground – bottom middle */
.elementor .About-outer-div .About-img3 {
        top: 41%;
    left: 42.5%;
    width: 35%;
    z-index: 6;
}

/* Burger – bottom right */
.elementor .About-outer-div .About-img7 {
       top: 72.5%;
    left: 71%;
    width: 29%;
    z-index: 7;
}
/* Groundhop – phone mockups with the orange burst behind them.
   The classes are set in Elementor: ground-mob on the section,
   ground-mob-img1 / ground-mob-img2 on the phones and
   ground-mob-img3 / ground-mob-img4 on the orange shapes. */
.elementor .ground-mob {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    aspect-ratio: 421 / 460;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible;
}

/* Works whether the class sits on the image widget or on the <img>. */
.elementor .ground-mob [class*="ground-mob-img"] {
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    line-height: 0;
}

.elementor .ground-mob [class*="ground-mob-img"] img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0;
}

/* Left phone – front */
.elementor .ground-mob .ground-mob-img1 {
   top: 10%;
    left: 6%;
    width: 56%;
    z-index: 3;
}


/* Right phone */
.elementor .ground-mob .ground-mob-img2 {
    top: 22%;
    left: 30%;
    width: 61%;
    z-index: 2;
}

/* Large orange burst – sits behind the phones */
.elementor .ground-mob .ground-mob-img3 {
       top: 12%;
    left: 37%;
    width: 34%;
    z-index: 1;
}

/* Small orange sparkle – bottom left */
.elementor .ground-mob .ground-mob-img4 {
    top: 54%;
    left: 18%;
    width: 14.5%;
    z-index: 2;
}

.about-team .elementor-image-box-title span {
    color: #FE6C4A;
    font-size: 18px;
}
.about-team .elementor-image-box-title {
    display: flex;
    flex-direction: column;
}
.elementor .about-team {
    max-width: none;
    background-color: #fbf6f3;
}
.about-team .elementor-image-box-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.privacy-custom {
    box-shadow: 0px 40px 45px 0px rgba(0, 0, 0, 0.08);
}
/* Testimonials – output of the [testimonials] shortcode. */
.testimonials-grid {
    --testimonial-columns: 3;
    --testimonial-star: #F1651C;
    display: grid;
    grid-template-columns: repeat(var(--testimonial-columns), minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.testimonials-grid .testimonial-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 34px 30px 28px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(8, 26, 51, 0.06);
}

.testimonials-grid .testimonial-stars {
    display: flex;
    gap: 6px;
}

.testimonials-grid .testimonial-star {
    width: 40px;
    height: 40px;
    fill: #dfe3e8;
    flex: none;
}

.testimonials-grid .testimonial-star.is-filled {
    fill: var(--testimonial-star);
}

.testimonials-grid .testimonial-quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: #404145;
    quotes: none;
    margin-bottom: 20px;

}

.testimonials-grid .testimonial-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.testimonials-grid .testimonial-badge {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 50%;
    flex: none;
}

.testimonials-grid .testimonial-fan {
    font-size: 18px;
    color: #4a5568;
    font-weight: 500;
}

.owl-dots {
    display: none;
}

/* Contact Form 7 – the [contact-form-7] form on the Contact page. */
.custom-contact-form {
    --contact-border: #e3e6ea;
    --contact-accent: #FE6C4A;
    width: 100%;
}

.custom-contact-form .form-row {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-bottom: 16px;
}

.custom-contact-form .form-half {
    flex: 1 1 0;
    min-width: 0;
}

/* Contact Form 7 wraps every field in a <p> that adds stray spacing.
   As a flex item that <p> would shrink to its text width, so it is
   stretched to fill the row. */
.custom-contact-form p {
    flex: 1 1 auto;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form textarea {
    box-sizing: border-box;
    width: 100% !important;
    padding: 14px 18px;
    border: 1px solid var(--contact-border);
    border-radius: 8px;
    background: #ffffff;
    color: #404145;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-contact-form textarea {
    height: 170px;
    resize: vertical;
}

.custom-contact-form input::placeholder,
.custom-contact-form textarea::placeholder {
    color: #9aa1ab;
    opacity: 1;
}

.custom-contact-form input[type="text"]:focus,
.custom-contact-form input[type="email"]:focus,
.custom-contact-form textarea:focus {
    border-color: var(--contact-accent);
    box-shadow: 0 0 0 3px rgba(254, 108, 74, 0.15);
}

.custom-contact-form .form-submit {
    width: 100%;
}

.custom-contact-form .wpcf7-submit {
    display: block;
    width: 100% !important;
    padding: 15px 24px;
    border: 0;
    border-radius: 8px;
    background: var(--contact-accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease;
}

.custom-contact-form .wpcf7-submit:hover {
    background: #e85a39;
}

/* The spinner sits next to the button and would push it off-centre. */
.custom-contact-form .wpcf7-spinner {
    display: block;
    margin: 12px auto 0;
}

.wpcf7 form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
}

.custom-contact-form .wpcf7-not-valid {
    border-color: #dc3232 !important;
}

.custom-contact-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #dc3232;
}
.page-id-2730 .custom-contact-form .form-row {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-bottom: 16px;
    flex-direction: column;
}
.e-n-accordion-item-title-text {
    display: grid;
    grid-template-columns: 45px auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}

/* Logo */
.e-n-accordion-item-title-text::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 3;

    width: 40px;
    height: 40px;

    background-image: url("http://localhost/awaydays/wp-content/uploads/2026/09/Wrexham_A.F.C._Logo.svg-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.elementor-element.elementor-element-108f904.e-con.e-atomic-element.e-div-block-base.e-108f904-afaed90.hope {
    width: 30%;
}
/* Red text below Villa Park */
.e-n-accordion-item-title-text span {
    grid-column: 2;
    grid-row: 2;

    display: block;
    color: #535865;
    font-size: 17px;
}
@media (max-width: 600px) {
    .custom-contact-form .form-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* Waitlist page – the "onlist" section stays hidden until the form in the
   "contact-form" section is sent, then they swap (see assets/js/waitlist.js).
   Both stay visible inside the Elementor editor so they can still be built. */
body:not(.elementor-editor-active) .onlist:not(.is-visible) {
    display: none !important;
}

body:not(.elementor-editor-active) .contact-form.is-submitted {
    display: none !important;
}

.elementor-element.elementor-element-810e269.e-con.e-atomic-element.e-div-block-base.e-810e269-ac2dc3f.last-banner-custom {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}

.elementor-element.elementor-element-810e269.e-con.e-atomic-element.e-div-block-base.e-810e269-ac2dc3f.last-banner-custom {
    max-width: 1600px !important;
}

@media (max-width: 1024px) {
    .elementor .owl-main {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .elementor .owl-main::-webkit-scrollbar {
        display: none;
    }

    .elementor .owl-main>.owl-item {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
        scroll-snap-align: start;
    }

    .owl-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 18px;
    }

    /* Reset the theme/Elementor button styling these dots would inherit. */
    .owl-dots .owl-dot {
        -webkit-appearance: none;
        appearance: none;
        width: 9px !important;
        height: 9px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #cfd6de !important;
        box-shadow: none !important;
        line-height: 0;
        cursor: pointer;
        transition: width 0.2s ease, background 0.2s ease;
    }

    .owl-dots .owl-dot.is-active {
        width: 26px !important;
        border-radius: 999px !important;
        background: #FE6C4A !important;
    }

    /* Desktop type sizes are too wide for a single phone-width slide. */
    .elementor .owl-main .elementor-image-box-title {
        font-size: 26px;
        line-height: 1.3;
    }

    .elementor .owl-main .elementor-image-box-description {
        font-size: 17px;
        line-height: 1.5;
    }
}

.footbal-section-icon .elementor-icon-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.plan-grid-cutsom,
.plain-grid-custom-second {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) ;
    gap: 20px ;
    width: 100% ;
    max-width: 100% ;
    box-sizing: border-box ;
    align-items: stretch ;
}

/* Equal width and height for all cards */
.plan-grid-cutsom>.elementor-element,
.plain-grid-custom-second>.elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
}

/* Image box fills complete card */
.plan-grid-cutsom .elementor-image-box-wrapper,
.plain-grid-custom-second .elementor-image-box-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent text from increasing card width */
.plan-grid-cutsom .elementor-image-box-content,
.plain-grid-custom-second .elementor-image-box-content {
    width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 1680px) {
    .hero-custom .elementor-heading-title span ,.wait-heading .elementor-heading-title span , .group-heading .elementor-heading-title span{
        color: #FE6C4A;
        font-size: 80px;
    }

    .elementor-element.elementor-element-5f3fb18.e-con.e-atomic-element.e-flexbox-base.e-5f3fb18-b241740.last-flex {
        padding: 40px !important;
    }
}

@media (max-width: 1440px) {
    .section-custom {
        width: calc(100% - 80px) !important;
        margin: -126px auto 0 auto !important;
    }

}

/* 2 columns below 1280px */
@media (max-width: 1280px) {

    .plan-grid-cutsom,
    .plain-grid-custom-second {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hfe-nav-menu>li {
        margin-right: 24px !important;
    }

    .hero-custom .elementor-heading-title span ,.wait-heading .elementor-heading-title span , .group-heading .elementor-heading-title span{
        color: #FE6C4A;
        font-size: 70px;
    }

    .section-custom {
        width: calc(100% - 80px) !important;
        margin: -140px auto 0 auto !important;
    }

}

@media(max-width: 1024px) {
    .section-custom {
        width: calc(100% - 40px) !important;
        margin: -90px auto 0 auto !important;
    }

    .testimonials-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .plan-grid-cutsom,
    .plain-grid-custom-second {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .elementor .e-4f780af-85dc6af,
    .hero-mobile,
    .header-custom-second {
        display: none !important;
    }

    .header-second {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .header-second>.e-con {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body {
        overflow-x: hidden !important;
    }

    .plain-grid-custom-second .elementor-image-box-wrapper {
        display: flex !important;
        gap: 80px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Full screen menu overlay */
    .hfe-nav-menu__layout-horizontal,
    .hfe-nav-menu__layout-vertical {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;

        background: #0b203b !important;
        z-index: 999999 !important;

        overflow-y: auto !important;
    }

    /* Menu */
    ul.hfe-nav-menu {
        width: 100% !important;
        min-height: 19vh !important;
        display: flex !important;
        align-items: flex-start;
        margin: 0 !important;
        padding: 80px 30px !important;
        background: transparent !important;
        align-content: flex-start;
    }

    /* Menu items */
    ul.hfe-nav-menu>li {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Menu links */
    ul.hfe-nav-menu>li>a.hfe-menu-item {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;

        padding: 15px 20px !important;
        font-size: 24px !important;
        color: #fff !important;
    }

    /* Keep hamburger/close button above overlay */
    .hfe-nav-menu-icon {
        position: relative !important;
        z-index: 1000000 !important;
    }

    .elementor-element.elementor-element-5f3fb18.e-con.e-atomic-element.e-flexbox-base.e-5f3fb18-b241740.last-flex {
        padding: 40px !important;
    }

    .elementor-element.elementor-element-5f3fb18.e-con.e-atomic-element.e-flexbox-base.e-5f3fb18-b241740.last-flex {
        padding: 20px !important;
    }
       .page-id-18 .elementor .plain-main{

display: none;
}
}

@media(max-width: 768px) {

    .plan-grid-cutsom .elementor-image-box-content,
    .plain-grid-custom-second .elementor-image-box-content {
        width: 80% !important;
        min-width: 0 !important;
    }

    .plan-grid-cutsom figure.elementor-image-box-img {
        width: 20% !important;
    }

    .owl-item .elementor-image-box-description {
        width: 40% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-custom .elementor-heading-title span ,.wait-heading .elementor-heading-title span , .group-heading .elementor-heading-title span{
        color: #FE6C4A;
        font-size: 60px;
    }
    .about-team .elementor-image-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
    .elementor-widget-image-box .elementor-image-box-img {
        margin-inline: initial !important;
}
.elementor-element.elementor-element-108f904.e-con.e-atomic-element.e-div-block-base.e-108f904-afaed90.hope {
    width: auto;
}
}
@media(max-width: 550px) {
    .plain-grid-custom-second .elementor-image-box-wrapper {
        gap: 40px !important;
    }

}

@media(max-width: 425px) {
    .plain-grid-custom-second .elementor-image-box-wrapper {
        gap: 20px !important;
    }

    .owl-item .elementor-image-box-description {
        width: auto !important;
    }
    .page-id-18 .elementor .stadium-collage {
   
    max-width: 312px;
    }
}

@media(max-width: 329px) {
.elementor-18 .elementor-element.elementor-element-59f45e4 {
        padding: 0px 25px 0px 5px;
    }
        .elementor-18 .elementor-element.elementor-element-f84a5b1 {
        padding: 0px 20px 0px 5px;
    }
}