@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: poppins, sans-serif !important;
  /* font-family: 'Rajdhani', sans-serif !important; */
  color: rgb(80, 80, 80) !important;
}
img {
  width: 100%;
}
.activites-pro-img{
  width: 600px; 
  margin-left: -60px
}

.heading-title {
  font-family: poppins, sans-serif;
  /* font-family: 'Rajdhani', sans-serif; */
  margin-bottom: 30px;
  margin-top: 30px;
  color: rgb(100, 100, 100) !important;
  font-weight: 600;
}
.heading-title span{
  font-size: 17px;
}
.achivementImg {
  /* width: 50% !important; */
  margin: auto;
  /* background-color: #011a2f; */
  /* padding: 70px 0px; */
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.title {
  text-align: center;
  color: white;
  padding-top: -30px;
  font-family: poppins, sans-serif;
  /* font-family: 'Rajdhani', sans-serif; */
}
#btn {
  cursor: pointer;
  text-decoration: none;
  color: #011a2f;
}

.experience-section {
  /* background-color: antiquewhite; */
}
.experience-container,
.course-container {
  padding: 25px 30px;
  border-radius: 10px;
  color: rgb(124, 124, 124) !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  transition: all 0.5s;
}
.experience-container h5,
.course-container h5{
  color: rgb(80, 80, 80) !important;
}
.experience-container:hover,
.course-container:hover {
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.programmingHeroIcon img {
  width: 50px;
}
/* #viewPortBtn {
  border: 1px solid #011a2f;
}
#viewPortBtn:hover {
  border: none;
} */
/* #downloadResumeBtn {
  padding: 12px 70px;
  margin-right: 10px;
  margin-top: -10px;
  background-color: white !important;
  color: #000 !important;
  border: none !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  transition: all 0.5s;
}
#downloadResumeBtn:hover {
  background-color: #047aed !important;
  color: rgb(255, 255, 255) !important;
} */

.courseTitle,
.expHeadContainer {
  background-color: #047aed;
  color: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.bbaTitle{
  background-color: #047aed;
  color: white;
  padding: 20px 20px;
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.bbaTitle:last-child{
  margin-bottom: 0px;
}
.bbaTitle h5{
  color: #ffffff !important;
  /* margin-top: 10px; */
}
.expHeadContainer h3 {
  /* margin-bottom: -5px; */
}

.expDate {
  background-color: white;
  color: #011a2f;
  border-radius: 30px;
  padding: 5px 10px;
  width: 44%;
  margin-bottom: 10px;
}

.expDate h6 {
  margin: auto;
}
.resumeImg {
  width: 50px !important;
}
.activityContainer {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

#viewCertificate-btn, #viewGratuity-btn {
  border: none;
  padding: 10px 30px;
  border-radius: 5px;
  background-color: #047aed;
  color: #ffffff;
  transition: all 0.3s;
}
#viewCertificate-btn:hover, #viewGratuity-btn:hover {
  background-color: #002240;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* modal css */
.ImgModal, .grtuityImgModal {
  background: rgba(0, 0, 0, 0.5);
  top: 49px;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.grtuityImg{
  /* height: 550px; */
  margin: auto;
  align-items: center;
  justify-content: center;
  /* overflow: scroll; */
}
.ImgModal.open , .grtuityImgModal.open{
  opacity: 1;
  pointer-events: all;
}
.certificateImg {
  width: 55%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  transition: all 0.25s ease-out;
}

.certificateImg.open {
  transform: translate(-50%, -50%) scale(1);
}
.achivementImg.open {
  transform: translate(-50%, -50%) scale(1);
}

.backBtn {
  text-align: center;
  margin: 40px 0px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  /* background-color: rgb(255, 255, 255); */
  color: white;
  cursor: pointer;
  padding: 7px;
  border-radius: 4px;
}
#myBtn img {
  width: 30px;
}

#myBtn:hover {
  background-color: #555;
}

@media screen and (max-width: 768px) {
  .activites-pro-img{
    width: 450px; 
    margin: auto;
  }
  .achivementImg {
    width: 100% !important;
  }
}