html, body{
    overflow-x: hidden;
    width: 100vw;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: rgba(255, 254, 254, 0);
    position: absolute;
    top: 0%;

}
* {
    font-family: 'Karla', sans-serif;

}
*:focus {
    outline: none;
}

button{
    outline: none;
    -webkit-appearance: none;
}

.navbar-toggler{
    border: none;
    -webkit-appearance: none;
    outline: none;
}

.navbar-toggler:focus{
    -webkit-appearance: none;
    outline: none;
}

.collapsible {
    background-color: #FFFFFF;
    color: #575757;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: 0;
    font-size: 15px;
    margin-top: 2%;
    margin-bottom: 1%;
    font-size: 20px;
    -webkit-appearance: none;
}

.collapsible:focus{
    outline: none;
    -webkit-appearance: none;
}

.collapsible:before{
    padding-right: 10%;
}

.faq-collapsible{
    border-bottom: 2px solid #b6b6b6;
    width: 100%;
}

a, a:hover, a:after, a:visited, a:active{
    text-decoration: none;
    color: inherit;
}

button:hover, .btn:hover, .btn:visited, .btn:active{
    background-color: inherit;
    color: inherit;
    outline: none;
}

#mainNav{
    position: fixed;
    top: 0%;
    left: 0%;
    background-color:white;
    padding-top: 4%; 
    padding-left: 10%; 
    padding-right: 10%;
    transition: all 0.6s;
}

.hover-text{
    position: absolute;
    
    color: #b94343;
    /* display: none; */
}

@media screen and (max-width: 992px){
    #mainNav{
        padding-left: 4%; 
        padding-right: 4%;
    }

    .navbar-list{
        border-bottom:2px solid rgb(212, 212, 212); 
        border-top:2px solid rgb(212, 212, 212); 
        padding-bottom: 4%;
        margin-top: 2%;
    }

    .hover-text{
        font-size: 12px;
        margin-bottom: 12px;
    }
}

.collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #715EFF;
    float: right;
    margin-left: 5px;
    outline: 0;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
    color: #FF6C56;
}

/* .active, .collapsible:hover {
background-color: #555;
} */

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    color: #818181;
    font-size: 18px;
    text-align: justify;
    /* background-color: #f1f1f1; */
}

.nav-item{
    
    font-size: 20px
}

.pointer-svg{
    width: 10%;
}

.calendar-svg{
    width: 12%;
}

/* @media screen and (max-width: 1400px){
    .pointer-svg{
        width: 5%;
    }

    .calendar-svg{
        width: 6%;
    }
} */

.navbar-img{
    width: 200px
}

/* .navbar-img{
    width: 80%;
    min-width: 200px;
} */


@media screen and (max-width:992px){
    .navbar-brand{
        width: 60%;
    }

    .navbar-img{
        width: 30%;
        min-width: 0px;
    }
}

@media screen and (max-width:768px){
    .navbar-brand{
        width: 60%;
    }

    .navbar-img{
        width: 60%;
    }
}

@media screen and (max-width: 992px){
    .collapsible{
        font-size: 16px;
    }

    .content{
        font-size: 14px;
    }

    .nav-item{
        margin-top: 4%;
        font-size: 16px;
    }

    .pointer-svg{
        width: 10%;
    }
    
    .calendar-svg{
        width: 12%;
    }
}

@media screen and (max-width: 768px){
    .collapsible{
        font-size: 14px;
    }

    .content{
        font-size: 12px;
    }

    .pointer-svg{
        width: 12%;
    }
    
    .calendar-svg{
        width: 14%;
    }
}




