:root{
--main-color: rgb(252, 227, 9);
--black: black;
--bg: black;
--border:.1rem solid rgb(27, 60, 80);
}
*{
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: .2s linear
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}html::-webkit-scrollbar{
width: .8rem;

}html::-webkit-scrollbar-track{
background: transparent;
}html::-webkit-scrollbar-thumb{
background: white;
border-radius: 5rem;
}
body{
background: var(--bg);
}
.header{
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5 rem 7%;
border-bottom: var(--border);
position: fixed;
top:0;
left: 0;
right: 0;
z-index: 1000;
}
.header .logo img {
height: 6rem
}.header .navbar a{
margin: 0 1rem;
font-size: 1.6rem;
color:white;
}.header .navbar a:hover{
color: var(--main-color);
border-bottom: .1rem solid var(--main-color);
padding-bottom: .5rem;
}
.btn{
margin-top: 1rem;
display: inline-block;
padding: .7rem 3rem;

font-size: 2rem;
color: white;
background-color: var(--main-color);
cursor: pointer;
}
.btn:hover{
letter-spacing: .2rem;
}
.home{
min-height: 100vh;
display: flex;
align-items: center;
background: url(Images/about.jpg) no-repeat;
background-size: cover;
background-position: center;
}
section{
padding: 2rem 7%;
}
.home .content{
max-width: 60rem;
}
.home .content h3{
font-size:6rem;
text-transform: uppercase;
color: white;
}
.home .content p{
font-size:2rem;
font-weight: lighter;
line-height: 1.8;
padding: 1rem 0;
color: #dddbdb;
}
.heading {

text-align: center;
color:white;
text-transform: uppercase;
padding-bottom: 3.5rem;
font-size: 4rem;
}.heading span{
color:var(--main-color);
text-transform: uppercase;
}
.about .row{
display: flex;
align-items: center;
background: var(--black);
flex-wrap: wrap;
}.about .row .image{
flex: 1 1 45rem;
}.about .row .image img{
width: 100%;
}.about .row .content{
flex:1 1 45rem;
padding: 2rem;
}.about .row .content h3{
font-size: 3rem;
color: white;
}.about .row .content p{
font-size: 1.7rem;
color: #cecece;
padding: 1rem 0;
line-height: 1.8;
}
.club .box-container{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(30rem,1fr));
gap:2rem;
}
.clubs .box-container{

display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem,1fr));
gap: 1.5rem;
}
.clubs .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem,1fr));
gap: 1.5rem;
}.clubs .box-container .box{
border: var(--border);
}.clubs .box-container .box .image{
height: 25rem;
overflow:hidden;
width: 100%;
}.clubs .box-container .box .image img{
height: 100%;
object-fit: cover;
width: 100%;
}.clubs .box-container .box:hover .image img{
transform:scale(1.2);
}.clubs .box-container .box .content{
padding: 2rem;
}.clubs .box-container .box .content .title{
font-size: 2.5rem;
line-height: 1.5;
color: white;
}.clubs .box-container .box .content .title:hover{
color: var(--main-color);
}.clubs .box-container .box .content span{
color: var(--main-color);
display: block;
padding-top: 1rem;
font-size: 2rem;
}.clubs .box-container .box .content p{
font-size: 1.6rem;
line-height: 1.8;
color: gray;
padding: 1rem 0;
}

