@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
  color: #5a5a5a;
  font-family: "Lato", sans-serif;
  margin-left: 1px;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Montserrat", sans-serif;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

section {
  width: 100%;
  padding: 80px 0;
}

.img-header{
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 3%;
  margin-bottom: 0;
}

.pt-card {
  padding: 8%;
  border-radius: 30px;
  background-image: url('../images/collab-banner.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 3.5px #0297ff;
  margin-bottom: -13%;
}
.uheading {
  font-size: 36px;
}
.lheading {
  font-size: 36px;
}

#collab{
  margin-top: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
  
input[type=number] {
  -moz-appearance: textfield;
}

@media (min-width: 300px) and (max-width: 580px) {
  .heading {
    text-align: left;
  }
  .uheading {
    font-size: 20px;
  }
  .lheading {
    font-size: 20px;
  }
  .pt-card {
    margin-top: 10px;
  }
  
}
@media (min-width: 580px) and (max-width: 780px) {
  .uheading {
    font-size: 26px;
  }
  .lheading {
    font-size: 26px;
  }
}
.collab-card {
  width: 250px !important;
  height: 280px;
  margin: 3% 1%;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
}
.collab-card:hover {
  width: 250px !important;
  height: 280px;
  margin: 3% 1%;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.72);
  -webkit-box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.72);
  -moz-box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.72);
  background-color: white;
  background-image: linear-gradient(to bottom right, white, #e6ffff);
}
.collab-main-heading {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 36px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.highlight {
  color: #0297ff;
}
.card-1 {
  background: url("../images/collab/coursera.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-1 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-2 {
  background: url("../images/collab/docker.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-2 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-3 {
  background: url("../images/collab/lenskart.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-3 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-4 {
  background: url("../images/collab/coding.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-4 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-5 {
  background: url("../images/collab/cad.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-5 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-6 {
  background: url("../images/collab/UniversityCincinnati.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-6 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-7 {
  background: url("../images/collab/szeged.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-7 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-8 {
  background: url("../images/collab/iiitd.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-8 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-9 {
  background: url("../images/collab/UniversityofDelhi.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-9 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-10 {
  background: url("../images/collab/jnu.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-10 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-11 {
  background: url("../images/collab/iisc.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-11 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-12 {
  background: url("../images/collab/amazon.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-12 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-13 {
  background: url("../images/collab/tcs.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-13 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-14 {
  background: url("../images/collab/zenon.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-14 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-15 {
  background: url("../images/collab/stage3.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-15 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.card-16 {
  background: url("../images/collab/societe-generale-logo.png") no-repeat;
  filter: grayscale(100%);
  opacity: 0.8;
  display: inline-block !important;
  width: 10rem !important;
  height: 10rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.collab-card:hover > .card-16 {
  filter: grayscale(0%);
  opacity: 1;
  display: inline-block !important;
  width: 12rem !important;
  height: 12rem !important;
  padding: 2vh 4vh;
  background-position: center;
  background-size: contain;
  text-align: center;
  transition: all 0.5s ease-in-out !important;
}
.blue-hr {
  margin: 0px !important;
  border-style: none;
  border-top: 6px solid #0297ff !important;
  border-radius: 8px;
}
.collab-heading {
  font-size: 1.5rem;
  font-weight: 500;
  color: #222;
}

@media (min-width: 200px) and (max-width: 580px) {
  .mobile-view {
    font-size: 28px;
  }
  .uheading {
    font-size: 24px;
  }
  .lheading {
    font-size: 16px;
  }
  .pt-card {
    margin-top: 7%;
    margin-bottom: -40%;
  }
  .card-1 {
    background: url("../images/collab/coursera.png") no-repeat;
    filter: grayscale(0%);
    opacity: 1;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }

  .card-2 {
    background: url("../images/collab/docker.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-3 {
    background: url("../images/collab/lenskart.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-4 {
    background: url("../images/collab/coding.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-5 {
    background: url("../images/collab/cad.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-6 {
    background: url("../images/collab/UniversityCincinnati.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-7 {
    background: url("../images/collab/szeged.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-8 {
    background: url("../images/collab/iiitd.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-9 {
    background: url("../images/collab/UniversityofDelhi.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-10 {
    background: url("../images/collab/jnu.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-11 {
    background: url("../images/collab/iisc.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-12 {
    background: url("../images/collab/amazon.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-13 {
    background: url("../images/collab/tcs.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-14 {
    background: url("../images/collab/zenon.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-15 {
    background: url("../images/collab/stage3.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
  .card-16 {
    background: url("../images/collab/societe-generale-logo.png") no-repeat;
    filter: grayscale(0%);
    opacity: 0.8;
    display: inline-block !important;
    width: 10rem !important;
    height: 10rem !important;
    padding: 2vh 4vh;
    background-position: center;
    background-size: contain;
    text-align: center;
    transition: all 0.5s ease-in-out !important;
  }
}