/* ------------------------
common classes and utilities
---------------------------*/

html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

main{
    display: flex;
    flex-direction: column;
}

.container{
    width: 100%;
    margin-bottom: 100px;
}

.section-title{
    text-align: center;
    background-color: #2D25A0;
    color: white;
    padding: 15px;
    font-weight: 700;
    font-size: 25px;
    line-height: 50px;
    
}

a{
    text-decoration: none;
    color: black;
}

.red-color{
    color: red;
}



/* --------------------------
    navbar design css start
-----------------------------*/

ul {
    list-style-type: none;
    padding: 20px 8%;
    overflow: hidden;
    background-color: #2D25A0;
    margin: 0;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }

/* --------------------------
    navbar design css end
-----------------------------*/



/* ------------------------ 
    top header section 
---------------------------*/

.half-width{
    padding-bottom: 30px;
}

.top-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2D25A0;
    padding: 10%;
    
}

.header-title{
    color: white;
    font-size: 64px;
    font-weight: 700px;
    line-height: 80px;
}

.button{
    width: 200px;
    height: 44px;
}


.pink-anchor-btn{
    color: white;
    background-color: #E02C6D;
    text-decoration: none;
    padding: 10px 24px;
}

.pink-anchor-btn:hover{
    box-shadow: 10px 10px 24px -13px rgba(0,0,0,0.75);
}

.banner-image img{
    width: 100%;

}



/* ------------------------ 
    all players section
------------------------ */

.player-section{
    display: flex;
    justify-content: center;
}

.all-players{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 27px;
    column-gap: 30px;
    
}

.player{
    width: 330px;
    height: 474px;
    padding: 15px;
    box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
}

.player-name{
    line-height: 40px;
    font-size: 28px;
    font-weight: 700;
}
.player-info{
    color: #6C6C6C;
    line-height: 26px;
    text-align: justify;
    
}

.player img{
    width: 100%;
}



/* ------------------------
    latest news section
------------------------ */

.latest-news{
    display: flex;
    justify-content: center;
}

.news-section{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    row-gap: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.news{
    width: 350px;
    background-color: #F5F5F6;
    border-bottom: 20px solid;
    border-image: linear-gradient(to right, #2D25A0, #3DBAFD);
    border-image-slice: 1;
    
}

.news:hover{
    box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
}

.news-detail{
    padding: 15px;
    
}

.news-detail:hover{
    opacity: .8;
}

.news-image{
    overflow: hidden;
}

.news-image img{
    width: 100%;
    height: 250px;
    transition: transform 0.5s ease-in-out;
    
}

.news:hover img{
    transform: scale(1.3);
    transition: transform 0.5s ease-in;
    opacity: .7;
   
}


/* ------------------------ 
    latest video section
------------------------- */

.all-video-section{
    margin-left: 8%;
    margin-right: 8%;
}

.all-videos{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    row-gap: 30px;
}

.video-section{
    background-color: #0C1B23;
    color: white;
    padding-bottom: 100px;
}


.video{
    border-top: 5px solid;
    border-image: linear-gradient(to right, red, rgb(221, 129, 129));
    border-image-slice: 1;
    
}

.video-detail{
    background-color: rgb(31, 53, 66);
    padding: 15px;
    color: white;
    height: 550px;
    overflow: hidden;
}


.share-btn{
    color: white;
    transition: all 0.3s ease-in-out;
}

.share-btn:hover{
    background-color: #E02C6D;
    padding: 10px 24px;
    transition: all 0.3s ease-in;
}




/* ------------------------ 
    footer section
------------------------ */

footer {
    text-align: center;
}

.icon{
    font-size: 32px;
    margin-left: 14px;
}

.icon:hover{
    color: #E02C6D;
}

.footer-logo img{
    width: 300px;
}

.footer-content{
    padding: 15px;
}



/* ############################## 
        animation section
############################## */

/* --------------------------------
    for image animation start 
---------------------------------- */

.trans-item {
    transition: 1s;
  }
  
.trans-item:hover {
    transform: rotate(360deg);
    border-radius: 10px;
    cursor: pointer;
    
  }
/* --------------------------------
    for image animation end 
---------------------------------- */





/* --------------------------------
    for card animation start
----------------------------------*/
.trans-card {
    transition: 0.4s;
  }
  
.trans-card:hover {
    transform: translateY(-1rem);
    box-shadow: 10px 10px 24px -13px rgba(0,0,0,0.75);
    border-radius: 10px;
    cursor: pointer;
  }
/* --------------------------------
    for card animation end
----------------------------------*/



/* --------------------------------------------------------------------
                    Media Queries for Mobile & Table Devices
-----------------------------------------------------------------------*/

/* Mobile Devices */
    
@media only screen and (max-width:688px){
    .container{
        width: 100%;
        
    }

    .top-header, .all-players, .news-section, .all-videos, .footer-content{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}



/* Tablet device */

@media only screen and (min-width: 668px) and (max-width:992px) {

    .container{
        width: 100%;
        
    }

    .top-header, .all-players, .news-section, .all-videos, .footer-content{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}