/* ==========================================================
SPORT PEDAGOGY PREMIUM CSS
Palette:
Primary   : #A4013C
Secondary : #EFC8D5
Background: #FCEEF3
========================================================== */

:root{
  --primary:#A4013C;
  --primary-dark:#7D002E;
  --secondary:#EFC8D5;
  --light:#FCEEF3;
}

html{scroll-behavior:smooth;}
body{animation:fadePage .8s ease;}

@keyframes fadePage{
from{opacity:0;}
to{opacity:1;}
}

/* HERO */
.hero-banner{position:relative;overflow:hidden;}
.hero-banner img{transition:8s;}
.hero-banner:hover img{transform:scale(1.08);}

/* CARD */
.sp-card{
transition:.35s;
border-radius:16px;
}
.sp-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 35px rgba(164,1,60,.18);
}

/* COVER */
.sp-cover img{
transition:.4s;
border-radius:12px;
}
.sp-cover img:hover{
transform:translateY(-8px);
box-shadow:0 18px 35px rgba(164,1,60,.28);
}

/* BUTTON */
.sp-btn{
position:relative;
overflow:hidden;
display:inline-block;
animation:buttonPulse 3s infinite;
transition:.35s;
}
.sp-btn:hover{
transform:translateY(-5px);
box-shadow:0 14px 30px rgba(164,1,60,.30);
}
.sp-btn::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:45%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-25deg);
animation:shine 3s linear infinite;
}

@keyframes buttonPulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.03);}
}

@keyframes shine{
0%{left:-120%;}
100%{left:160%;}
}

/* QUICK INFO */
.sp-info{
transition:.35s;
border-radius:12px;
}
.sp-info:hover{
background:#fff;
transform:translateY(-4px);
box-shadow:0 14px 24px rgba(164,1,60,.12);
}

/* MENU */
.sp-menu a{
transition:.35s;
display:inline-block;
}
.sp-menu a:hover{
transform:translateY(-5px);
}

/* HEADINGS */
h1,h2,h3,h4{
color:var(--primary);
}

/* LINKS */
a{
transition:.3s;
}
a:hover{
color:var(--primary-dark);
}

/* IMAGES */
img{
transition:.45s;
}
img:hover{
transform:scale(1.02);
}

/* RESPONSIVE */
@media(max-width:900px){
.hero-layout{display:block!important;}
.hero-layout>div{
width:100%!important;
margin-bottom:25px;
}
.sp-cover{text-align:center!important;}
}

@media(max-width:600px){
h1{font-size:38px!important;}
h2{font-size:26px!important;}
.sp-btn{
display:block;
text-align:center;
margin-bottom:12px;
}
}






/* ==========================================================
   PREMIUM SIDEBAR MENU v5 (Compact)
========================================================== */

.sidebar-title{
    background:linear-gradient(135deg,#A4013C,#7D002E);
    color:#fff;
    font-size:18px;
    font-weight:700;
    text-align:center;
    padding:13px 16px;
    margin:0 0 14px;
    border-radius:16px;
    box-shadow:0 8px 18px rgba(164,1,60,.22);
    letter-spacing:.2px;
}

.content .gap-2{
    display:block!important;
    width:100%;
    margin:0;
    padding:0;
}

.content .gap-2 .m-menu{
    position:relative;
    display:flex!important;
    align-items:center;
    overflow:hidden;
    min-height:46px;
    padding:10px 16px!important;
    margin:0 0 9px;
    background:#fff;
    border:1px solid var(--secondary)!important;
    border-radius:10px;
    box-shadow:0 3px 10px rgba(164,1,60,.08);
    color:var(--primary)!important;
    text-decoration:none!important;
    font-size:15px;
    font-weight:600;
    line-height:1.3;
    transition:transform .25s ease,box-shadow .25s ease,color .25s ease;
    z-index:1;
}

.content .gap-2 .m-menu::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:100%;
    background:linear-gradient(90deg,#A4013C,#7D002E);
    transition:width .35s cubic-bezier(.4,0,.2,1);
    z-index:-1;
}

.content .gap-2 .m-menu:hover::before{
    width:100%;
}

.content .gap-2 .m-menu em{
    width:22px;
    min-width:22px;
    margin-right:12px;
    text-align:center;
    font-size:16px;
    color:#A4013C;
    transition:.25s;
}

.content .gap-2 .m-menu span{
    flex:1;
}

.content .gap-2 .m-menu::after{
    content:"›";
    margin-left:auto;
    font-size:20px;
    font-weight:700;
    color:#A4013C;
    transition:.25s;
}

.content .gap-2 .m-menu:hover{
    color:#fff!important;
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(164,1,60,.20);
}

.content .gap-2 .m-menu:hover em,
.content .gap-2 .m-menu:hover::after{
    color:#fff;
}

.content .gap-2 .m-menu:hover::after{
    transform:translateX(4px);
}



/* ==========================================================
   PREMIUM BUTTON SYSTEM v6
   Apply same sweep animation to all buttons
========================================================== */

.sp-btn,
.btn,
.btn-primary,
.btn-secondary,
a.sp-btn,
.hero-banner .btn,
.hero-layout .btn{
    position:relative;
    overflow:hidden;
    z-index:1;
    transition:transform .25s ease,
               box-shadow .25s ease,
               color .25s ease !important;
}

.sp-btn::before,
.btn::before,
.btn-primary::before,
.btn-secondary::before,
a.sp-btn::before,
.hero-banner .btn::before,
.hero-layout .btn::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:100%;
    background:linear-gradient(90deg,#A4013C,#7D002E);
    transition:width .35s cubic-bezier(.4,0,.2,1);
    z-index:-1;
}

.sp-btn:hover::before,
.btn:hover::before,
.btn-primary:hover::before,
.btn-secondary:hover::before,
a.sp-btn:hover::before,
.hero-banner .btn:hover::before,
.hero-layout .btn:hover::before{
    width:100%;
}

.sp-btn:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
a.sp-btn:hover,
.hero-banner .btn:hover,
.hero-layout .btn:hover{
    color:#fff !important;
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(164,1,60,.22);
}

.sp-btn:hover i,
.sp-btn:hover em,
.btn:hover i,
.btn:hover em{
    color:#fff !important;
    transition:.25s;
    transform:scale(1.08);
}

/* rounded pills used in homepage */
.hero-layout .btn,
.sp-btn{
    border-radius:999px;
}