mhmepg.css

#a{
  height: 230px;
  width: 100%;
  background-color: #dcf1fa;
  /* margin-top: 100px; */
  padding: 6px;
  font-size: 20px;
  display: flex;
  gap: 8px;
  text-align: center;
}
#a > .info1{
 padding-left: 80px;
 padding-top: 190px;
 padding-right: 250px;
 font-size: 32px;
}
.info{
  padding-top: 50px;
  margin-left: 140px;
}
#boxImage12
{
margin-left: 200px;
}
.info22{
  color: #1f1f1f;
  font-size: 1.75rem;
  line-height: 3.2rem;
  font-family: "Source Sans Pro",Arial,sans-serif;
  letter-spacing: -0.1px;
  font-weight: 550;
  margin-bottom: 16px;
}
.info1{
  color: #382d8b;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-family: "Source Sans Pro",Arial,sans-serif;
  font-weight: 600;
  letter-spacing: -0.1px;
  margin-bottom: 16px;
}
.info2{
  color: #1f1f1f;
  font-size: 2.75rem;
  line-height: 3.2rem;
  font-family: "Source Sans Pro",Arial,sans-serif;
  letter-spacing: -0.1px;
  font-weight: 400;
  margin-bottom: 16px;
}
.info3{
  color: #1f1f1f;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-family: "Source Sans Pro",Arial,sans-serif;
  font-weight: 400;
  letter-spacing: -0.1px;
  margin-bottom: 32px;
} 
#blueimg{
  display: flex;
  
}
#blueimg > div{
  height: 350px;
  width: 250px;
  background-color: #382d8b;
  margin-left: 50px;
}
#ex2{
  display : grid;
  grid-template-columns:repeat(3, 1fr);
  gap: 20px;
  padding: 20px 100px 
}
.k{
  height: 80px;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 5px;
}
.k>img{
  height: 78px;
  width: 98px;
  border: 2px solid pink;
}
.cors2{
  color: #636363;
}
#ex1{
  color: #1f1f1f;
  font-size: 2.75rem;
  line-height: 3.2rem;
  font-family: "Source Sans Pro",Arial,sans-serif;
  letter-spacing: -0.1px;
  font-weight: 400;
  margin-bottom: 16px;
  padding-left: 100px;
  padding-top: 20px;
}

#skybox{
  margin-top: 160px;
  display: flex;
  align-items: center;
  background-color: #ebf3ff;
  height: 400px;
  justify-content: center;
  padding-bottom: 25px;
}
#img1{
  margin-left: 100px;
}
#data{
  margin: 50px;
 
}
#d1{
  color: #1f1f1f;
  font-size: 2.5rem;
  line-height: 3.2rem;
  font-family: "Source Sans Pro",Arial,sans-serif;
  letter-spacing: -0.1px;
  font-weight: 400;
  margin-bottom: 20px;
}
#d2 {
  font-family: 'Source Sans Pro',Arial,sans-serif;
  font-size: 20px;
  line-height: 28px;
  margin: 0px;
  margin-bottom: 32px;
  max-width: 463px;
  width: 100%;
}
#d3 {
  font-size: 1rem;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: 0;
}
#com1, #com2{
  color: #1f1f1f;
  font-family: "Source Sans Pro",Arial,sans-serif;
  text-align: center;
}
#com1{
  line-height: 5.75rem;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 48px;
  line-height: 52px;
  margin: 150px 20px 14px;
  padding: 0px 400px;
}
#com2{
  line-height: 3.2rem;
  letter-spacing: -0.1px;
  font-weight: 370;
  font-size: 32px;
  line-height: 36px;
}
#com3{
  height: 500px;
  width: 80%;
  margin: 10px 150px 100px 150px;
  display: flex;
  font-family: "Source Sans Pro", Arial, sans-serif;
  gap: 30px;
  text-align: center;
} 
.q1{
font-size: 28px;
line-height: 36px;        
font-weight: 600;
color: rgb(56, 45, 139);
}
.q2{
font-size: 16px;
line-height: 24px;
font-weight: 600;
color: rgb(31, 31, 31);
}
.q3{
font-size: 16px;
line-height: 24px;
color: rgb(31, 31, 31);
}
.q4{
background-color: rgb(42, 115, 204);
display: inline-block;
height: 2px;
margin-bottom: 20px;
margin-top: 20px;
width: 69px;
}
.q5{
font-size: 20px;
line-height: 28px;
color: rgb(31, 31, 31);
}
#bt{
  display: flex;
  text-align: center;
}
.bt1{
  height: 53px;
  width: 220px;
  border: 2px solid #0056d2;
  background-color: #fff;
  margin-right: 5px;
  color: #0056d2;
  padding-top: 15px;
  font-weight: bold;
  border-radius: 5px;
}


