@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

:root{
    --primary-color-1: #17431B;
    --sec-color-2:  #B1D2A8;
    --tert-color-3:  #FFFFFF;
    --text-color:#000000;
    --hover-color:#3BBA9C;
    --primary-font: 'Raleway', sans-serif;
    --sec-font : 'Playfair Display', serif;
}
*{
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}
body{
    font-size: 18px;
    line-height: 1.4;
    font-family: var(--sec-font);
    background: var(--primary-color-1);
}
h1,h3{
   font-size: 2em;
   font-weight: bold;
}
h2{
   font-size: 1.6em;
}
h4{
   font-size: 1.1em;
}
img{
   width: auto ;
   /* max-width: 100%;   */
   height: auto;
}
.grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

/* Nav-bar-Section */
header{
  background: var(--primary-color-1);
  position: sticky;
  top: 0;
   z-index: 1;
  /*box-shadow: 1px 2px 5px rgba(0,0,0, 0.7); */
}
.nav-style{
     margin: 0px 40px;
     padding: 30px 10px;
     cursor: pointer;
}
.head-logo{
     font-size: 2em;
}
.nav-style h1 a{
    grid-column: 1/4;
    grid-row: 1;
    color: var(--tert-color-3);
    font-family: var(--sec-font);
}
.nav-style ul{
    /* display: flex;  it defaults to*!important*, causing some tw styles to sink */ 
    align-self: center;
    grid-column: 5/12;
    font-family: var(--primary-font);
    font-size: .9em;
}
.nav-style li{
    padding: 0 20px;
}
.nav-style li a{
   color: var(--tert-color-3);
}
.nav-style li a:hover{
    color: var(--hover-color);
}
.login{
    background: var(--tert-color-3);
   outline: none;
   border: none;
   border-radius: 6px;
   grid-column: 13/14;
   padding: 0px 15px;
}
.login a{
    color: var(--text-color);
    font-size: 1.2em;
    font-weight:bolder;
    font-family: var(--primary-font);
}
.login:hover{
    background: var(--hover-color);
}

.login a:hover{
  color: var(--tert-color-3);
}
/* Hero-Section */
.hero-section{
    background: var(--primary-color-1);
    /* height: 450px; */
}
.cover-image{
     grid-column: 1/4;
}
.cover-image img{
   max-width: 100%;
}
.welcome-texts{
    margin-top:50px;
    grid-column: 6/11;
}
.welcome-texts-h4{
font-size: 1.8em;
color: white;
font-family: var(--primary-font);
}
.welcome-texts-h1{
    font-size: 4em;
    font-family: var(--sec-font);
    color: white;
    font-weight: 700;  
}
.welcome-texts-p{
     font-size: 0.8em;
     color: white;
     width: 70%;
}
.n-button,.v-button{
    margin: 20px 20px 0px 0px;
    padding: 10px 20px;
    border-radius: 6px;
}
.n-button{
   background: #FFFFFF;
}
.n-button:hover{
    background: var(--sec-color-2); 
}
.n-button a{
    font-family: var(--primary-font);
    color: #000000;
    font-size: .8em;
    font-weight: 800; 
}
.n-button a:hover{
  color: white;
}
.v-button{
    background: #B1D2A8;
}
.v-button:hover{
    background: #FFFFFF;
}
.v-button a{
    font-family: var(--primary-font);
    font-size: .8em;
    font-weight: 800; 
    color: white;
}
.v-button a:hover{
     color: #000000;
}

.bball-images{
    margin-top: 20px;
    grid-column: 13/14;
}
.bball-images .ball,
.bball-images .ball-basket{
    margin: 35px;
    padding: 10px 7px 10px 18px;
}
.bball-images .ball:nth-child(2){
    border: 2px solid white;
    align-self: center;
    border-radius: 120px;
}
.bball-images .ball:hover{
    border: 2px solid white;
    align-self: center;
    border-radius: 120px;
}

/*  A-Logo Section */
.a-logo{
    height: 200px;
    background: var(--sec-color-2);
     justify-content: space-between;
}
.logo{
     padding: 20px 10px;
     align-self: center;
    
}

/* SQUA SECTION */
#squad{
    background: white;
    padding: 20px;
     align-self: center;
}
.squad-merch-h4{
    font-family: var(--primary-font);
    margin: 0 18px;
    font-size: 1.3em;
}
.squad-merch-h1{
    font-family: var(--sec-font);
    padding: 20px 0;  
    margin: 0 18px;
    font-size: 1.5em;
}
.team{
    height: 150%;
    max-width: 200%;
    padding: 0;
    margin: 0 0 0 10px;
}
.team:nth-child(1){
    grid-column: 1/5;
}
.team:nth-child(2){
    grid-column: 5/9;
}
.team:nth-child(3){
    grid-column: 9/13;
}
.team:nth-child(4){
    grid-column: 13/15;
}
.squad-button{
   grid-column: 7/11;
   margin: 30px;
   background:var(--primary-color-1);
   padding: 10px 0;
   border-radius: 6px;
   color: white;
   font-family: var(--primary-font);
}
.squad-button:hover{
    background: var(--hover-color);
    font-weight: bolder;
}

