body {
    margin: 0;
    padding: 0;
}

.content {
    width: 85%;
    /* border: 1px solid green; */
    position: relative;
    top: 9%;
    display: flex;
    margin-left: 8%;
}
/* .head{
    width: 100%;
    height: 10vh;
    border: 1px solid red;
    padding-left: 30px;
    background: linear-gradient(to right, rgb(17, 17, 17), rgb(133, 5, 126), rgb(133, 5, 126), rgb(252, 248, 4));
    color: white;
} */

.bod {
    width: 100%;
    margin-top: 60px;
    /* border: 1px solid blue; */
}
 .bod h2 {
    padding: 10px 10px;
   
}

.flex-card {
    display: flex;
    margin: 0 auto;
    padding: 30px;
}

.flex {
    flex: 1;
    height: 400px;
    border: 10px solid black;
}


  .bod .container{
    display: flex;
    /* border: 1px solid rgb(78, 240, 240); */
    box-shadow: 8px 5px 8px rgb(94, 93, 93);
    border-radius: 12px;
  }
  .container img{
    /* width: 50%; */
    height: 90%;
    border-radius: 12px;
    /* margin-top: 8%; */
  }
  .container .writeup{
    margin-left: -30%;
    margin-top: 5%;
    border-right: 1px solid grey;
    margin-right: 10px;
    padding-left: 10px;
    height: 90%;
    color: black;
  }
  .container .side{
    /* margin-left: -30%; */
    margin-top: 5%;
    text-align: center;
    color: black;
  }
  .bod .top h2{
    text-align: center;
    color: black;
  }

  .writeup .view{
    margin-top: 20%;
    background-color: blue;
    padding: 12px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
  }
  .writeup a{
    background-color: black;
    padding: 12px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
  }
.top2{
    margin-top: 5%;
}
.bod .top img, .bod .top2 img{
  margin-top: 15px;
}

hr {
  width: 95%;
}

p {
  padding-right: 10px;
}

.bod2 h2{
  text-align: center;
  color: white;
  margin-top: 80px;
}
footer{
  padding: 10px;
  color: rgb(72, 179, 179);
  text-align: center;
  padding-top: 30px;
}


/* .bod2{
  width: 100%;
  /* border: 1px solid red; */
/* } */

/* .minor{ */
  /* display: inline-block; */
  /* be independent in a single line */
  /* flex: 1;
  margin: 0 20px;
  width: 30%;
  height: 500px;
  box-shadow: 1px 2px 8px rgba(158, 158, 161, 0.885); */
  /* background: #e6e5e5; */
  /* color: black;
} */

/* .minor-cards{
  display: flex;
  width: 100%; */
  /* margin: 0 auto; */
  /* border: 1px solid pink; */
/* } */

/* .minor .details{
  height: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.minor .details .image{
  width: 50%;
  height: 100%;
}
.details img{
  width: 100%;
  height: 100%;
  
  border-radius: 20px;
}

.minor button{
  width: 40%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background-color: rgb(4, 4, 114);
  margin: 10px 120px;
}

.minor button a{
  color: white;
  text-decoration: none;
}

.minor button:hover{
  background-color: rgb(78, 240, 240);
  cursor: pointer;

}
.minor button a:hover{
  color: black;
}

.two {
  margin-top: 40px;
} */

/* .details .bio{
  width: 48%;
  padding-top: 10px; */
  /* border: 1px solid brown; */
/* } */
/* 
.details .bio p {
  padding-top: 10px;
}

.details .bio p span {
  font-weight: bold;
}

.minor .info{ */
  /* border: 1px solid brown; */
  /* text-align: center;
  margin-top: 10px;
  font-size: 1.1rem;
  padding: 10px;
  font-weight: bold;
}

.minor .socials{
  display: flex;
  justify-content: space-evenly;
  width: 90%;
  margin: 0 auto;
}

.minor .socials .fa-facebook, .fa-instagram, .fa-whatsapp, .fa-twitter {
  font-size: 2rem;
}

a .fa-facebook {
  color: rgb(43, 43, 211);
}

a .fa-instagram {
  color: brown;
}

a .fa-whatsapp {
  color: rgb(42, 190, 42);
} */ 

body {
  margin: 0;
  padding: 0;
}

.content {
  width: 85%;
  /* border: 1px solid green; */
  position: relative;
  top: 9%;
  display: flex;
  margin-left: 8%;
}
/* .head{
  width: 100%;
  height: 10vh;
  border: 1px solid red;
  padding-left: 30px;
  background: linear-gradient(to right, rgb(17, 17, 17), rgb(133, 5, 126), rgb(133, 5, 126), rgb(252, 248, 4));
  color: white;
} */

.bod {
  width: 100%;
  margin-top: 60px;
  /* border: 1px solid blue; */
}
/* .bod h2 {
  padding: 10px 10px;
 
} */

.flex-card {
  display: flex;
  margin: 0 auto;
  padding: 30px;
}

.flex {
  flex: 1;
  height: 400px;
  border: 10px solid black;
}


.bod .container{
  display: flex;
  justify-content: space-between;
  height: 450px;
  /* border: 1px solid rgb(78, 240, 240); */
  box-shadow: 8px 5px 8px rgb(94, 93, 93);
  border-radius: 12px;
}
.top2 .container img{
  width: 20%;
  height: 10%;
  border-radius: 12px;
  /* margin-top: 8%; */
}

.top2 .container .img img {
  width: 100%;
  height: 95%;
}
.container .writeup{
  margin-left: 30px;
  margin-top: 5%;
  border-right: 1px solid grey;
  margin-right: 10px;
  padding-left: 10px;
  height: 80%;
  color: black;
}
.container .side{
  /* margin-left: -30%; */
  margin-top: 5%;
  text-align: center;
  color: black;
}
.bod h2{
  padding-top: 30px;
  text-align: center;
  color: black;
}

.writeup .view{
  margin-top: 20%;
  background-color: blue;
  padding: 8px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
}
.writeup a{
  background-color: black;
  padding: 8px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
}
.top2{
  margin-top: 5%;
}
.bod .top img, .bod .top2 img{
margin-top: 15px;
}

hr {
width: 95%;
}

p {
padding-right: 10px;
}

.bod2 h2{
text-align: center;
color: white;
margin-top: 80px;
}
footer{
padding: 10px;
color: rgb(72, 179, 179);
text-align: center;
padding-top: 30px;
}

@media all and (min-width: 992px) {
.dropdown-menu li{ position: relative;}
.nav-item .submenu{ 
  display: none;
  position: absolute;
  left:100%; top:-7px;
}
.nav-item .submenu-left{ 
  right:100%; left:auto;
}
.dropdown-menu > li:hover{ background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{ display: block; }
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
.dropdown-menu .dropdown-menu{
    margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}
}	

@media all and (min-width: 992px) {
	.dropdown-menu li{ position: relative;}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{ display: block; }
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu{
      margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
  }
}	

@media only screen and (max-width: 600px){
  
}