#newbox{
  display: flex;
  background-color: #f9f7ef;
  width: 100%;
  height: 430px;
}
.logo2 > img{
  max-width: 90px;
  max-height: 30px;
  margin-left: 35px;
}
.n1{
  height: 500px;
  max-width: 500px;
  margin: 100px 100px
}
#n11{
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: #382d8b;
  margin-top: 20px;
  padding-bottom: 40px;
}
#lastbox{
  display: flex;
}
#lastbox > div{
  margin: 80px 80px 80px 80px;
}
#d1{
  color: #1f1f1f;
  font-size: 2.15rem;
  line-height: 3.2rem;
  font-family: "Source Sans Pro",Arial,sans-serif;
  letter-spacing: -0.1px;
  font-weight: 550;
  color: #1f1f1f;
  margin: 0;
  margin-bottom: 24px;
  max-width: 75%;
}

#d2{
  color: #1f1f1f;
  letter-spacing: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: "Source Sans Pro",Arial,sans-serif;
  font-weight: 400;
  color: #1f1f1f;
  margin-bottom: 1.5rem;
  max-width: 80%;
}
.d3{
  height: 53px;
  width: 160px;
  border: 2px solid #0056d2;
  background-color: #0056d2;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding-top: 15px;
  border-radius: 4px;
}
/* PRODUCTS */
.product {
  position: relative;
  overflow: hidden;
  padding: 20px;
  /* margin-top: -550px; */
}     
.product-container {
  padding: 0 10px;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  width:85%;
  margin: auto;
 
 
}

.product-container::-webkit-scrollbar {
  display: none;
}

.product-card {
  flex: 0 0 auto;
  width: 220px;
  height: 400px;
  margin-right: 40px;
  margin-left: 20px;
}
.product-card:hover{
 cursor: pointer;

}
 .product-card>p{
   margin: auto;
 }



.marginforclassnine .product-container{
  width: 75%;
}
 .marginforclassnine{
   /* margin-top: -680px; */
   height: 550px;
 }
.marginforclassnine .product-card{
  height: 600px;
  width: 300px;
}
.pre-btn,
.nxt-btn {
  border: none;
  width: 10vw;
  height: 100%;
  position: absolute;
  opacity: 1;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  cursor: pointer;
  z-index: 8;
}
.pre-btn img,
.nxt-btn img{
  width: 35%;
}
.pre-btn {
  left: 0;
  transform: rotate(180deg);
}

.nxt-btn {
   
  right: 0;
}
 

.pre-btn:hover img,
.nxt-btn:hover img {
  opacity: 1;
}
 
.dots>div{
  height: 10px;
  width: 10px;
  background-color:grey;
  opacity: 0.4;
  margin:5px;
  border-radius: 100px;
  
}
.dots{
  display: flex;
  justify-content: center;
 margin:15px auto ;
}
.certi{
  display: inline;
  color: #0056d2;
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: "Source Sans Pro",Arial,sans-serif;
  font-weight: 700;
  letter-spacing: -0.1px;
  margin-left: 600px;
}

#nav2{
  display: flex;
  font-size: 18px;
  font-weight: bold;
  margin-left: 80px;
  gap: 80px;
  margin-bottom: 20px;
  padding: 8px;
}
#nav21:hover {
text-decoration: underline 3px solid blue;
}
#nav22:hover{
text-decoration: underline 3px solid blue;
}
#nav23:hover {
text-decoration: underline 3px solid blue;
}
#blank{
height: auto;
width: 80%;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin-top: 20px;
margin: auto;
}
#ek{
margin-left: 100px;
}
#div1{
padding-left: 30px;
}
#div111{
width: 70%;
}
#im{
height: 100px;
width: 100px;
margin: 50px;
}
#namediv{
color: #005fd2;
font-size: 30px;

}
#namediv:hover{
border-bottom: 4px solid rgb(2, 72, 201);
transition: .2s;
}
#div2{
height: 5px;
background-color: #636363;
width: 70%;

}