.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; 
}
.row:after {
  content: "";
  display: table;
  clear: both;
}


@media screen and (max-width: 600px) {
    .column {
      width: 100%;
      display: block;
      margin-bottom: 20px;
      height: 100%;
    }
  }
 .bg-img {
    background-image: url("cartoon.png");
    background-repeat: no-repeat;
    width: 90%;
    height: 100%;
  }
@media screen and (max-width: 600px) {
  .buttonform{
    width: 100%;
  }
}
.buttonform {
  background-color: #ffffff;
  color: rgb(105, 39, 39);
  font-weight: bold;
  border-radius: 30px;
  float: left;
  height: 38px;
  width: 230px;
  padding: 5px;  border: none;
  cursor: pointer;
}
.buttonform:hover {
  opacity: 0.8;
  color: rgb(241, 233, 233);
  background-color: #9b0d0d;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
    .columnabout {
      width: 100%;
      display: block;
      margin-bottom: 10px;
     }
  }
  @media screen and (max-width: 900px) {
    .columnabout {
      width: 100%;
      display: block;
      margin-bottom: 10px;
    }
  }
  .card {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  text-align: center;
  height: 230px;
  width: 330px;
  border: 1px solid black;
  padding: 25px;
  background-color: #f7f6f6;
  font-size: 18px;
  }
 
  @media screen and (max-width: 600px) {
    .card {
      width: 100%;
      display: block;
    }
  }
  @media screen and (max-width: 870px) {
    .card {
      width: 100%;
      display: block;
       font-size: 14px;  
       height: 80%;
    }
  }
  @media screen and (max-width: 600px) {
    
  .cardimg {
    width: 100%;
    display: block;
    padding: 20px;
    float:center;
    }
  }
  .cardimg {
  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.2);
  text-align: left;
  font-size: 14px;
  border: 1px;
  height: 390px;
  background-color: #f1f1f1;
  text-align: center;
  }
  
  .cardimg:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
    .columnimg {
      width: 100%;
      display: block;
      margin-bottom: 20px;
      height: 100%;
    }
  }
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
    .column2 {
      width: 100%;
      display: block;
    height: 100%;
    }
  }
 .button{
    border-radius: 50px;
    width: 100px;
    height: 30px;
    background-color: #ffffff;
    color: black;
  }
  .buttonnav{
    border-radius: 50px;
    width: 130px;
    height: 45px;
    background-color: white;
    color: black;
    border:none;
  }
