.elementor-2688 .elementor-element.elementor-element-3e93d40{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-2688 .elementor-element.elementor-element-6b83372{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-3e93d40 *//* =================================
   BASEBALL HERO FINAL CLEAN
================================= */

.baseball-hero{
position:relative;
overflow:hidden;
padding:110px 30px;
background:linear-gradient(
135deg,
#03111d 0%,
#071b2c 55%,
#111111 100%
);
isolation:isolate;
}

/* background glow */

.baseball-hero:before,
.baseball-hero:after{
content:"";
position:absolute;
width:500px;
height:500px;
border-radius:50%;
filter:blur(140px);
z-index:0;
animation:bgFloat 10s ease-in-out infinite;
}

.baseball-hero:before{
top:-150px;
left:-150px;
background:rgba(255,106,0,.10);
}

.baseball-hero:after{
right:-150px;
bottom:-150px;
background:rgba(0,132,255,.08);
animation-delay:2s;
}

.baseball-container{

position:relative;
z-index:2;

width:100%;
max-width:1500px;

margin:auto;

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:60px;
}

/* LEFT */

.baseball-content{
max-width:760px;
}

/* ===== TOP BADGE FIX ===== */

/* ===== PREMIUM BASEBALL TAG PERFECT CENTER ===== */

.small-tag{

display:flex !important;

justify-content:center !important;

align-items:center !important;

text-align:center !important;

width:100%;

max-width:1200px;

height:40px;

padding:0;

margin:0 0 35px;

box-sizing:border-box;

color:#FF6A00;

font-size:15px;

font-weight:500;

letter-spacing:12px;

line-height:88px;

text-transform:uppercase;

border-radius:999px;

border:1px solid rgba(255,106,0,.22);

background:
linear-gradient(
90deg,
rgba(255,106,0,.05),
rgba(255,255,255,.02),
rgba(255,106,0,.05)
);

box-shadow:
0 0 25px rgba(255,106,0,.06),
inset 0 0 15px rgba(255,106,0,.03);
}

/* remove inherited weird spacing */

.small-tag br{
display:none;
}

.small-tag::before,
.small-tag::after{
display:none !important;
}

@media(max-width:768px){

.small-tag{

height:60px;

line-height:60px;

font-size:11px;

letter-spacing:5px;
}

}

/* TITLE */

.baseball-content h1{

font-family:'Oswald',sans-serif;

font-size:clamp(52px,6vw,90px);

line-height:.95;

margin:0 0 25px;

font-weight:700;

color:#fff;
}

.baseball-content h1 span{

color:#FF6A00;

animation:titleGlow 3s ease-in-out infinite;
}

/* PARAGRAPH */

.baseball-content p{

font-size:20px;

line-height:1.8;

color:#c9d4df;

max-width:680px;

margin-bottom:35px;
}

/* FEATURES */

.hero-points{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-top:35px;
}

.hero-points span{

padding:14px 24px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

border-radius:50px;

color:#fff;

font-size:16px;

backdrop-filter:blur(10px);

transition:.35s;
}

.hero-points span:hover{

transform:translateY(-5px);

border-color:rgba(255,106,0,.35);

box-shadow:
0 10px 25px rgba(255,106,0,.15);
}

/* BUTTONS */

.hero-btns{

display:flex;

gap:20px;

margin-top:45px;

flex-wrap:wrap;
}

.quote-btn,
.explore-btn{

padding:18px 42px;

border-radius:60px;

text-decoration:none;

font-weight:700;

transition:.4s;

position:relative;

overflow:hidden;
}

.quote-btn{

background:linear-gradient(
135deg,
#FF6A00,
#ff8f35
);

color:#fff;

box-shadow:
0 15px 35px rgba(255,106,0,.25);
}

.quote-btn:hover{

transform:translateY(-6px);

box-shadow:
0 20px 45px rgba(255,106,0,.35);
}

.explore-btn{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.10);

color:#fff;

backdrop-filter:blur(15px);
}

.explore-btn:hover{

transform:translateY(-6px);

border-color:#FF6A00;
}

/* shine */

.quote-btn:before,
.explore-btn:before{

content:"";

position:absolute;

top:0;
left:-120%;

width:70px;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.3),
transparent
);

transform:skewX(-20deg);
}

.quote-btn:hover:before,
.explore-btn:hover:before{

animation:shine .8s forwards;
}

/* IMAGE */

.baseball-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;
}

.baseball-image:before{

content:"";

position:absolute;

width:450px;
height:450px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,106,0,.15),
transparent 70%
);

filter:blur(60px);

z-index:-1;

animation:pulse 4s infinite;
}

.baseball-image img{

max-width:95%;

height:auto;

display:block;

filter:
drop-shadow(0 25px 50px rgba(0,0,0,.45));

animation:imageFloat 5s ease-in-out infinite;
}

/* ANIMATIONS */

@keyframes imageFloat{

0%,100%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}
}

@keyframes bgFloat{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-40px);
}
}

@keyframes titleGlow{

0%,100%{
text-shadow:0 0 15px rgba(255,106,0,.20);
}

50%{
text-shadow:
0 0 35px rgba(255,106,0,.55);
}
}

@keyframes tagGlow{

0%,100%{
box-shadow:
0 0 20px rgba(255,106,0,.05);
}

50%{
box-shadow:
0 0 35px rgba(255,106,0,.18);
}
}

@keyframes pulse{

0%,100%{
transform:scale(1);
opacity:.5;
}

50%{
transform:scale(1.08);
opacity:1;
}
}

@keyframes shine{
100%{
left:150%;
}
}

/* MOBILE */

