/* index CSS */

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

 * {
   margin: 0;
   padding: 0;
 }
 
 html {
   scroll-behavior: smooth;
 }
 
 a {
   text-decoration: none;
 }
 
 ul {
   list-style: none;
 }
 
 body {
   font-family: "Poppins", sans-serif;
   line-height: 1.6;
   font-size: 16px;
 }
 
 header {
   position: fixed;
   background-color: white;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin: auto;
   width: 100%;
   padding: 5px 0;
   z-index: 999;
 }
 
 .container {
   width: 80%;
   margin: auto;
 }
 
 .brand {
   font-family: "Oleo Script", cursive;
   font-size: 35px;
   cursor: pointer;
   display: inline-block;
   margin-left: 50px;
 }
 
 .brand a {
   color: black;
 }
 
 .navbar {
   font-size: 16px;
   background: white;
 }
 
 .main-nav a {
   display: inline-block;
   color: white;
   width: 80px;
   text-align: center;
 }
 
 .main-nav li:hover {
   color: #555 !important;
   background-color: white;
   border: 1px solid black;
 }
 
 .main-nav a:hover {
   color: #555;
 }
 
 .main-nav {
   list-style-type: none;
   display: none;
 }
 
 .nav-links {
   text-decoration: none;
   color: rgba(255, 255, 255, 0.7);
 }
 
 .main-nav li {
   text-align: center;
   padding: 8px;
   background-color: #555;
   color: white !important;
   margin: 10px 10px;
   border-radius: 20px;
   font-weight: bold;
 }
 
 .navbar-toggle {
   position: absolute;
   top: 10px;
   right: 20px;
   cursor: pointer;
   color: rgba(255, 255, 255, 0.8);
   font-size: 24px;
 }
 
 .active {
   display: block;
 }
 
 .fa-bars {
   color: black;
 }
 
 @media screen and (min-width: 900px) {
   .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
   .main-nav {
     display: flex;
     margin-right: 30px;
     flex-direction: row;
     justify-content: flex-end;
   }
 
   .nav-links {
     margin-left: 40px;
   }
 
   .logo {
     margin-top: 0;
   }
 
   .navbar-toggle {
     display: none;
   }
 
   .logo:hover,
   .nav-links:hover {
     color: rgba(255, 255, 255, 1);
   }
 }
 
 .showcase {
   background: url(../img/showcase1.jpg) no-repeat center/cover;
   height: 100vh;
   width: 100%;
   overflow: hidden;
 }
 
 .secHead {
   margin-top: 200px;
   color: white;
   width: 50%;
 }
 
 .secHead h1 {
   font-size: 40px;
   margin-bottom: 30px;
 }
 
 .secHead p {
   font-size: 20px;
 }
 
 .about {
   width: 100%;
   height: 60vh;
   padding-top: 50px;
 }
 
 .about h1 {
   text-align: center;
   width: 100%;
   padding-bottom: 30px;
 }
 
 .about p {
   font-size: 20px;
   width: 70%;
   margin: auto;
   text-align: center;
 }
 
 /* index end */
 
 /* profile CSS */
 
 .card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   max-width: 400px;
   margin: auto;
   text-align: center;
   font-family: arial;
 }
 
 #about {
   color: grey;
   font-size: 18px;
 }
 
 /* profile css */
 
 /* Contact */
 
 .contact h1 {
   text-align: center;
   width: 100%;
   padding-bottom: 30px;
 }
 
 .wrapper {
   box-shadow: 0 0 20px 0 #555;
 }
 
 .wrapper > * {
   padding: 1em;
 }
 
 .company-info {
   text-align: center;
   background: #555;
 }
 
 .contact {
   background: #fff;
 }
 
 .contact form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 20px;
 }
 
 .full {
   grid-column: 1/3;
 }
 
 .contact form label {
   display: block;
 }
 
 p {
   margin: 0px;
 }
 
 .contact form input,
 .contact form textarea,
 .contact form button {
   width: 100%;
   padding: 1em;
   border: 1px solid #555;
   box-sizing: border-box;
 }
 
 .contact form button {
   background: #555;
   border: none;
   padding: 1em;
   text-transform: uppercase;
 }
 
 .contact form button:hover,
 .contact form button:focus {
   background: #555;
   color: #fff;
   transition: background-color 2s ease-out;
 }
 
 @media (max-width: 768px) {
   .contact form {
     display: grid;
     grid-template-columns: 1fr;
   }
 
   .full {
     grid-column: 1;
   }
 }
 
 /* contact end */
 
 /* team */
 
 .team {
   height: 100vh;
 }
 
 /* footer  */
 
 footer {
   position: fixed;
   bottom: 0;
 }
 
 @media (max-height: 800px) {
   footer {
     position: static;
   }
 }
 
 .footer-distributed {
   background-color: #2f2f2f;
   box-sizing: border-box;
   width: 100%;
   text-align: left;
   font: bold 16px sans-serif;
   padding: 50px 50px 60px 50px;
   margin-top: 80px;
 }
 
 .footer-distributed .footer-left,
 .footer-distributed .footer-center,
 .footer-distributed .footer-right {
   display: inline-block;
   vertical-align: top;
 }
 
 /* Footer left */
 
 .footer-distributed .footer-left {
   width: 30%;
 }
 
 .footer-distributed h3 {
   color: #ffffff;
   font-weight: bold;
   margin: 0;
 }
 
 /* Footer links */
 
 .footer-distributed .footer-links {
   color: #ffffff;
   margin: 20px 0 12px;
 }
 
 .footer-distributed .footer-links a {
   display: inline-block;
   line-height: 1.8;
   text-decoration: none;
   color: inherit;
 }
 
 .footer-distributed .footer-company-name {
   color: #8f9296;
   font-size: 14px;
   font-weight: normal;
   margin: 0;
 }
 
 /* Footer Center */
 
 .footer-distributed .footer-center {
   width: 35%;
 }
 
 .footer-distributed .footer-center i {
   background-color: #33383b;
   color: #ffffff;
   font-size: 25px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   text-align: center;
   line-height: 42px;
   margin: 10px 15px;
   vertical-align: middle;
 }
 
 .footer-distributed .footer-center i.fa-envelope {
   font-size: 17px;
   line-height: 38px;
 }
 
 .footer-distributed .footer-center p {
   display: inline-block;
   color: #ffffff;
   vertical-align: middle;
   margin: 0;
 }
 
 .footer-distributed .footer-center p span {
   display: block;
   font-weight: normal;
   font-size: 14px;
   line-height: 2;
 }
 
 .footer-distributed .footer-center p a {
   color: #54d16b;
   text-decoration: none;
   display:block;
   line-height: 1.5;
 }
 
 /* Footer Right */
 
 .footer-distributed .footer-right {
   width: 30%;
 }
 
 .footer-distributed .footer-company-about {
   line-height: 20px;
   color: #92999f;
   font-size: 13px;
   font-weight: normal;
   margin: 0;
 }
 
 .footer-distributed .footer-company-about span {
   display: block;
   color: #ffffff;
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 20px;
 }
 
 .footer-distributed .footer-icons {
   margin-top: 25px;
 }
 
 .footer-distributed .footer-icons a {
   display: inline-block;
   width: 35px;
   height: 35px;
   cursor: pointer;
   background-color: #33383b;
   border-radius: 2px;
 
   font-size: 20px;
   color: #ffffff;
   text-align: center;
   line-height: 35px;
 
   margin-right: 3px;
   margin-bottom: 5px;
 }
 
 /* Here is the code for Responsive Footer */
 
 @media (max-width: 880px) {
   .footer-distributed .footer-left,
   .footer-distributed .footer-center,
   .footer-distributed .footer-right {
     display: block;
     width: 100%;
     margin-bottom: 40px;
     text-align: center;
   }
 
   .footer-distributed .footer-center i {
     margin-left: 0;
   }
 }
 
 /* Participants Section Starts */
 
 /* #section4 {
   color: #555555;
   font-family: "Nunito", sans-serif;
   padding: 50px 100px;
   padding-top: 80px;
 }
 
 #section4 h2 {
   text-transform: uppercase;
   letter-spacing: 0.1em;
 } */
 
 #section4 {
   width: 100%;
   padding-top: 50px;
 }
 
 #section4 h1 {
   text-align: center;
   width: 100%;
   padding-bottom: 30px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
 .participants-container {
   display: flex;
   flex-wrap: wrap;
   /* flex-direction: column; */
   justify-content: center;
   margin: auto;
 }
 .image {
   position: relative;
   width: 270px;
   margin: 10px;
   display: flex;
   justify-content: center;
 }
 .image__img {
   display: block;
   width: 225px;
   height: 225px;
   border-radius: 13px;
 }
 .image__overlay {
   position: absolute;
   top: 0;
   left: 20;
   width: 225px;
   height: 225px;
   background: rgba(0, 0, 0, 0.6);
   color: #ffffff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   opacity: 0;
   transition: 0.25s;
   border-radius: 13px;
 }
 .image__overlay_blur {
   backdrop-filter: blur(5px);
 }
 .image__overlay > * {
   transform: translateY(20px);
   transition: 0.25s;
   margin: 8px;
 }
 .links_par {
   margin: 4px auto;
   padding: 4px;
 }
 .links_par a i {
   font-size: 40px;
   color: #2af598;
   margin: 4px 15px;
 }
 .fa-github:hover {
   color: red;
 }
 .fa-user:hover {
   color: blue;
 }
 .fa-facebook:hover {
   color: yellow;
 }
 .image__overlay:hover {
   opacity: 1;
 }
 .image__overlay:hover > * {
   transform: translateY(0);
 }
 .image__title {
   font-size: 1.3em;
   font-weight: bold;
   align-items: center;
   padding: 25px 1px 1px 1px;
   margin: 1px;
   margin-bottom: -5px;
 }
 .image__description {
   margin: 0px;
   padding: 2px;
 }
 .image__description p {
   font-size: 1rem;
   display: flex;
   flex-direction: column;
   margin-top: 0.25em;
   color: #2af598;
   margin-left: 3px;
   padding-bottom: 5px;
   margin-bottom: 5px;
 }
 
 /* Mentors Section Begins */
 
 #section6 {
   width: 100%;
   padding-top: 50px;
 }
 
 #section6 h2 {
   text-align: center;
   width: 100%;
   padding-bottom: 30px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
 
 .mentors-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: auto;
 }
 /* Mentors Section Ends */
 
 
 /*Project Section starts*/
 h1.projectheader{
   margin-left:500px;
   text-transform: capitalize;
   margin-top:60px;
   margin-bottom:30px;
 }
 h3.header{
   text-decoration: none;
 }
 div.project-img-header{
   border-radius: 40px;
 }
 div.container{
   margin-top: 100px;
 }
 
 div.container1{
   display:flex;
   flex-wrap:wrap;
   flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
 }
 div.column1{
   color:white;
   padding-left:0px;
   padding-right:0px;
   padding-top:50px;
   padding-bottom:20px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   text-align: center;
   margin:10px auto;
   background-color: #33383b;
   box-shadow: 6px 4px #b4b7bd;
   border-radius: 25px;
   border-bottom: #8f9296;
   border-top: #8f9296;
   border-left: #8f9296;
   border-right: #8f9296;
 }
 div#col1{
   box-shadow: 6px solid  #64696d  ;
 }
 div.column2{
   color:white;
   padding-left:0px;
   padding-right:0px;
   padding-top:50px;
   padding-bottom:20px;
   text-align: center;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   margin:10px auto;
   background-color: #33383b;
    box-shadow: 6px 4px #b4b7bd;
    border-radius:25px;
    border-bottom: #8f9296;
     border-top: #8f9296;
   border-left: #8f9296;
   border-right: #8f9296;
 }
 div.column3{
   color:white;
   padding-left:0px;
   padding-right:0px;
   padding-top:50px;
   padding-bottom:20px;
   text-align: center;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   margin:10px auto;
   background-color: #33383b;
   box-shadow: 6px 4px #b4b7bd;
    border-radius:25px;
    border-bottom:#8f9296;
     border-top: #8f9296;
   border-left: #8f9296;
   border-right: #8f9296;
 }
 
 div.column4{
   color:white;
   padding-left:0px;
   padding-right:0px;
   padding-top:50px;
   padding-bottom:20px;
   text-align: center;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   margin:10px auto;
   background-color: #33383b;
    box-shadow: 6px 4px #b4b7bd;
    border-radius:25px;
    border-bottom:#8f9296;
     border-top: #8f9296;
   border-left: #8f9296;
   border-right: #8f9296;
 }
 
 div.column5{
   color:white;
   padding-left:0px;
   padding-right:0px;
   padding-top:50px;
   padding-bottom:20px;
   text-align: center;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   margin:10px auto;
   background-color: #33383b;
   box-shadow: 6px 4px #b4b7bd;
    border-radius:25px;
    border-bottom:#8f9296;
     border-top: #8f9296;
   border-left: #8f9296;
   border-right: #8f9296;
 }
 
 div.column6{
   color:white;
   padding-left:0px;
   padding-right:0px;
   padding-top:50px;
   padding-bottom:20px;
   text-align: center;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   margin:10px auto;
   background-color: #33383b;
  box-shadow: 6px 4px #b4b7bd;
    border-radius:25px;
    border-bottom:#8f9296;
    border-top: #8f9296;
   border-left: #8f9296;
   border-right: #8f9296;
 }
 
 h4.author{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 800;
   margin-top:20px ;
    padding-left:280px;
    font-size: 17px;
 }
 
 h5.author-name{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 400;
   margin-bottom: 20px ;
   padding-left:280px;
   font-size:15px;
 }
 
 button.btn{
   margin-right: 150px;
   margin-bottom: 18px;
   border:none;
    cursor:pointer;
     color: white;
     font-weight: 600;
     padding-left:10px ;
     padding-right:10px;
     padding-top:5px;
     padding-bottom:5px;
     transition:0.4s ease-out;
     background-color: #0e0e29 ;
     box-shadow:0 6px #02080f;
     top:2px;
     border-radius: 10px;
     font-size:18px;
 }
 button.btn:hover{
   margin-right: 150px;
   margin-bottom: 10px;
    cursor:pointer;
    border:none;
     color: grey;
     font-weight: 600;
     padding-left:10px ;
     padding-right:10px;
     padding-top:5px;
     padding-bottom:5px;
     transition:0.4s ease-out;
     background-color: #0e0e29 ;
     box-shadow:0 5px #02080f;
     top:2px;
     border-radius: 8px;
     font-size: 17px;
 }
 button.btn:focus{
   margin-right: 150px;
   margin-bottom: 10px;
    cursor:pointer;
    border:none;
     color:  grey;
     font-weight: 600;
     padding-left:10px ;
     padding-right:10px;
     padding-top:5px;
     padding-bottom:5px;
     transition:0.4s ease-out;
     background-color: #0e0e29 ;
     box-shadow:0 4px #02080f;
     top:2px;
     border-radius: 5px;
     font-size: 17px;
 }
 button.btn:active{
   margin-right:150px;
   margin-bottom: 10px;
    cursor:pointer;
    border:none;
     color:  grey;
     font-weight: 600;
     padding-left:10px ;
     padding-right:10px;
     padding-top:5px;
     padding-bottom:5px;
     transition:0.4s ease-out;
     background-color: #0e0e29 ;
     box-shadow:0 2px #02080f;
     top:2px;
     border-radius: 3px;
     font-size: 17px;
 }
 a.social-links-a{
   margin-right:10px;
   height: 35px;
 }
 header{
   margin-top:-200px;
   height:70px
 }
 h1.projectheader{
   color:black;
 }
 nav.navbar{
   height:100%;
 }
 div.brand{
   margin-top:10px;
 }
 div.container{
     margin-top:80px
 }
 .flex-gap{
     display: inline-flex;
 }
 .flex-gap > div{
     margin:40px;
     margin-bottom:80px;
 }
 i.fab.fa-linkedin{
     color:white;
     margin-bottom:0px;
 }
 i.fab.fa-linkedin:hover{
     color:grey;
     margin-bottom:0px;
 }
 i.fab.fa-github{
     color:white;
     margin-bottom:0px;
 }
 i.fab.fa-github:hover{
     color:grey;
     margin-bottom:0px;
 }
 p.para{
   font-size: large;
   padding-left:30px;
   padding-right:30px;
 }
 
 /* Media Queries Goes From Here */