.buttonnav:hover {
  background-color: #e6e6e6;
  color: orange;
}
  .card2 {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    height: 250px;
    width: 470px;
      float: left;
   color: brown;
    padding: 25px;
    background-color: #f1f1f1;
    }
    @media screen and (max-width: 600px) {
      .card2 {
        width: 100%;
        display: block;
        padding: 10px; 
      }
    }
    @media screen and (max-width: 900px) {
      .card2 {
        width: 100%;
        display: block;
        padding: 10px;  
      }
    }
  .dot {
    height: 40px;
    width: 40px;
    background-color:brown;
    border-radius: 80%;
    display: inline-block;
  }
  .column3 {
    float: right;
    width: 50%;
  }
 .row123 {margin: 0 -5px;}
  .row:after {
    content: "";
    clear: both;
  }
  @media screen and (max-width: 600px) {
    .column3 {
      width: 100%;
     padding: 10px;
    }
  }
  .card3 {
    padding: 10px;
    text-align: center;
  }
  .dot1 {
    height: 80px;
    width: 80px;
    background-color: #f1f1f1;
    border-radius: 80%;
    display: inline-block;  
  }
  .columnnew12 {
  float: left;
  width: 50%;
  padding: 10px;
  margin-bottom: 30px;
  height: 350px;
}
    @media screen and (max-width: 600px) {
    .columnnew12 {
    width: 100%;
    margin-bottom: 20px;
  }
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.columnlg{
  float: left;
  width: 100%;
  padding: 20px;
  margin-bottom: 30px;
 }
@media screen and (max-width: 600px) {
  .columnlg {
    width: 100%;
    margin-bottom: 10px;
    float: left;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .slide {
    width: 100%;
    margin-bottom: 10px;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .slides {
   display: block;
   width: 70%;
   padding: 20px;;
  }
}
@media screen and (max-width: 600px) {
  .slide img {
   display: block;
   width: 70%;
   padding: 20px;;
  }
}
.cardlg {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  color: white;
  padding: 16px;
  width: 100%;
  background-color: #4e0202;
  }
  @media screen and (max-width: 600px) {
    .cardlg {
      width: 100%;
      display: block;
      padding: 10px;
    }
  }
  .button{
    border-radius: 50px;
    width: 100px;
    height: 30px;
    background-color: #ffffff;
    color: black;
  }
  .buttonnav{
    border-radius: 50px;
    width: 130px;
    height: 45px;
    background-color: white;
    color: black;
    border:none;
  }
.buttonnav:hover {
  background-color: #e6e6e6;
  color: orange;
}
.columnnewcard{
  float: left;
  width: 50%;
  padding: 40px;
  margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
  .columnnewcard {
    width: 100%;
    margin-bottom: 20px;
    padding:10px;
    font-size:10px;
  }
} 
@media screen and (max-width: 870px) {
  .columnnewcard {
    width: 100%;
    margin-bottom: 20px;
    padding:10px;
    font-size:12px;
  }
} 
.newcard {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 20px;
 color: rgb(141, 8, 8);
 background-color: #f1f1f1;
  padding: 25px;
  text-align: left;
}
 .butttonnew{
   border-radius: 50px;
    background-color: #720505;
    color: white;
    width: 100px;
    height: 30px;
  }  
.newcard1 {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  color: rgb(141, 8, 8);
  background-color: #f1f1f1;
  padding: 10px;
  text-align: left;
  height: 370px;
  width: 380px;
  }
@media screen and (max-width: 600px) {
  .newcard1 {
    width: 100%;
    margin-bottom: 20px;
    padding:10px
  }
}
@media screen and (max-width: 900px) {
  .newcard1 {
    width: 100%;
    margin-bottom: 20px;
    padding:10px
  }
} 
.columnimage{
  float: left;
  width: 50%;
  padding: 20px;

  margin-bottom: 30px;
 }
@media screen and (max-width: 600px) {
  .columnimage {
    width: 100%;
    margin-bottom: 20px;
    padding:20px
  }
}
@media screen and (max-width: 600px) {
  .cardflex {
    width: 100%;
    margin-bottom: 20px;
    padding:20px;
    font-size:14px;
  }
}
@media screen and (max-width: 870px) {
  .cardflex {
    width: 100%;
    margin-bottom: 20px;
    padding:20px;
    font-size:14px;
  }
}
  .cardflex{
    /*background-color: rgb(232, 235, 236) 100%;*/
    background:rgb(232, 235, 236);
    width: 100%;
    padding: 10px;
    opacity: 0.8;
    height: 100%;
  }
  input[type=text] {
    border: none;
    width: 80%;
    margin-left: 35px;
    border-bottom: 2px solid rgb(0, 0, 0);
    background-color: #ffffff;
  }
  input[type=text]:hover {
    border: none;
    padding: 5px;
    color: black;
    border-bottom: 4px solid rgb(248, 5, 5);
    background-color: #ffffff;
  }
  input[type=textarea] {
    padding: 20px;
    margin-left: 10px;
    border: 2px solid rgb(243, 240, 240);
    background-color: #ffffff;
    width: 90%;
  }
  input[type=textarea]:hover {
    border: none;
    border: 2px solid rgb(248, 5, 5);
    background-color: #ffffff;
  }
 
@media screen and (max-width: 600px) {
  .button1{
    width: 100%;
  }
}
.button1 {
  background-color: #ffffff;
  color: rgb(105, 39, 39);
  font-weight: bold;
  border-radius: 30px;
  float: left;
  height: 38px;
  width: 170px;
  padding: 5px;  border: none;
   cursor: pointer;
}
.button1:hover {
  opacity: 0.8;
  color: rgb(184, 0, 0);
  background-color: #f0e3e3;
}
.newslider{
width:100%;    
}
@media screen and (max-width: 600px) {
  .newslider{
    width: 50%;
  }
}