.navbar-title{
    font-weight: 700;
    font-size: 1.6rem;
    background: black ; 
    background-clip : text ; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-light {
    /* background-color: #f8f9fa!important; */
    background-color: #ffffff!important;
}

.navbar-nav > li{
    margin-left:30px;
    /* margin-right:15px; */
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
    /* color: rgba(41,41,41,.7);
    font-weight: 500;
    font-size: 18px; */
}

.landing-page{
    height: 100vh;
    width: 100vw;
    min-height: 600px;
    transition: 2s all;
}

.commitment{
    padding-top: 15%;
    padding-bottom: 0%;
    margin-bottom: 0%;
}

.commitment-align{
    padding-left: 10%;
    padding-right: 10%;
}

@media screen and (max-width:992px){
    .commitment-align{
        padding-left: 2%;
        padding-right: 2%;
    }
}



.about{
    padding-top: 15%;
    padding-bottom: 10%;
}

.faq{
    padding-bottom: 10%;
    padding-right: 10%;
    padding-left: 10%;
}

@media screen and (max-width:992px){
    .faq{
        padding-left: 2%;
        padding-right: 2%;
    }
}

@media screen and (max-width: 768px){
    .faq, .about {
        padding-top: 20%;
        padding-bottom: 20%;
    }
}

.landing-contents{
    position: relative;
    top: 50%;
    transform: translate(0, -32%);
    width: 35%;
}

.landing-contents-button {
    margin: 0px 0px;
    padding: 0px 1px;
}

.logo-img{
    position: relative;
    width : 200px ;
    left: 50%;
    transform: translate(-50%, 0);
}

.landing-nav-btn{
    width: 90%;
    height: 100%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 25px;
    border-width: 3px;
    font-size: 16px;
}

.landing-nav-apply-btn{
  width: 120%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 25px;
  border-width: 3px;
  font-size: 20px;
}

.landing-info{
    font-size: 20px;
    color: gray;
    padding: 0px 0px;
}

@media screen and (max-width: 1400px){

    .landing-contents{
        width: 50%;
    }


    .landing-nav-btn{
        font-size: 16px;
        width: 90%;
    }

    .landing-info{
        font-size: 16px;
    }
}

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

    .landing-contents{
        width: 60%;
    }

    .landing-nav-btn{
        font-size: 10px;
        width: 80%;
    }

    .landing-info{
        font-size: 14px;
        color: gray;
    }
}

@media screen and (max-width: 768px){

    .landing-contents{
        width: 70%;
    }

    .landing-nav-btn{
        font-size: 10px;
        width: 80%;
        margin-top: 10px;
        height: initial;
    }

    .landing-info{
        font-size: 12px;
        color: gray;
    }
}

/* @media screen and (max-height: 300px) and (max-width: 768px){
    .landing-page{
        margin-top: 5%;
    }

    .landing-contents{
        width: 40%;
    }

    .landing-nav-btn{
        font-size: 8px;
        width: 50%;
        margin-top: 10px;
    }

    .landing-info{
        font-size: 10px;
        color: gray;
        font-weight: 600;
    }
} */




.winner-img{
    width: 75%;
    position: relative;
    top: 50%;
    /* left: 60%; */
    transform: translate(0%, -50%);
}

.woman-img{
    position: absolute;
    right: 0;
    width: 160%;
}

.about-img{
    width: 103%;
    position: relative;
    top: 50%;
    left: 40%;
    padding-right: 0px;
    margin-right: 0px;
    transform: translate(-57%, -50%);
}

