/* FARH, file base */
:root{
    --primaryWhite:#FBFBFB;
    --primaryBlack:#000000;
    --primaryRed: #C1121F;
    --secondaryWhite: #F1F1F1;
    --opacityWhite:rgba(251, 251, 251, 0.80);
    --opacityBlack:rgba(0, 0, 0, 0.25);
    --lighterred:#EE1C1C;
    --blackOverlay: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 13.46%, rgba(0, 0, 0, 0.56) 85.89%);
    --redOverlay: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 13.46%, rgba(193, 18, 31, 0.56) 85.89%);
    --darkerred:#581616;
    --grey:#4A5565;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Acumin Variable Concept";
    transition: all 200ms ease-in;
}
body {
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--primaryWhite);
}
@font-face {
    font-family: 'Acumin Variable Concept';
    src: url('Public/Fonts/Acumin-Variable-Concept.ttf');
    font-weight: 100 900;
    font-stretch: 35% 125%; 
    font-display: swap;
}
h1{
    color: var(--PrimaryWhite, #FBFBFB);
    text-align: right;
    font-family: "Acumin Variable Concept";
    font-size: 128px;
    font-style: normal;
    font-weight: 800;
    line-height: 80px; /* 93.75% */
    letter-spacing: 0;
    font-stretch: 55%; 
    text-transform: uppercase;
    text-align: right;
}
h2{
    font-size: 96px;
    line-height: 80px;
    font-weight: 700;
    text-transform: uppercase;
}
.h2_2{
    font-size: 58px;
    line-height: 55px;
}
h3{
    font-size: 24px;
    line-height: 94%;
}
h4{
    font-size: 20px;
}
h5{
    font-size: 16px;
}
h6{
    font-size: 14;
}
p{
    font-size: 15px;
}
.text_stretch1{
    font-stretch: 55%; 
}
.text_stretch2{
    font-stretch: 85%; 
}
.text_stretch4{
    font-stretch: 64%; 
}
.no_stretch{
    font-stretch: normal; 
}
.text_bold{
    font-weight: 700;
}
.text_medium{
    font-weight: 600;
}
.text_light{
    font-weight: 300;
}
.text_black{
    color: var(--primaryBlack);
}
.text_red{
    color: var(--primaryRed);
}
.text_white{
    color: var(--primaryWhite);
}
.text_grey{
    color: var(--grey);
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--primaryWhite);
  
}
::-webkit-scrollbar-thumb {
  background: var(--primaryRed);
  border-radius: 12px;
}
/* FARH, file base end */
/* REEM, HEADER START */
header{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 9999;
    position: fixed;
}
.header-container {
background-color: var(--opacityWhite);
backdrop-filter: blur(2.5px);
padding: 20px 40px;
font-family: "Acumin Variable Concept";
width: 100%;
box-sizing: border-box;

}

nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.logo{
    width: 65px;
    height: 65px;
}

.nav-left, .nav-right {
display: flex;
gap: 60px;
flex: 1;
}

.nav-left {
justify-content: flex-end;
padding-right: 100px;
}

.nav-right {
justify-content: flex-start;
padding-left: 100px;
}

.nav-link1 {
text-decoration: none;
color: var(--primaryRed);
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.3s ease;
white-space: nowrap;
}
.nav-link2 {
text-decoration: none;
color: var(--primaryBlack);
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.3s ease;
white-space: nowrap;
}
.nav-link2:hover {
color: var(--primaryRed);
}

.nav-link1.active {
color: var(--primaryRed);
margin-right: 20px;
}

.shield-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;

}