@media(max-width:991px){

.baseball-container{

grid-template-columns:1fr;

text-align:center;

gap:60px;
}

.baseball-content{
max-width:100%;
}

.small-tag{

height:58px;

font-size:11px;

letter-spacing:5px;

padding:0 15px;
}

.baseball-content h1{
font-size:54px;
}

.hero-points{

justify-content:center;
}

.hero-btns{

justify-content:center;
}

.baseball-image img{
max-width:85%;
}

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b83372 */<section class="baseball-products">

<div class="products-container">

<div class="section-head">

<span>BASEBALL COLLECTION</span>

<h2>Featured Baseball Products</h2>

<p>
Premium baseball teamwear designed for performance,
comfort and professional team identity.
</p>

</div>


<div class="products-grid">


<a href="#" class="product-card">
<img src="YOUR-JERSEY-PNG.png">
<h3>Baseball Jerseys</h3>
</a>


<a href="#" class="product-card">
<img src="YOUR-HOODIE-PNG.png">
<h3>Baseball Hoodies</h3>
</a>


<a href="#" class="product-card">
<img src="YOUR-SHORTS-PNG.png">
<h3>Baseball Shorts</h3>
</a>


<a href="#" class="product-card">
<img src="YOUR-PANTS-PNG.png">
<h3>Baseball Pants</h3>
</a>


<a href="#" class="product-card">
<img src="YOUR-GLOVES-PNG.png">
<h3>Batting Gloves</h3>
</a>


<a href="#" class="product-card">
<img src="YOUR-COMPRESSION-PNG.png">
<h3>Compression Wear</h3>
</a>


<a href="#" class="product-card">
<img src="YOUR-BACKPACK-PNG.png">
<h3>Team Backpacks</h3>
</a>


<a href="#" class="product-card">
<img src="YOUR-CAP-PNG.png">
<h3>Caps</h3>
</a>


</div>
</div>
</section>


<style>

/*=========================
BASEBALL PRODUCTS
=========================*/

.baseball-products{

position:relative;
padding:110px 20px;

background:
linear-gradient(
180deg,
#04111d,
#071b2c,
#111
);

overflow:hidden;
}


/* glow background */

.baseball-products:before{

content:"";

position:absolute;

width:500px;
height:500px;

right:-150px;
top:-120px;

border-radius:50%;

background:
rgba(255,106,0,.06);

filter:blur(120px);

animation:
glowMove 8s ease-in-out infinite;
}


/* container */

.products-container{

width:1200px;
max-width:1800px;

margin:0 auto;

position:relative;
z-index:2;
}


/* heading */

.section-head{

text-align:center;

margin-bottom:70px;

opacity:0;

animation:
fadeUp .8s ease forwards;
}

.section-head span{

display:block;

color:#ff6a00;

font-size:13px;

letter-spacing:5px;

margin-bottom:15px;
}

.section-head h2{

font-size:58px;

font-family:'Oswald',sans-serif;

color:#fff;

margin:0 0 20px;
}

.section-head p{

max-width:700px;

margin:auto;

color:#b8c3cf;

font-size:19px;

line-height:1.8;
}


/* grid */

.products-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;
}


/* card */

.product-card{

position:relative;

padding:35px;

border-radius:30px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(16px);

overflow:hidden;

text-decoration:none;

text-align:center;

transition:.45s;

opacity:0;

animation:
fadeUp .8s ease forwards;
}


/* stagger animation */

.product-card:nth-child(1){animation-delay:.1s}
.product-card:nth-child(2){animation-delay:.2s}
.product-card:nth-child(3){animation-delay:.3s}
.product-card:nth-child(4){animation-delay:.4s}
.product-card:nth-child(5){animation-delay:.5s}
.product-card:nth-child(6){animation-delay:.6s}
.product-card:nth-child(7){animation-delay:.7s}
.product-card:nth-child(8){animation-delay:.8s}


/* hover overlay */

.product-card:before{

content:"";

position:absolute;

inset:0;

opacity:0;

background:
linear-gradient(
180deg,
transparent,
rgba(255,106,0,.10)
);

transition:.4s;
}

.product-card:hover:before{

opacity:1;
}


/* card hover */

.product-card:hover{

transform:
translateY(-12px);

border-color:
rgba(255,106,0,.30);

box-shadow:
0 25px 50px rgba(0,0,0,.35);

}


/* images */

.product-card img{

width:100%;

height:220px;

object-fit:contain;

margin-bottom:25px;

position:relative;

z-index:2;

filter:
drop-shadow(
0 20px 30px rgba(0,0,0,.45)
);

animation:
floatItem 5s ease-in-out infinite;

transition:.45s;
}

.product-card:hover img{

transform:
scale(1.08);
}


/* title */

.product-card h3{

color:#fff;

font-size:24px;

margin:0;

position:relative;

z-index:2;

transition:.35s;
}

.product-card:hover h3{

color:#ff6a00;
}


/* animations */

@keyframes floatItem{

0%,100%{

transform:
translateY(0px);
}

50%{

transform:
translateY(-10px);
}
}


@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(50px);

}

to{

opacity:1;

transform:none;
}
}


@keyframes glowMove{

0%,100%{

transform:
translateY(0);
}

50%{

transform:
translateY(50px);
}
}



/* tablet */

@media(max-width:991px){

.products-grid{

grid-template-columns:
repeat(2,1fr);

}

}


/* mobile */

@media(max-width:768px){

.baseball-products{

padding:80px 20px;
}

.section-head h2{

font-size:40px;
}

.products-grid{

grid-template-columns:1fr;

gap:25px;
}

.product-card img{

height:180px;
}

}

</style>/* End custom CSS */