.commitment-text{
    text-align: right;
    /* margin-right: 20%;  */
    margin-left: 10%;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

.commitment-image {
    padding-top: 8%;
    width: 100%;
}

@media screen and (max-width: 992px){
    .commitment-text{
        margin-right: 10%; 
    }
}

.commitment-title, .faq-heading, .about-title {
    font-size: 45px;
   
    color: #575757;
}


.commitment-contents{
    margin-top: 5%;
    font-size: 20px;
    
    color: #818181;
    line-height: 150%;
}

.about-text{
    text-align: left;
    margin-right: 10%; 
    margin-left: 16%;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

.about-video{
    width: 40%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 5%;
    padding: 0.1%;
    border: 2px solid rgba(41, 41, 41, 0.2);
    box-shadow: 20px 20px rgba(231, 217, 217, 0.1);
}

@media screen and (max-width:1400px){
    .about-video{
        width: 60%;
    }
}

@media screen and (max-width:768px){
    .about-video{
        width: 80%;
    }
}

@media screen and (max-width:992px){
    .about-text{
        margin-left: 10%;
    }
}

.about-contents{
    margin-top: 5%;
    font-size: 20px;
    
    color: #818181;
    line-height: 150%;
}

.faq-column{
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

.faq-column{
    /* margin-right: 30%; */
    margin-left: 5%;
}

.faq-title{
    /* margin-left: 30%; */
    margin-right: 5%;
}


.faq-text{
    
    font-size: 18px;
}




@media screen and (max-width: 1400px){
    .winner-img{
        width: 80%;
    }
}

@media screen and (max-width: 992px){
    .winner-img{
        width: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* margin-top: 5%; */
    }

    .about-img{
        width: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .commitment-text, .about-text{
        text-align: center;
        /* margin-top: 5%; */
    }


    .commitment-title, .about-title, .faq-heading {
        font-size: 30px;
    }

    .commitment-contents,.about-contents {
        font-size: 14px;
    }

    .faq-text{
        font-size: 14px;
    }

    .faq-column{
        margin-right: 5%;
        margin-left: 5%;
    }

    .faq-title{
        margin-left: 5%;
        margin-right: 5%;
    }

    .woman-img{
        width: 100%;
    }
}


@media screen and (max-width: 768px){
    .winner-img{
        width: 50%;
        /* margin-top: 5%; */
    }

    .commitment-text, .about-text {
        text-align: center;
        /* margin-top: 5%; */
    }

    .commitment-title, .about-title, .faq-heading {
        font-size: 30px;
    }

    .commitment-contents, .about-contents{
        font-size: 14px;
        line-height: 120%;
    }

    .faq-title{
        margin-bottom: 40%;
    }

    .faq-text{
        font-size: 14px;
    }

    .about-img{
        margin-bottom: 5%;
    }
}

.sponsor-us{
    padding-top: 5%;
    padding-bottom: 5%;
    background: linear-gradient(to right, #6C63FF 0%, #FF6C56 60%, #FFDB2E 100%); 
}

.sponsor-us-row{
    color: white;
    font-size: 20px;
    
}



.sponsor-image{
    width: 50%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.title-sponsor-image{
  width: 75%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.associate-sponsor-image{
  width: 60%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.platform-sponsor-image{
  width: 60%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sponsors{
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 15%;
    padding-right: 15%;
}

.image-column{
    width: 100%;
    overflow: hidden;
    margin-top: 50px;
    /* margin: auto; */
    display: block;
}

.sponsor-title{
   
    color: #575757;
    font-size: 45px;
}

.patron-title{
  padding-top: 10%;
 
  color: #575757;
  font-size: 45px;
}

@media screen and (max-width: 992px){
    .main-sponsors{
        margin-bottom: 10%;
    }
}

@media screen and (max-width: 992px){
    .sponsor-title, .patron-title {
        font-size: 30px;
    }

    .sponsor-us-row{
        font-size: 18px;
    }

    .platform-sponsor-image {
      width: 50%;
    }

    .sponsor-us{
        padding-top: 10%;
        padding-bottom: 10%;
    }
}

@media screen and (max-width: 768px){
    .sponsor-title, .patron-title {
        font-size: 30px;
    }

    .associate-sponsor-image {
      width: 60%;
    }

    .sponsor-image {
      width: 40%;
    }

    .sponsor-us-row{
        font-size: 14px;
    }

}


@media screen and (max-width: 400px){
    .sponsor-us-row{
        font-size: 12px;
    }
}


.footer{
    padding-top: 6%;
    padding-bottom: 3%;
}

.footer-row{
    width: 35%;
    margin: auto;
    text-align: center;
    margin-bottom: 3%;
}

.footer-title{
    font-weight: 600;
    background: black ; 
    background-clip : text ; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    
}

.footer-info{
    
    font-size: 20px;
    color: #575757;
    line-height: 140%;
}

.footer-social-links{
    
    font-size: 20px;
    color: #818181;
}

.footer-logo-img{
    width: 40%;
}



@media screen and (max-width: 992px){
    .footer-row{
        width: 50%;
    }

    .footer-info, .footer-social-links{
        font-size: 16px;
    }

    .footer-logo-img{
        width: 60%;
    }
}


@media screen and (max-width: 768px){
    .footer{
        padding-top: 15%;
        padding-bottom: 10%;
    }

    .footer-row{
        width: 80%;
        margin-bottom: 5%;
    }

    .footer-title{
        font-size: 18px;
    }

    .footer-info, .footer-social-links{
        font-size: 14px;
    }

    .footer-logo-img{
        width: 50%;
    }
}

/*-------- Previous Speakers Section starts AND Team Section----------*/

.previous-speakers{
    padding-bottom: 5%;
}

.team {
    padding-top: 5%;
    padding-bottom: 5%;
}

.team-title {
    padding-top: 4%
}

.team-social {
    padding-left: 5px;
    padding-right: 5px;
}

@media screen and (max-width: 1400px){
    .team-title {
        padding-top: 8%;
    }
}

@media screen and (max-width: 992px){
    .team-title {
        padding-top: 14%;
    }
}

@media screen and (max-width: 768px){
    .team-title {
        padding-top: 18%;
    }
}

.circle{
    margin: 0 auto;
    margin-top:30px;
    background-size: 170%;
    background-position:center;
    border-radius:50%;
    border:4px solid #FFFFFF;
    width:156px;
    height:156px;
    -moz-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.16);
    margin-bottom: 30px;
    margin-top: 30px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
}

.speaker-row {
    margin-left: 10%;
    margin-right: 10%;
    /* padding-left: 8%;  
    padding-right: 8%;  
    align-items: center;
    text-align: center;
    width: 100%; */
}

.circle-holder {
    margin: 0px 0px;
    padding: 0px 0px;
}

.speaker-title{
    font-size: 45px;
   
    color: #575757;
    text-align: center;
    margin-bottom: 8%;
}

.speaker-text {
    text-align: center;
    font-size: 20px;
    
    padding: 1px 1px;
    margin: 0px 0px;
}

.speaker-company {
    color: #575757;
}


.speaker-name {
    color: #575757;
    font-weight: bold;
}

.speaker-about {
    color: #818181;
}

@media screen and (max-width: 1400px){
    .speaker-row {
        margin-left: 0%;
        margin-right: 0%;
    }
}

@media screen and (max-width: 992px){
    .speaker-company {
        font-size: 14px;
    }
    
    .speaker-name {
        font-size: 14px;
    }
    
    .speaker-about {
        font-size: 14px;
    }

    .previous-speakers{
        padding-top: 10%;
        padding-bottom: 10%;
    }
}

@media screen and (max-width: 768px){
    .speaker-title{
        font-size: 30px;
    }

    .previous-speakers{
        padding-top: 20%;
        padding-bottom: 20%;
    }
}

/*-------- Previous Speakers Section ends  ----------*/

/*-------- Timeline Section starts  ----------*/

.timeline{
  padding-top: 10%;
  padding-bottom: 10%;
  padding-right: 10%;
  padding-left: 10%;
}

.winner-timeline-img{
  width: 100%;
  position: relative;
  top: 50%;
  /* left: 80%; */
  transform: translate(0%, -50%);
}

.timeline-img{
  width: 100%;
  position: relative;
  top: 60%;
  right: 65%;
  transform: translate(50%, -50%);
}

.timeline-text{
  text-align: right;
  /* margin-right: 30%;  */
  margin-left: 5%;
}

.timeline-title {
  font-size: 45px;
 
  color: #575757;
}

@media screen and (max-width: 992px){
  .timeline{
    padding-left: 2%;
    padding-right: 2%;
  } 
  
  .winner-timeline-img {
      height: 75%;
      top: 0%;
      left: 60%;
      transform: translate(-50%, 0%);
  }

  .timeline-img {
    width: 80%;
    /* margin-left: 10%; */
    top: 0%;
    left: 40%;
    transform: translate(-50%, 0);
  }

  .timeline-text {
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
  }

  .timeline-title {
      font-size: 30px;
  }
}

@media screen and (max-width: 768px){
  .timeline{
      padding-top: 20%;
      padding-bottom: 20%;
  }
}

@media screen and (max-width: 768px){
  .timeline-img {
    width: 100%;
    margin-left: 10%;
  }

  .timeline-text{
      text-align: center;
      /* margin-top: 5%; */
  }

  .timeline-title{
      font-size: 30px;
  }
}

@media screen and (max-width: 1400px){
  .timeline-img{
    width: 110%;
  }
}

/*-------- Timeline Section ends  ----------*/



#hint-apply-now {
  fill: #323232;
  border-color: #323232; 
  color:#323232;
}

#hint-apply-now:active:focus {
  fill: #fff;
  color: #fff
} 


.prizes{
  padding-top: 10%;
  padding-bottom: 10%;
  /* padding-left: 20%;
  padding-right: 20%; */
}

/* @media screen and (max-width: 1400px){
    .prizes{
        padding-right: 10%;
        padding-left: 10%;
    }
} */

.prize-container{
  height: 320px;
  width: 300px;
  border: solid 1px rgba(41, 41, 41, 0.1);
  box-shadow: 5px 5px 25px 0 rgba(46,61,73,0.2);
  margin-bottom: 75px;
  -webkit-transition: box-shadow 0.4s ease-out;
  -moz-transition: box-shadow 0.4s ease-out;
  -o-transition: box-shadow 0.4s ease-out;
  transition: box-shadow 0.4s ease-out;
}

.top-prize{
    border: 2px solid rgba(241, 35, 3, 0.3);
    /* box-shadow: 10px 10px 35px 0 rgba(46,61,73,0.2); */
}

.prize-container:hover{
    box-shadow: 2px 4px 8px 0 rgba(46,61,73,0.2);
}

.image-row{
  height: 60%;
}

.prize-image{
  height: 80%;
  width: 80%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.prizes-row{
  /* margin-bottom: 5rem; */
  color: #575757;
  font-size: 28px;
  
}

.desc-row{
  color: #575757;
  font-size: 24px;
  
}

/* .image-text{
    position: relative;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 50px;
    background: linear-gradient(#6C63FF 0%, #FF6C56 60%, #FFDB2E 100%);
    background: -webkit-linear-gradient(#6C63FF 0%, #FF6C56 60%, #FFDB2E 100%);
    background: -moz-linear-gradient(top, #6C63FF 0%, #FF6C56 60%, #FFDB2E 100%);
    background: -o-linear-gradient(#6C63FF 0%, #FF6C56 60%, #FFDB2E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
} */

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .image-text{
        position: relative;
        left: 50%;
        top: 45%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 50px;
        background: linear-gradient(#6C63FF 0%, #FF6C56 60%, #FFDB2E 100%);
        background: -webkit-linear-gradient(#6C63FF 0%, #FF6C56 60%, #FFDB2E 100%);
        background: -moz-linear-gradient(top, #6C63FF 0%, #FF6C56 60%, #FFDB2E 100%);
        background: -o-linear-gradient(#6C63FF 0%, #FF6C56 60%, #FFDB2E 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -moz-background-clip: text;
        color: transparent;
        /* -webkit-text-fill-color: transparent; */
        /* -webkit-text-fill-color: transparent; */
        /* -moz-text-fill-color: transparent; */
    }
}

@-moz-document url-prefix() {
    @supports (mix-blend-mode: lighten) {
        .image-text {
          display: inline-block;
          position: relative;
          left: 50%;
        top: 45%;
        font-size: 50px;
        transform: translate(-50%, -50%);
          color: #000;
          background: #fff;
          mix-blend-mode: multiply;
        }
        .image-text::before {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: linear-gradient(to right,#6C63FF, #FF6C56, rgb(218, 125, 20));
          pointer-events: none;
        }
        .image-text::before {
          mix-blend-mode: screen;
        }
      }
}

/* @supports (mix-blend-mode: lighten) {
    .image-text {
      display: inline-block;
      position: relative;
      left: 50%;
    top: 45%;
    font-size: 50px;
    transform: translate(-50%, -50%);
      color: #000;
      background: #fff;
      mix-blend-mode: multiply;
    }
    .image-text::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(to right,#6C63FF, #FF6C56, rgb(218, 125, 20));
      pointer-events: none;
    }
    .image-text::before {
      mix-blend-mode: screen;
    }
  } */

  @supports (mix-blend-mode: lighten) {
    .image-text2 {
      display: inline-block;
      position: relative;
      left: 50%;
    top: 45%;
    font-size: 50px;
    transform: translate(-50%, -50%);
      color: #000;
      background: #fff;
      mix-blend-mode: multiply;
    }
    .image-text2::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(to right,#6C63FF, #FF6C56, #FFDB2E);
      pointer-events: none;
    }
    .image-text2::before {
      mix-blend-mode: screen;
    }
  }

.top-prize-image{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 60%;
    width: 60%;
    opacity: 0.1;
}



/* .speakers-row{
    width: 80%;
} */

.speakers-card{
    width: 90%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.speakers-image{
    width: 100%;
    border-radius: 50%;
}

.speakers-name{
    height: 40%;
}

.speakers-name-inner{
    position: relative;
    top:30%;
    /* left: 50%; */
    transform: translateY(-50%);
}

.speakers-description{
    height: 60%;;
}

.speakers-description-title{
    text-align: center;
}





.mentors{
    padding-top: 8%;
    padding-bottom: 10%;
}

.mentor-row{
    width: 60%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}


.mentor-container{
    border-right: solid 1px rgba(41, 41, 41, 0.1);
    border-bottom: solid 1px rgba(41, 41, 41, 0.1);
    box-shadow: 5px 5px 25px 0 rgba(46,61,73,0.2);
    -webkit-transition: padding 0.4s ease-out, width 0.4s ease-out, margin-bottom 0.4s ease-out, margin-top 0.4s ease-out;
    -moz-transition: padding 0.4s ease-out, width 0.4s ease-out, margin-bottom 0.4s ease-out, margin-top 0.4s ease-out;
    -o-transition: padding 0.4s ease-out, width 0.4s ease-out, margin-bottom 0.4s ease-out, margin-top 0.4s ease-out;
    transition: padding 0.4s ease-out, width 0.4s ease-out, margin-bottom 0.4s ease-out, margin-top 0.4s ease-out;
    margin-bottom: 5%;
    padding: 2%;
    width: 60%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* .mentor-container:hover{
    box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);
} */



.mentor-img{
    width:150px;
    height:150px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    -moz-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.16);
    border:4px solid #FFFFFF;

    -webkit-transition:  width 0.4s ease-out, height 0.4s ease-out;
    -moz-transition: width 0.4s ease-out, height 0.4s ease-out;
    -o-transition: width 0.4s ease-out, height 0.4s ease-out;
    transition: width 0.4s ease-out, height 0.4s ease-out;
}

.mentor-title{
    
    color: #575757;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* margin-bottom: 2%; */

    -webkit-transition:  top 0.4s ease-out, transform 0.4s ease-out;
    -moz-transition: top 0.4s ease-out, transform 0.4s ease-out;
    -o-transition: top 0.4s ease-out, transform 0.4s ease-out;
    transition: top 0.4s ease-out, transform 0.4s ease-out;
}

.mentor-name{
    font-size: 35px;
    font-weight: bold;
}

.mentor-designation{
    font-size: 25px;
}


.mentor-info{
    
    color: #575757;
    font-size: 20px;
    text-align: justify;
    opacity: 0;
    -webkit-transition:  display 0.4s ease-out, opacity 0.3s ease-in-out, color 2s ease-out;
    -moz-transition: display 0.4s ease-out, opacity 0.3s ease-in-out, color 2s ease-out;
    -o-transition: display 0.4s ease-out, opacity 0.3s ease-in-out, color 2s ease-out;
    transition: display 0.4s ease-out, opacity 0.3s ease-in-out, color 2s ease-out;
}

.mentor-container:hover .mentor-info{
    opacity: 1;
    -webkit-transition:  opacity 1s ease-in-out, color 2s ease-out;
    -moz-transition: opacity 1s ease-in-out, color 2s ease-out;
    -o-transition: opacity 1s ease-in-out, color 2s ease-out;
    transition: opacity 1s ease-in-out, color 2s ease-out;
}


.mentor-container:hover .mentor-img{
    width:250px;
    height:250px;
}

.mentor-container:hover{
    padding: 5%;
    width: 100%;
    /* margin-bottom: 5%;
    margin-top: 5%; */
}

.mentor-container:hover .mentor-title{
    top: 0%;
    transform: translateY(0);
    margin-bottom: 2%;
}



@media screen and (max-width: 1400px){
    .mentor-container{
        width: 80%;
    }
}


@media screen and (max-width: 992px){
    .mentor-img{
        width: 120px;
        height: 120px;
    }

    .mentor-name{
        font-size: 25px;
    }
    
    .mentor-designation{
        font-size: 20px;
    }

    .mentor-info{
        font-size: 14px;
    }
}

@media screen and (max-width: 768px){
    .mentor-img{
        width: 150px;
        height: 150px;
        margin-bottom: 10%;
    }

    .mentor-container{
        width: 90%;
    }

    .mentor-container{
        padding: 10%;
        margin-bottom: 20%;
    }
}

@media screen and (max-width: 576px){
    .mentor-container{
        padding: 10%;
    }
    .mentor-row{
        width: 100%;
    }
}