.events {
width: 100%;
height: 100vh;
}
.events .leftbox {
width: 50%;
height: 100%;
float: left;
padding: 2rem;
box-sizing: border-box;
}
.events .leftbox .content{
color:#fff;
background: rgba(0,0,0,.5);
padding: 5rem;
transition: .5s;
}
.events .leftbox .content:hover{
background: darkcyan;
}
.events .leftbox .content h1{
margin: 0;
padding: 0;
font-size: 4.5rem;
text-transform: uppercase;
}
.events .leftbox .content p{
margin: 2rem 0 0;
padding: 0;
font-size: 2rem;
}
.events .eventdate {
position: relative;
width: 50%;
height: 100%;
background: rgba(0,0,0,.5);

float: right;
box-sizing: border-box;
}
.events .eventdate ul{
position: absolute;
top: 50%;
transform: translateY(-50%);
margin:0;
padding: 2rem;
}
.events .eventdate ul li {
list-style: none;
background: white;
box-sizing: border-box;
height: 20rem;
}
.events .eventdate ul li .time {
position: relative;
padding: 2rem;
background: var(--main-color);
/*color: var(--main-color);*/
box-sizing: border-box;
width: 30%;
height: 100%;
float: left;
text-align: center;
transition: .5s;
}
.events .eventdate ul li:hover .time{
background: darkcyan;
}
.events .eventdate ul li .time h2{
position: absolute;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 4rem;
line-height: 2rem;

}
.events .eventdate ul li .time h2 span {
font-size: 2rem;
}
.events .eventdate ul li .details{
padding: 1.5rem;
background: #fff;
box-sizing: border-box;
width:70%;
height: 100%;
float: left;
}
.events .eventdate ul li .details h3{
position: relative;
margin: 0;
padding: 0;
font-size: 2.5rem;
}
.events .eventdate ul li .details p{
position: relative;
margin: 1rem 0 0;
padding: 0;
font-size: 1.5rem;
}
.events .eventdate ul li .details a {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
padding: .8rem .10rem;
border:2px solid #262626;
margin-top: .12rem;
font-size: 1rem;
transition: .5s;
color: black;
}
.events .eventdate ul li .details a:hover{
background:darkcyan;
color:#fff;
border-color:darkcyan;
}

.uls li {
list-style: none;
margin-bottom: 12px;
}.uls li a {
text-decoration: none;
color: white;
}.uls li a:hover{
color: var(--main-color);
border-bottom: .1rem solid var(--main-color);
padding-bottom: .5rem;
}
.social-icons .fa-brands {
width: 40px;
height: 40px;
border-radius:50%;
text-align: center;
line-height: 40px;
font-size: 20px;
color: rgb(0, 0, 0);
background: #fff;
margin-right: 15px;
cursor: pointer;
}

@media (max-width:991px){
html{
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
section{
padding: 2rem 7%;
}
}

@media (max-width:768px){
.header .navbar{
position: absolute;
top:100%;
right: 0;
background: white;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar a{
color:var(--black);
display: block;
margin: 1.5rem;
padding:.5rem;
font-size: 2rem;
}
.home{
background-position: left;
justify-content: center;
/*text-align: center;*/
}
.home .content h3{
font-size:4.5rem;
}
.home .content p{
font-size:1.5rem;
}
}
#footer{
width: 100%;
bottom: 0;
background: linear-gradient(to right, hsl(240, 18%, 3%), #052631);
color: #fff;
padding: 100px 0 30px;
/*border-top-left-radius: 125px;*/
font-size: 13px;

line-height: 20px;
}
.row{
width: 85%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
}
.col{
flex-basis: 25%;
padding: 10px;
}.col:nth-child(2),.col:nth-child(2){
flex-basis: 15%;
}
.logo{
width: 80px;
margin-bottom: 30px;
}
.col h3{
width: fit-content;
margin-bottom: 40px;
position: relative;
}
hr{
width: 90%;
border: 0;
border-bottom: 1px solid;
color: white;
margin: 20px auto;
}
.copyright{
text-align: center;
}
.underline{
width: 100%;
height: 5px;

background: #767676;
border-radius: 3px;
position: absolute;
top: 25px;
left: 0;
overflow: hidden;
}
.underline span{
width: 15px;
height: 100%;
background: white;
border-radius: 3px;
position: absolute;
top: 0;
left: 10px;
animation: moving 2s linear infinite;
}
@keyframes moving{
0%{
left: -20px;
}
100%{
left: 100%;
}
}
#meetings{
color: rgb(252, 227, 9);
}

@media(max-width: 700px){
#footer{
bottom: unset;
}
.col{
flex-basis: 100%;
}.col:nth-child(2),.col:nth-child(2){
flex-basis: 100%;
}

}
@media(max-width: 450px){
html{
font-size: 50%;
}
}