/* Utilities classes  */
  /* .red-bor {
    border: 2px solid red;
  }
  .green-bor {
    border: 2px solid green;
  }
  .black-bor {
    border: 2px solid black;
  }
  .blue-bor {
    border: 2px solid blue;
  } */

/* Body CSS  */



/* New Logo Modification are here*/

.new-logo-name{
  display: inline-block;
}

.new-logo-name h3{
  line-height: 4px;
 
}

body{
  font-family: 'Montserrat', sans-serif;
}


/* CSS Variables  */
:root{
  --theme-colour: rgba(107,228,223,255);
  --text-colour: #ffffff;
  --logo-colour: #ef674e;
  --normal-para-size: 18px;
  --category-para-size: 12px;
}

/* Navbar CSS Starts here  */

#nav{
  
  color: white;
  background-color: var(--theme-colour);
}

/* CSS of logo part  in Navbar */
#logo{
  font-size: 25px;
  
}

#logo img{
  padding: 8px;
  height: 60px;
  width: 60px;
}



/* CSS of Menu Part  */


#menu{
  display: flex;
  align-items: center;
  justify-content: end;
}

@media  (max-width: 768px){
  #menu{
    justify-content: center;
  }
}


#menu ul{
  list-style: none;
  
  margin-bottom: 0;
  height: 30px;
}

#menu li{
  display: inline-block;

}

a{
  text-decoration: none;
  color: black;
  padding: 2px 3px;
  border-radius: 7px;
  
}

#menu a:hover, .active{
  background-color: white;
  
}


#menu a{
  margin: 0 15px;
  font-size: 17px;
}



/* Media-Query of nav  */
@media  (max-width: 992px){
  #menu a{
    margin: 0 10px;
    font-size: 15px;
    
  }
}

@media  (max-width: 768px){
  #nav{
    text-align: center;
  }
  #menu ul{
    float: none;
    padding: 0;
  }

  #logo{
    font-size: 23px;
    
  }
}


@media  (max-width: 576px){
  
  #logo{
    font-size: 20px;
  }
  #menu a{
    margin: 0 5px;
    font-size: 13px;
  }

}

@media  (max-width: 311px){
  #logo{
    font-size: 15px;
  }
  #menu a{
    margin: 0 5px;
    font-size: 9px;
  }
}


/* Revolution CSS Starts Here  */
.bg{
  background: rgba(107,228,223,255);  /* fallback for old browsers */
  background: linear-gradient(0deg, rgba(107,228,223,255), rgba(230,230,228,255));

  /* height: 100vh; */
}


.revolution .logo{
  max-width: 100px;
  max-height: 100px;

  /* margin: 80px 60px; */
}

.revolution .new-logo-name h3{
  letter-spacing: 8px; 
  color: var(--logo-colour);
}
.revolution .new-logo-name h2{
  /* letter-spacing: 8px;  */
  color: #104370;
}



.revolution .text{
  margin-top: 100px;
}
.revolution .text p{
 
  font-size: 45px;
  line-height: 40px;
}

.revolution .special{
  font-weight: bold;
}


.revolution button{
 padding: 8px 20px;
 border: none;
 border-radius: 15px;
 margin: 5px 35px 5px 0;
 font-size: 18px;
}

.revolution .active{
  background-color: white;
}
.revolution .inactive{
  background-color: #b5eaec;
}

/* Sports in Minds CSS */
.minds{
  background: rgba(107,228,223,255);  /* fallback for old browsers */
  background: linear-gradient(180deg, rgba(107,228,223,255), rgba(230,230,228,255));

  /* height: 100vh; */
  
}

.minds .content h2{
  /* font-weight: lighter; */
  
}

.round{
  border-top-right-radius: 50px;
}

/* Card CSS  */

.cards {
  /* border: 2px solid red; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: fit-content;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border: 2px solid black; */
  /* width: 350px;
  height: 350px;
  margin: 20px; */
  /* border-radius: 20px; */
  /* background-color: #dbd8d8; */
  max-width: 280px;
  margin: 15px;
  background-color: #ffffff;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
}

.card a{
  color: black;
  text-align: center;
}

.card img{
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
}


/* HR CSS  */
/* hr {
  margin: 0;
  color: black;
  border: 0;
  border-top: 2px solid;
  opacity: .25;
} */

/* MediaQueries  */

@media  (max-width: 1600px){
  .revolution .logo-name{
    margin: 0 -90px;
  }
}
@media  (max-width: 1200px){
  .revolution .logo-name{
    margin: 0 -50px;
  }

  .revolution button{
    padding: 3px 17px;
    font-size: 20px;
   }
}
@media  (max-width: 992px){
  .revolution .logo-name{
    margin: 0 -30px;
  }
  .revolution button{
    padding: 3px 17px;
    font-size: 15px;
}
.revolution .text{
  margin-top: 80px;
}

.revolution .text p{
  font-size: 35px;
  line-height: 30px;
}
}

@media  (max-width: 768px){
  .revolution .logo-name{
    margin: 0 -120px;
  }

  .revolution .text{
    margin-top: 70px;
  }

  .revolution .logo{
    max-width: 70px;
    max-height: 70px;
}
}

@media  (max-width: 576px){
  .revolution .logo-name{
    margin: 0 -60px;
  }

  .revolution .text{
    margin-top: 50px;
  }
  

}

@media  (max-width: 400px){
  .revolution .logo-name{
    margin: 0 -20px;
  }

  .revolution .text p{
    font-size: 30px;
    line-height: 25px;
  }

  .revolution button{
    margin-right: 5px;
    padding: 3px 17px;
    font-size: 15px;
}
}

/* Footer Css  */
#footer {
  color: black;
  background-color: rgba(107,228,223,255);
}

#footer img {
  /* max-height: 60px; */
  /* max-width: 80px; */
  margin:  0;
}

.footer-left p {
  font-size: var(--normal-para-size);
}

.footer-mid p {
  font-size: 15px;
}

.footer-right p {
  font-size: 15px;
  margin-bottom: 8px;
}

/* # Footer MediaQuieries  */
@media (max-width: 992px) {
  /* #footer img {
    max-height: 130px;
    max-height: 130px;
  } */
}

@media (max-width: 768px) {
  /* #footer img {
    max-height: 150px;

  } */
}



@media (max-width: 311px) {
  /* #footer img {
    max-height: 50px;
    
  } */
 
}

/* Social Icon CSS  */
#social-icons .box {
  margin-right: 15px;
}

#social-icons a {
  color: black;
  font-size: 15px;
}
#social-icons a:hover {
  color: papayawhip;
}

/* Social Icons Mediaqueries  */
@media (max-width: 576px) {
  #social-icons a {
    font-size: 12px;
  }
}