.elementor-1261 .elementor-element.elementor-element-4cbcdb4{--display:flex;}.elementor-1261 .elementor-element.elementor-element-147b49ed{--spacer-size:50px;}.elementor-1261 .elementor-element.elementor-element-6967c0de{text-align:center;}.elementor-1261 .elementor-element.elementor-element-5d9e9809{--spacer-size:50px;width:var( --container-widget-width, 39.42% );max-width:39.42%;--container-widget-width:39.42%;--container-widget-flex-grow:0;}.elementor-1261 .elementor-element.elementor-element-5d9e9809.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1261 .elementor-element.elementor-element-20cf5b8f{width:var( --container-widget-width, 76.867% );max-width:76.867%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 159px;--container-widget-width:76.867%;--container-widget-flex-grow:0;text-align:justify;}.elementor-1261 .elementor-element.elementor-element-20cf5b8f.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1261 .elementor-element.elementor-element-7b646f0d{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--border-radius:35px 35px 35px 35px;}.elementor-1261 .elementor-element.elementor-element-5e3c4937{--display:flex;--justify-content:space-evenly;--flex-wrap:nowrap;border-style:solid;--border-style:solid;border-width:12px 12px 12px 12px;--border-top-width:12px;--border-right-width:12px;--border-bottom-width:12px;--border-left-width:12px;border-color:#009900;--border-color:#009900;--border-radius:30px 30px 30px 30px;--margin-top:0px;--margin-bottom:0px;--margin-left:259px;--margin-right:0px;}.elementor-1261 .elementor-element.elementor-element-51a8146c .elementor-button{background-color:#009900;font-size:12px;font-weight:700;border-style:solid;border-color:#009900;border-radius:50px 50px 50px 50px;padding:8px 20px 8px 20px;}.elementor-1261 .elementor-element.elementor-element-51a8146c .elementor-button:hover, .elementor-1261 .elementor-element.elementor-element-51a8146c .elementor-button:focus{background-color:#FFFFFF;color:#009900;border-color:#009900;}.elementor-1261 .elementor-element.elementor-element-51a8146c{margin:-35px -35px calc(var(--kit-widget-spacing, 0px) + -35px) -35px;z-index:10;}.elementor-1261 .elementor-element.elementor-element-51a8146c.elementor-element{--align-self:center;}.elementor-1261 .elementor-element.elementor-element-51a8146c .elementor-button:hover svg, .elementor-1261 .elementor-element.elementor-element-51a8146c .elementor-button:focus svg{fill:#009900;}.elementor-1261 .elementor-element.elementor-element-60bfa2e2{--spacer-size:20px;}.elementor-1261 .elementor-element.elementor-element-503603f0{--display:flex;--justify-content:space-evenly;--flex-wrap:nowrap;border-style:solid;--border-style:solid;border-width:12px 12px 12px 12px;--border-top-width:12px;--border-right-width:12px;--border-bottom-width:12px;--border-left-width:12px;border-color:#009900;--border-color:#009900;--border-radius:30px 30px 30px 30px;}.elementor-1261 .elementor-element.elementor-element-5a88ceaf .elementor-button{background-color:#009900;font-size:12px;font-weight:700;border-style:solid;border-color:#009900;border-radius:50px 50px 50px 50px;padding:8px 20px 8px 20px;}.elementor-1261 .elementor-element.elementor-element-5a88ceaf .elementor-button:hover, .elementor-1261 .elementor-element.elementor-element-5a88ceaf .elementor-button:focus{background-color:#FFFFFF;color:#009900;border-color:#009900;}.elementor-1261 .elementor-element.elementor-element-5a88ceaf{margin:-33px -33px calc(var(--kit-widget-spacing, 0px) + -33px) -33px;z-index:10;}.elementor-1261 .elementor-element.elementor-element-5a88ceaf.elementor-element{--align-self:center;}.elementor-1261 .elementor-element.elementor-element-5a88ceaf .elementor-button:hover svg, .elementor-1261 .elementor-element.elementor-element-5a88ceaf .elementor-button:focus svg{fill:#009900;}.elementor-1261 .elementor-element.elementor-element-a0c63fa{--spacer-size:20px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-1261 .elementor-element.elementor-element-5e3c4937{--width:60%;}.elementor-1261 .elementor-element.elementor-element-503603f0{--width:60%;}}@media(max-width:1024px){.elementor-1261 .elementor-element.elementor-element-4cbcdb4{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1261 .elementor-element.elementor-element-6967c0de{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 9px;}.elementor-1261 .elementor-element.elementor-element-20cf5b8f{width:var( --container-widget-width, 599.391px );max-width:599.391px;margin:0px 2px calc(var(--kit-widget-spacing, 0px) + 0px) 48px;--container-widget-width:599.391px;--container-widget-flex-grow:0;}.elementor-1261 .elementor-element.elementor-element-7b646f0d{--grid-auto-flow:row;}.elementor-1261 .elementor-element.elementor-element-5e3c4937{--margin-top:0px;--margin-bottom:0px;--margin-left:143px;--margin-right:0px;}.elementor-1261 .elementor-element.elementor-element-503603f0{--margin-top:0px;--margin-bottom:0px;--margin-left:21px;--margin-right:0px;}}@media(max-width:767px){.elementor-1261 .elementor-element.elementor-element-20cf5b8f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 1px;}.elementor-1261 .elementor-element.elementor-element-7b646f0d{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1261 .elementor-element.elementor-element-5e3c4937{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1261 .elementor-element.elementor-element-51a8146c{margin:-20px -20px calc(var(--kit-widget-spacing, 0px) + -20px) -20px;}.elementor-1261 .elementor-element.elementor-element-1a8bfe07{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1261 .elementor-element.elementor-element-503603f0{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1261 .elementor-element.elementor-element-5a88ceaf{margin:-20px -20px calc(var(--kit-widget-spacing, 0px) + -20px) -20px;}}/* Start custom CSS for button, class: .elementor-element-51a8146c *//* Targeted only for mobile screens */
@media (max-width: 768px) {
    
    /* 1. Set the transition for smoothness */
    .elementor-button.elementor-button-link.elementor-size-sm {
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    /* 2. The 'Active' state (When the button is touched/tapped) */
    .elementor-button.elementor-button-link.elementor-size-sm:active {
        /* Adds a subtle shadow glow to make it pop */
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
        
        /* Slightly increases brightness to simulate a light hit */
        /* This is a visual effect, not a color change */
        filter: brightness(1.1);
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5e3c4937 */<style>
/* Card Container */
.custom-card-container {
    position: relative;
    width: 300px;
    background-color: white;
    border: 10px solid #ef6a00;
    border-radius: 40px;
    padding: 40px 25px 20px 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    box-sizing: border-box;
    margin: 30px auto; /* Centers the card in the column */
    font-family: 'Arial', sans-serif;
}

/* The "More Info" Tab */
.custom-badge {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ef6a00;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 10px 30px;
    border-radius: 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Typography */
.custom-logo-title {
    font-size: 32px;
    margin: 0 0 20px 0;
    line-height: 1;
    text-align: center;
}

.custom-text-orange { color: #ef6a00; font-weight: 400; }
.custom-text-dark { color: #1a2b3c; font-weight: 700; text-transform: uppercase; }

.custom-description {
    font-size: 18px;
    color: #111;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
}

/* List Styling */
.custom-feature-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    color: #111;
    display: table; /* Helps center the list bullets */
    margin: 0 auto 20px auto;
}
.custom-feature-list li { margin-bottom: 8px; }

/* Image Styling */
.custom-image-wrapper { text-align: center; margin-top: 20px; }
.custom-product-image { max-width: 100%; height: auto; display: block; }
</style>

<div class="custom-card-container">
    <div class="custom-badge">MORE INFO</div>
    
    <div class="card-content">
        <h1 class="custom-logo-title">
            <span class="custom-text-orange">celebration</span><span class="custom-text-dark">BALL</span>
        </h1>

        <p class="custom-description">
            A unique <strong>'ONE OFF'</strong> Customised Football & Rugby ball.
        </p>

        <ul class="custom-feature-list">
            <li>Choose your template</li>
            <li>Choose your colours</li>
            <li>Add your message</li>
        </ul>

        <div class="custom-image-wrapper">
            <img src="https://i.imgur.com/example-balls.png" alt="Group of sports balls" class="custom-product-image"> 
        </div>
    </div>
</div>/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5a88ceaf *//* Targeted only for mobile screens */
@media (max-width: 768px) {
    
    /* 1. Set the transition for smoothness */
    .elementor-button.elementor-button-link.elementor-size-sm {
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    /* 2. The 'Active' state (When the button is touched/tapped) */
    .elementor-button.elementor-button-link.elementor-size-sm:active {
        /* Adds a subtle shadow glow to make it pop */
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
        
        /* Slightly increases brightness to simulate a light hit */
        /* This is a visual effect, not a color change */
        filter: brightness(1.1);
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-503603f0 */<style>
/* Card Container */
.custom-card-container {
    position: relative;
    width: 300px;
    background-color: white;
    border: 10px solid #ef6a00;
    border-radius: 40px;
    padding: 40px 25px 20px 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    box-sizing: border-box;
    margin: 30px auto; /* Centers the card in the column */
    font-family: 'Arial', sans-serif;
}

/* The "More Info" Tab */
.custom-badge {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ef6a00;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 10px 30px;
    border-radius: 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Typography */
.custom-logo-title {
    font-size: 32px;
    margin: 0 0 20px 0;
    line-height: 1;
    text-align: center;
}

.custom-text-orange { color: #ef6a00; font-weight: 400; }
.custom-text-dark { color: #1a2b3c; font-weight: 700; text-transform: uppercase; }

.custom-description {
    font-size: 18px;
    color: #111;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
}

/* List Styling */
.custom-feature-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    color: #111;
    display: table; /* Helps center the list bullets */
    margin: 0 auto 20px auto;
}
.custom-feature-list li { margin-bottom: 8px; }

/* Image Styling */
.custom-image-wrapper { text-align: center; margin-top: 20px; }
.custom-product-image { max-width: 100%; height: auto; display: block; }
</style>

<div class="custom-card-container">
    <div class="custom-badge">MORE INFO</div>
    
    <div class="card-content">
        <h1 class="custom-logo-title">
            <span class="custom-text-orange">celebration</span><span class="custom-text-dark">BALL</span>
        </h1>

        <p class="custom-description">
            A unique <strong>'ONE OFF'</strong> Customised Football & Rugby ball.
        </p>

        <ul class="custom-feature-list">
            <li>Choose your template</li>
            <li>Choose your colours</li>
            <li>Add your message</li>
        </ul>

        <div class="custom-image-wrapper">
            <img src="https://i.imgur.com/example-balls.png" alt="Group of sports balls" class="custom-product-image"> 
        </div>
    </div>
</div>/* End custom CSS */