/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
   background-color: white;
   padding: 20px;
   margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.heading{
  font-family: Arial, Helvetica, sans-serif; 
  width: 90%;
  background: linear-gradient(to right, #a8f87f,rgb(150, 231, 254)); 
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.heading:hover{
  font-family: Arial, Helvetica, sans-serif; 
  width: 90%;
  background: linear-gradient(to right,rgb(161, 161, 247),rgb(253, 151, 17) ); 
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.heading1{
  font-family: Arial, Helvetica, sans-serif; 
  width: 90%;
  background: linear-gradient(to right, lightgreen,lightblue); 
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.heading1:hover{
  font-family: 'Times New Roman', Times, serif; 
  width: 90%;
  background: linear-gradient(to right,lightpink,yellow); 
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.heading2{
  font-family: 'Times New Roman', Times, serif; 
  width: 90%;
  background: linear-gradient(to right, #a8f87f,rgb(150, 231, 254)); 
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}


.heading3{
  font-family: Arial, Helvetica, sans-serif; 
  background: linear-gradient(to right, #a8f87f,rgb(150, 231, 254)); 
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 30px;
}
.heading2:hover{
  font-family: 'Times New Roman', Times, serif; 
  background: linear-gradient(to right,lightpink,yellow); 
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.paragraph{
  font-family: Arial, Helvetica, sans-serif; 
  background: linear-gradient(to right, lightgreen,lightblue); 
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  text-align: justify;
}

form{
  font-family: 'Times New Roman', Times, serif; 
  width: 50%;
  padding: 50px;
  background: linear-gradient(to right, #93f561,rgb(88, 192, 221)); 
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
form .input,button{
  width: 100%;
  margin: auto;
  margin-top: 15px;
  border-radius: 10px;
  border: none;
  height: 40px;
  text-align: center;
}


.offer_1{
  width: 80%;
  margin: auto;
  margin-left: 5%;
  padding: 20px;
}

#more {display: none;}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

.who-join div{
  width:33%;
  margin: auto;
  background: var(--primary);
  box-shadow: 2px 3px 4px 1px grey; 
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  text-align: justify;
  height: 350px;

}
@media (max-width:1000px){
  .who-join{
      flex-direction: column;
      width: 1700px;
     justify-content: center;
      
  }
}
@media (max-width:900px){
  .who-join{
      flex-direction: column;
      width: 1800px;
     justify-content: center;
      
  }
}
@media (max-width:700px){
  .who-join{
      flex-direction: column;
      width: 1200px;
     justify-content: center;
     margin-left: -400px;
     margin-top: 30px;
      
  }
  
}