.hero{

background:url(img/farmhouse.jpg) center/cover;

padding:120px 0;
height: 600px;
color:white;

}


.form-box{

background:white;

padding:30px;

border-radius:10px;

color:black;

}

h1{

font-weight:bold;

}



section{

padding:40px 0;


}


section .container .row .col{
    display: flex;
    flex-direction: row;
    width: 100%;
}

section .container .row .col >div{
    flex-basis: 33%;
}



.card{
    flex-basis: 33%;
}


/* Mobile View */
@media (max-width: 768px) {

    .col-md-6 {
        flex: auto 0 0;
        width: 100%;
    }
  
  .card{
    width: 100% !important;
    margin: 10px 0 !important;
  }

  .card img{
    height: 200px !important;
    object-fit: cover;
  }

  .card-title{
    font-size: 18px;
  }

  .card-body h6{
    font-size: 14px;
  }

  .btn{
    font-size: 14px;
    padding: 8px;
  }


  section.container {
    padding: 20px 10px;
  }

  section.container h2 {
    margin-top: 20px !important;
    padding-top: 10px !important;
    font-size: 24px;
  }

  section.container p {
    margin: 15px !important;
    padding: 0 !important;
    font-size: 15px;
    line-height: 1.6;
  }



  h5{
    font-size: 16px;
    padding: 15px;
    line-height: 1.6;
  }

  Section .container .row{
    display: column !important;
    padding-top: 20px !important;
  }

  section .container .row .col{
    width: 100% !important;
    margin-bottom: 20px;
  }

  .card-title{
    font-size: 32px;
  }

  .card-subtitle{
    font-size: 16px;
  }



/* Hero Section Mobile Fix */

  .hero{
    padding: 40px 15px;
    text-align: center;
  }

  .hero h1{
    font-size: 26px;
    margin-bottom: 15px;
  }

  .hero p{
    font-size: 16px;
  }

  .hero ul{
    padding-left: 0;
    list-style-position: inside;
    margin-bottom: 25px;
  }

  .form-box{
    margin-top: 25px;
    padding: 20px;
  }

  .form-box h4{
    font-size: 20px;
    margin-bottom: 15px;
  }

  .form-control{
    font-size: 14px;
  }

  .form-box .btn{
    font-size: 15px;
    padding: 10px;
  }

  .hero h1{
    text-align: left;
  }

  .hero p{
    text-align: left;
  }

  .hero ul{
  /* display: flex; */
  text-align: left;
  gap: 20px;          /* space between items */
  list-style: none;   /* remove bullets */
  padding-left: 0;
}

.hero ul li{
  font-size: 16px;
}


  .navbar-brand{
    font-size: 16px;
    max-width: 75%;
  }


  .navbar-nav .nav-link{
    padding: 10px 0;
    font-size: 16px;
  }

  .navbar-nav .btn{
    margin-top: 10px;
  }

.about p{
    font-size: 20px;
}

}