.shield {
width: 100px;
height: 120px;
background: white;
clip-path: polygon(50% 0%, 100% 20%, 100% 70%, 50% 100%, 0% 70%, 0% 20%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: 3px solid #333;
}

.shield-inner {
width: 50px;
height: 60px;
position: relative;
}

.crown {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 45px;
height: 20px;
}

.crown::before {
content: '';
position: absolute;
width: 8px;
height: 12px;

left: 5px;
top: 0;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.crown::after {
content: '';
position: absolute;
width: 8px;
height: 12px;

right: 5px;
top: 0;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.crown-center {
position: absolute;
width: 8px;
height: 15px;
left: 50%;
transform: translateX(-50%);
top: -3px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* REEM, end header */
/* FARH, HERO START*/
.hero{
    background: var(--primaryBlack);
    width: 100vw;
    height: calc(100vh + 100px);
    position: relative;
    overflow: hidden;
}
.hero_container{
    margin: 0 auto;
    max-width:1840px;
    position: relative;
    height: calc(100vh + 100px);
    background-image: url(Public/Images/hero\ background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}
.hero_container img{
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 2;
    object-fit: cover;
}
.fixedcontainer{
    max-width: 116px;
}
.flex_column{
    display: flex;
    flex-direction: column;
}
.hero_textblock{
    position: relative;
    padding: 0 20px;
    width: 100%;
    align-items: flex-end;
    right: 38vw;
    bottom: 100px;
}
.hero_text2{
    display: inline-flex;
    padding: 10px;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    color: var(--primaryBlack,);
    background: var(--primaryWhite);
}
/* reem */

.match-card {
            width: 360px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
           background: var(--blackOverlay);
    backdrop-filter: blur(4px);
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;

    position: absolute;
    left: 40px;
    z-index: 3;
    bottom: 102px;
        border: 0.5px solid var(--primaryWhite);
        }

        .match-header {
            padding: 15px 20px;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .player-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            position: relative;
            gap: 64px;
        }

        .player-row::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20px;
            right: 20px;
            height: 2px;
            background: linear-gradient(to right, #d32f2f 0%, #d32f2f 30%, #444 30%, #444 100%);
        }

        .player-row:last-child::after {
            display: none;
        }

        .player-info {
            flex: 1;
        }

        .player-name {
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 5px;
        }

        .player-country {
            font-size: 14px;
            color: #999;
            font-weight: 400;
        }

        .player-score {
            font-size: 42px;
            font-weight: 700;
            min-width: 85px;
            text-align: right;
              color: #999;
        }

        .player-row:first-of-type .player-score {
            color: #d32f2f;
        }

        .player-row:last-of-type .player-score {
            color: #666;
        }

        .background-image {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            opacity: 0.15;
            object-fit: cover;
            pointer-events: none;
        }

/* end */
.hero_sponsors{
    display: flex;
    width: 100%;
    padding: 16px;
    justify-content: center;
    justify-content: center;
    align-items: center;
    background-color: var(--opacityWhite);
    position: absolute;
    bottom: 0;
    z-index: 5;
    backdrop-filter: blur(6px);
}
.hero_sponsorsContainer{
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    display: flex;
}
.hero_sponsorsContainer .sponsor1{
   width: auto;
   height: 56px;
}
.hero_sponsorsContainer .sponsor2{
   width: auto;
   height: 41px;
}
.hero_sponsorsContainer .sponsor3{
   width: auto;
   height: 37px;
}
.textblock2{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    width: 249px;
    margin: 0 auto;
    padding: 22px 0;
}
.textblock2 img{
    position: absolute;
    top: -20px;
    left: 26px;
    z-index: 1;
    height: 197px;
    width: auto;
}
.textblock2 h2{
    z-index: 2;
}
.topPlayers{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 100px 20px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    background: var(--primaryWhite);
}
.playerCard{
    display: flex;
    width: 158px;
    padding-bottom: 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 0;
    gap: 14px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: var(--primaryRed);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
}
.playerCard_img{
    height: 192px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.playerCard_img img{
    height: 100%;
    width: auto;
    scale: 1;
    filter: saturate(0);
    display: flex;
    justify-content: center;
    align-items: center;
}
.playerCard_imgOverlay{
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 100%;
    top: 0;
    background: var(--blackOverlay);
    opacity: 0.8;
    transition: all 400ms ease-in-out;

}
.topPlayers_flex1{
    display: flex;
    max-width: 1400px;
    justify-content: space-between;
    gap: 34px;
    margin: 64px 0;
}
.playerCard:hover .playerCard_img .playerCard_imgOverlay{
    background: var(--redOverlay);
    opacity: 1;
}
.playerCard:hover {
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.314);
    bottom: 8px;
    /* background-color: var(--darkerred); */
}
.playerCard_text{
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    bottom: 14px;
    padding: 0 12px;
    box-sizing: border-box;
}
.playerCard_text h3{
    text-align: center;
    text-wrap: wrap;
    text-transform: uppercase;
    color: var(--secondaryWhite);
}
.playerCardRanking{
    display: inline-flex;
    padding: 8px 11px 1px 4px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: var(--secondaryWhite);
    font-size: 45px;
    font-style: italic;
    font-weight: 900;
    color: var(--primaryRed);   
    position: absolute;
    top: 0;
    line-height: 85%;
    right: 0;
    z-index: 4;
}
.playerCard:hover .playerCardRanking{
    padding: 4px 8px 0 4px;
}
/* REEM SECTION 2 START */
.background-pic-sec3{
    background-image: url(Public/Images/background\ pic\ sec\ 3\ 1.png);
    background-attachment: fixed;
    width: 100%;
    height: auto;
    padding: 50px;
}
 .container {
            max-width: 1200px;
            margin: 0 auto;
        }

       .tabs {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
    border-bottom: 2px solid #333;
}

.tab {
    color: var(--opacityWhite);
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 15px;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}

.tab:hover {
    color: var(--primaryRed);
}

.tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--primaryRed);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.tab:hover::after {
    transform: scaleX(1);
}

.tab.active {
    color: var(--primaryRed);
}

.tab.active::after {
    transform: scaleX(1);
}
        .results-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .result-card {
            background-color: var(--opacityWhite);
            padding: 25px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
    
        }

        .result-info {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .date-time {
            min-width: 140px;
        }
        .date {
            color: var(--primaryBlack);
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 5px;
        }

        .time {
            color: var(--primaryBlack);
            font-size: 14px;
            font-weight: 400;
        }

        .event-details {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .event-name {
            font-size: 24px;
            line-height: 24px; 
            letter-spacing: 0.4px;
            font-stretch: 55%;
            color: var(--primaryBlack);
        }

        .location {
            color: var(--primaryRed);
            font-size: 14px;
            font-weight: 500;
        }

        .view-btn {
            background-color: var(--primaryRed);
            color:var(--primaryWhite);
            border: none;
            padding: 12px 28px 10px 28px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            border-radius: 8px;
            transition: background-color 0.3s;
            text-transform: uppercase;
        }

        .view-btn:hover {
            background-color: var(--darkerred);
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
        }
/* REEM SECTION 2 END */
/* FARH, NEWS SECTION START */
.newsSection{
    padding: 100px 22px 50px 22px;
}
.newsCards_flex{
    display: flex;
    gap: 22px;
    margin: 62px auto;
}
.newsCard{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    overflow: hidden;
    background: var(--PrimaryWhite, #FBFBFB);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
    max-width: 310px;
    position: relative;
    bottom: 0;
}
.newsCard2{
    background: var(--secondaryWhite);
}
.newsCard:hover {
    bottom: 8px;
    box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.15), 0 2px 8px -2px rgba(0, 0, 0, 0.15);
}
.newsCard_content{
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
        flex-shrink: 0;
    align-self: stretch;
}
.newsCard img{
    height: 190px;
    width: 100%;
    object-fit: cover;
}
.newsCard_heading{
    display: flex;
        height: 30px;
    margin: 12px 0 0 0;
}
a{
    text-decoration: none;
    color: inherit;
}
.newsTag{
    border-radius: 50px;
    background: var(--primaryRed);
    color: var(--primaryWhite);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding: 2px 15px 0 15px;
    font-stretch: 70%;
    margin-bottom: 8px;
}
/* ENDOFNEWSSECTION - FARH */
/* reem sports section */
  .sports-section {
            max-width: 100%;
            margin: 0 auto;
            background-color: var(--primaryBlack);
            padding: 50px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 80px;
        }

        .header-top {
            font-family: 'Oswald', sans-serif;
            font-size: 32px;
            font-weight: 700;
            color: var(--lighterred);
            letter-spacing: 3px;
            margin-bottom: 0;
        }

        .header-bottom {
            font-family: 'Oswald', sans-serif;
            font-size: 52px;
            font-weight: 700;
            color: var(--primaryWhite);
            letter-spacing: 5px;
        }

        .disciplines-wrapper {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 0;
            max-width: 1200px;
            margin: 0 auto;
        }

        .discipline-card {
            text-align: center;
            position: relative;
            flex: 1;
            max-width: 350px;
        }

        .discipline-card:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -30px;
            top: 35px;
            width: 60px;
            height: 2px;
            background-color: var(--primaryRed);
        }

        .card-number {
            font-family: 'Oswald', sans-serif;
            font-size: 72px;
            font-weight: 700;
            color: transparent;
            letter-spacing: 2px;
            margin-bottom: 10px;
            -webkit-text-stroke: 3px var(--primaryWhite);
            text-wrap-style: 3px var(--primaryWhite);
        }

        .card-separator {
            display: none;
        }

        .discipline-title {
            font-family: 'Oswald', sans-serif;
            font-size: 38px;
            font-weight: 700;
            color: #d32f2f;
            letter-spacing: 3px;
            margin-bottom: 20px;
            text-transform: uppercase;
        }
        .discipline-text {
            font-size: 15px;
            font-weight: 400;
            color: #fff;
            line-height: 1.6;
            max-width: 320px;
            margin: 0 auto;
            width: 244px;
        }
/* end of sports section */
/* reem board members section */
         .fencer-icon {
            position: absolute;
            left: 20px;
            top: 40px;
            width: 200px;
            height: auto;
            opacity: 0.12;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 50px;
            position: relative;
        }

        .title {
            text-align: center;
            margin-bottom: 60px;
        }

        .title-board {
            font-size: 32px;
            font-weight: 700;
            color: #d32f2f;
            letter-spacing: 2px;
            margin-bottom: 0;
        }

        .title-members {
            color: var(--primaryBlack);
            text-align: center;    
            font-size: 96px;
            line-height: 80px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .members-grid {
            display: flex;
            gap: 30px;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 10px 20px 30px 20px;
            scroll-behavior: smooth;
            justify-content: center;
        }

     .illustration5{
        position: absolute;
        top: 86px;
        left: -20px;
     }

        .member-card {
            position: relative;
            width: 280px;
            flex-shrink: 0;
        }

        .member-image-container {
            position: relative;
            width: 100%;
            height: 320px;
            border-radius: 8px;
        }

        .member-image {
            width: 100%;
            height: 118%;
            object-fit: cover;
            display: block;
        }

        .member-corner {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 0;
            border-top: 70px solid transparent;
        }

        .member-info {
            padding: 60px 5px 0 5px;
        }

        .member-name {
            font-size: 19px;
            font-weight: 700;
            color: var(--primaryBlack);
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            text-transform: uppercase;
            line-height: 1.2;
                font-size: 24px;
        }

        .member-role {
            font-size: 14px;
            font-weight: 500;
            color: var(--grey);
            margin-bottom: 8px;
        }

        .member-email {
            font-size: 13px;
            color: var(--grey);
            opacity: 0.8;
            word-break: break-word;
        }
 /* end section board members, Reem */
/* section gallery reem */
 
        .media-section {
            max-width: 1200px;
            margin: 0 auto;
        }
        .section-heading {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
        }
        .heading-primary {
            font-size: 38px;
            font-weight: 700;
            color: #d32f2f;
            letter-spacing: 4px;
            margin-bottom: 0;
        }

        .heading-secondary {
            font-size: 62px;
            font-weight: 700;
            color: #000;
            letter-spacing: 5px;
        }

        .decorative-swords {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 180px;
            opacity: 0.15;
        }

        .blade-left, .blade-right {
            width: 80px;
            height: 4px;
            background: #999;
            position: relative;
        }

        .blade-left::before, .blade-right::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: #999;
            border-radius: 50%;
            top: -8px;
        }

        .blade-left {
            transform: rotate(-45deg);
        }

        .blade-left::before {
            left: -10px;
        }

        .blade-right {
            transform: rotate(45deg);
        }

        .blade-right::before {
            right: -10px;
        }

        .images-layout {
            display: flex;
            flex-wrap: wrap;
            /* grid-template-columns: repeat(2, 1fr); */
            gap: 20px;
            padding: 47px;
        }
        .image-box {
            position: relative;
            overflow: hidden;
            border-radius: 4px;
            cursor: pointer;
            width: calc(70% - 20px);
            height: 374px;
            box-sizing: border-box;
            border: 6px solid #00000000;
        }
        .image-box2{
            width: calc(30% - 20px);
        }
        .box-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: saturate(0) brightness(0.4);
            transition: all 0.3s;
        }
        .image-box:hover .box-image {
            filter: saturate(1) brightness(0.8);
            border: 6px solid var(--lighterred);
        }

        .image-label {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            max-width: 80%;
        }
/* section gallery end */
footer{
    background: url(Public/Images/footerbg.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    height: 400px;
    padding: 22px 48px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
}
.footerOverlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.footer_container{
    max-width: 1100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 0.727px solid var(--primaryRed);
    position: relative;
    z-index: 2;
}
.footerContent_Container{
    display: flex;
    width: 293px;
    padding: 27px 0;
    height: 319px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    flex-shrink: 0;
    align-self: stretch;
}
.footerContent_ulContainer{
    width: 93px;
}
.footerContent_ulContainer ul{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footerContent_Container p{
   margin-bottom: 30px;
}
.logo2horizontal{
    width: 180px;
    height: 49px;
}
.btn_2{
    padding: 8px 16px 5px 16px;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}
.footerTextIcon{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--secondaryWhite);
    font-size: 15px;
    font-weight: 400;
    font-stretch: 64%;
    line-height: 80%;
}
.footerTextIcon img{
    width: 22px;
height: 22px;
}
.footer_socialsContainer{
     margin-top: 22px;
     display: flex;
     flex-direction: column;
     gap: 12px;
}
.footer_socials{
    display: flex;
    gap: 8px;
}
.footer_socials a{
    display: flex;
    width: 34px;
    height: 34px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--primaryRed);
    position: relative;
    bottom: 0;
}
.footer_socials a img{
    width: 22px;
    height: 22px;
}
.footer_socials a:hover{
    background: var(--darkerred); 
    bottom: 3px;
}
/* page two cards section reem */
 .athletes-wrapper {
            max-width: 1400px;
            margin: 0 auto;
        }
.main2{
    padding: 80px 20px 40px 20px;
}
        .filter-tabs {
            display: flex;
            gap: 40px;
            margin-bottom: 40px;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 15px;
        }

        .filter-tab {
            color: #999;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            padding-bottom: 5px;
            transition: color 0.3s;
        }

        .filter-tab:hover {
            color: #d32f2f;
        }

        .filter-tab::after {
            content: '';
            position: absolute;
            bottom: -17px;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #d32f2f;
            transform: scaleX(0);
            transition: transform 0.3s;
        }

        .filter-tab:hover::after {
            transform: scaleX(1);
        }

        .filter-tab.active {
            color: #d32f2f;
            font-weight: 700;
        }

        .filter-tab.active::after {
            transform: scaleX(1);
        }

        .search-icon {
            margin-left: auto;
            cursor: pointer;
        }

        .search-icon svg {
            width: 24px;
            height: 24px;
            stroke: #333;
        }

        
/* end section cards page two */
/* FARH,ARRAYPAGE2 */
.topPlayers_flex2{
    flex-wrap: wrap;
    justify-content: flex-start;
}