.tag {
  margin-top: 100px;
  color: #ffffff;
  margin-left: 150px;
  font-size: 60px;
  font-family: 'Niconne', cursive;
}
.f1 {
  text-align: left;
  width: auto;
}

.edit {
  width: 60%;
  max-width: 60%;
  padding: 8px;
}
.p {
  width: auto;
}

.card {
  background-color: rgb(231, 228, 228);
  border-radius: 30px;
}

.card:hover {
  border: #282829;
}

.card img {
  padding: 6px;
  border-radius: 30px;
  height: 170px;
}

.card h6 {
  font-family: 'Joan';
  margin: 0px;
  font-size: 16px;
}

.zoom {
  width: 15%;
  text-align: center;
}

.whoweare {
  height: 400px;
  width: device-width;

}

.design {
  background-color: rgb(0, 0, 0);
  box-sizing: border-box;
  opacity: 0.9;
  padding: 40px 20px;
}

.design h4 {
  color: rgb(148, 35, 35);
  float: left;
  margin-top: 0px;
  margin-bottom: 10px;
  text-align: justify;
}

.design p {
  text-align: left;
  float: left;
  font-weight: lighter;
  font-size: 15px;
  margin: 0px 0px 20px 0px;
  color: whitesmoke;
  text-align: justify;
}

.rowdiv:after {
  content: "";
  display: table;
  clear: both;
}

.coldiv {
  float: left;
  width: 8.9%;
  padding: 15px 0px 0px 45px;
  margin: 0px;
  text-align: left;
}

.boxdiv {
  float: left;
  width: 22%;
  padding: 10px 10px;
}

.img1 {
  height: 60px;
  width: 60px;
  max-width: 60px;
  max-height: 60px;
}


.superhero {
    background-color:rgb(255, 254, 254);
    height:700px;
}



.coldiv2 {
  float: left;
  width: 25px;
  padding: 60px;
}

.boxdiv2 {
  float: left;
  width: 22%;
  padding: 10px 20px;
}

.horizontal-line {
  display: inline-block;
  border-top: 3px solid #8b37b8;
}

.hr1 {
  width: 55%;
  margin-left: 50px;
}

.hr2 {
  width: 34%;
  margin-left: 30px;
}

.tag1 {
  margin-top: 30px;
  color: rgb(200, 27, 27);
  opacity: 0.9;
  font-size: 4.5vw;
  text-align: center;
  font-family: 'Niconne', cursive;
}



.column {
  float: left;
  width: 25%;
  max-width: 25%;
  font-weight: lighter;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.head {
  text-align: left;
  font-size: 1.6vw;
  color: whitesmoke;
}

.ul1 {
  margin-left: 0px;
  padding: 15px;
}

.l1 {
  padding: 10px 9px;
  text-align: left;
  font-size: 1.1vw;
  font-weight: lighter;
  color: whitesmoke;
}
.para{
  padding: 22px 1px 0px 1px;
  text-align: left;
  font-size: 1.1vw;
  font-weight: lighter;
  color: whitesmoke;
  text-align: left;
}

.b1 {
  display: flex;
  font-size: 10px;
  max-width: 63px;
  align-content: center;
  color: white;
}

.b1:hover {
  background: rgb(170, 170, 62);
}


.link1 :hover {
  color: rgb(170, 170, 62);
  text-decoration: underline;
}
img{
  max-width: 100%;
}
.imgfooter {
  width: 30px;
  max-width: 30px;
  height:30px;
  max-height: 30px;
 }
@media screen and (max-width:320px) {
  .whoweare,.card,.card:hover,.card img, .card img:hover,
  .zoom,
  .tag,
  .design,
  .coldiv,
  .boxdiv,
  .img,
  .boxdiv h4,
  .boxdiv p,
  .rowdiv:after,
  .coldiv2,
  .boxdiv2,
  .horizontal-line,
  .hr1,
  .hr2,
  .column,
  .row:after,
  .head,
  .ul1,
  .l1,
  .carouselExampleIndicators,
  .carousel slide,
  .l1:hover,
  .b1,
  .b1:hover,
  .link1:visited,
  .link1:hover, .design h4, .design p, img {
    width: 100%;
  }
  .img {
    width:  30px;
  }
   .superhero {
    height: 1100px;
  }
}

.abcd {
  background-color: black;
  color: white;
  width: 30%;
  max-width: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}

@media screen and (max-width:320px) {
  .abcd {
    background-color: black;
    color: white;
    width: 80%;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
  }
}

@media screen and (max-width:720px) {
  .abcd {
    background-color: black;
    color: white;
    width: 80%;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
  }
}

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

  .whoweare,
  .card,
  .card:hover,
  .card img,
  .card img:hover,
  .zoom,
  
  .tag,
  .design,
  .coldiv,
  .boxdiv,
  .img,
  .boxdiv h4,
  .boxdiv p,
  .rowdiv:after,
  .coldiv2,
  .boxdiv2,
  .horizontal-line,
  .hr1,
  .hr2,
  .column,
  .row:after,
  .head,
  .ul1,
  .l1,
  .l1:hover,
  .b1,
  .b1:hover,
  .link1:visited,
  .link1:hover, .design h4, .design p, img{
    width: 100%;
  }
   .superhero {
    height: 1100px;
  }
}