@media (max-width: 768px) {
  .text {
  padding-left: 15px;
  font-size: 30px;
  color: #20123a;
  flex: 1;
}

.text h2
{
text-align: start;
padding-bottom: 20px;
margin-top: 30px;
}



.image img
{ 
position: relative;
bottom: 450px;
left: 5px;   
height: 50vh;
border-radius: 10px;
}

.shape {
  margin-top: 20px;
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  animation: morph 16s ease-in-out infinite;
  border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  height: 300px;
  width: 100%;
  margin-left: 100px;
  
 /* position: relative; */
  /* left:300px; */
  align-items: flex-end;
  transition: all 1s ease-in-out;
}


.button-home
{

  font-size: 15px;
  font-weight: bold;
  padding: 10px 5px;
  margin-top: 20px;
  display: block;
  border-radius: 50px;
  width: 150px;
  height: 50px;
  cursor: pointer;
  border: none;
  background-color: darkblue;
  transition: all 0.3s ease;
  color: whitesmoke;
}
}


@media (max-width: 425px) {
    .text {
    padding: 10px;
    font-size: 30px;
    color: #20123a;
    flex: 1;
    margin-top: 30px;
}

.text h2
{
  color: #20123a;
  text-align: center;
  padding-bottom: 20px;
  font-weight: 500;
}


.text h4
{
  color: #20123a;
  text-align: center;
}

.salamander{
    display: none;
}



.shape {
  margin-top: 1px;
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  animation: morph 16s ease-in-out infinite;
  border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  height: 200px;
  width: 100%;
  margin-left: 30px;
  
 /* position: relative; */
  /* left:300px; */
  align-items: flex-end;
  transition: all 1s ease-in-out;
}

.button-home
{

  font-size: 15px;
  font-weight: bold;
  padding: 10px 5px;
  margin: auto;
  margin-top: 40px;
  display: block;
  border-radius: 50px;
  width: 150px;
  height: 50px;
  cursor: pointer;
  border: none;
  background-color: darkblue;
  transition: all 0.3s ease;
  color: whitesmoke;
}
.what-are-we_text {
  font-size: 16px;
  width: 100%;
  color: #eee;
  padding: 20px 40px;
}


}