/* Merch Section */
#d-merch{
     background: var(--sec-color-2);
     padding: 40px;
     align-self: center;
}
.merch{
    background: white;
    margin: 6px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.5s;
  }  
.merch:hover{
 transform: scale(1.05);
}

.a-merch{
    grid-template-columns: repeat(5,3fr);
}
.merch-h5{
    font-size: 0.7em;
    background: var(--sec-color-2);
    padding: 6px;
    border-radius: 6px;
     float: right;
}
.merch-h4{
    font-size: 0.8em;
    font-weight: 700;
}
.merch-p{
     font-size: 0.6em;
     padding: 8px 0;
}

.squad-text{
    text-align: center;
    margin: 10px 0;
}
.flex{
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-p{
    margin: 0 8px;
    font-size: 0.7em;
    font-weight: bolder;
    font-family: var(--sec-font);
}
.flex-p:hover{
    color: var(--primary-color-1);
}
.g-flex{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}
.merch-button{
   grid-column: 3/4;
   margin: 30px;
   background:var(--primary-color-1);
   padding: 10px 0;
   border-radius: 6px;
   color: white;
   font-family: var(--primary-font);
   grid-row: 2;
}
.merch-button:hover{
    background: var(--hover-color);
    font-weight: bolder;
}

/* News-Event Section */
#news-event{
    /* height: 680px; */ 
    background: #FFFFFF;
    padding: 20px;
    margin: 0;
}
.news-event-h4{
    font-family: var(--primary-font);
    margin: 0 18px;
    font-size: 1.3em;
}
.news-event-h1{
    font-family: var(--sec-font);
    padding: 20px 0;  
    margin: 0 18px;
    font-size: 1.5em;
}
.news-event-first-sec{
    grid-column: 1/10;  
    margin: 0 18px; 
}
.news-event-second-sec{
 grid-column: 10/15;
 margin: 0 15px;
}
.advert-sec{
 display: flex;
}
.upcoming{
    margin: 10px 0;
}
.advert-text h2{
    font-size: 1.8em;
    padding: 5px 0;
     font-weight: bold;
}
.advert-text p{
    font-size: 0.9em;
    padding: 5px 0;
}
.advert-text a{
    font-size: 0.8em;
    align-self: center;
    font-weight: bolder;
}
.fas{
    align-self: center;
}
.advert-text a:hover{
    color: var(--primary-color-1);
}
.news-event-second-sec h3{
    font-size: 1.8em;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
    margin-bottom: 15px;
    font-weight: bolder;
}
.upcoming h6{
    font-size: 0.8em;
    color: var(--sec-color-2);
    padding: 5px 0;
}
.upcoming h6 span{
 padding: 0 5px;
}
.news-button,.event-button{
   /* grid-column: 1/2; */
   margin: 30px 0;
   background:var(--primary-color-1);
   padding: 10px 0;
   border-radius: 6px;
   color: white;
   font-family: var(--primary-font);
   grid-row: 2;
}
.event-button:hover{
    background: var(--hover-color);
    font-weight: bolder;
}
.news-button:hover{
    background: var(--hover-color);
    font-weight: bolder;
}
/* Blacksuqad Section */
.b-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: 400px;
}
.bs img{
    width: 269px;
    height: 269px;
}
/* .b-flex img:nth-child(5){
 width: -40%;
 height: auto;
} */
/* Contact Section*/
#contact{
    /* height: 214px; */
    background: var(--sec-color-2);
     padding: 20px;
}
.contact-h4{
     font-family: var(--primary-font);
    margin: 0 18px;
    font-size: 1.5em;
}
.contact-h1{
    font-family: var(--sec-font);
    padding: 20px 0;  
    margin: 0 18px;
    font-size: 2.5em;
}
.contact-text{
    grid-column: 1/6;
}
.contact-form{
    grid-column: 6/15;
    margin: 65px 0;
    display: flex;
    flex-direction: column;
}
form input[type = 'email']{
    width: 80%;
    padding: 10px;
    border-radius: 6px;
    outline: 0;
    background: white;
}
form input[type = 'submit']{
    padding: 10px 35px;
    border-radius: 6px;
    background: var(--primary-color-1);
    color: white;
}
form input[type = 'submit']:hover{
     background: var(--hover-color);
    font-weight: bolder;
}

/* Footer*/
#foot{
    /* height: 300px; */
    background:#FFFFFF;
    padding: 20px;
}
.f-flex{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;  
}
.f-flex img{
 margin: 10px;
}
.f-flex .icons{
  margin: 10px;
}
.icons .fab,
.icons .fas{
    padding: 0 10px;
}
.icons .fab:hover,
.icons .fas:hover{
    color: var(--primary-color-1);
}
.foot-menu{
    grid-column: 1/7;
}
.foot-menu a{
    padding: 10px;
    font-weight: bolder;
}
.foot-menu a:hover{
    color: var(--primary-color-1);
}
.foot-info{
    grid-column: 10/15;
}
#foot .grid{
    margin: 50px 0;
    font-size: 0.7em;
}


/* .list {
    @apply tw-hidden lg:tw-flex tw-flex-col lg:tw-flex-row !important;
} */