/*Lets start with the cloud formation rather*/

/*The container will also serve as the SKY*/

*{ margin: 0; padding: 0;}

body {
  /*To hide the horizontal scroller appearing during the animation*/
  overflow: hidden;
}

/* Clouds as background using pseudo-elements */


#clouds {
  position: absolute;
  z-index: -1; /* To keep the clouds behind the content*/
}
/*Time to finalise the cloud shape*/
.cloud {
  width: 200px; height: 60px;
  background: #fff;

  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;

  position: relative;
}

.cloud:before, .cloud:after {
  content: '';
  position: absolute;
  background: #fff;
  width: 100px; height: 80px;
  position: absolute; top: -15px; left: 10px;

  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;

  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
}

.cloud:after {
  width: 120px; height: 120px;
  top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.x1 {
  -webkit-animation: moveclouds 15s linear infinite;
  -moz-animation: moveclouds 15s linear infinite;
  -o-animation: moveclouds 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
  left: 200px;

  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.6; /*opacity proportional to the size*/

  /*Speed will also be proportional to the size and opacity*/
  /*More the speed. Less the time in 's' = seconds*/
  -webkit-animation: moveclouds 25s linear infinite;
  -moz-animation: moveclouds 25s linear infinite;
  -o-animation: moveclouds 25s linear infinite;
}

.x3 {
  left: -250px; top: -200px;

  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8; /*opacity proportional to the size*/

  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}

.x4 {
  left: 470px; top: -250px;

  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  transform: scale(0.75);
  opacity: 0.75; /*opacity proportional to the size*/

  -webkit-animation: moveclouds 18s linear infinite;
  -moz-animation: moveclouds 18s linear infinite;
  -o-animation: moveclouds 18s linear infinite;
}

.x5 {
  left: -150px; top: -150px;

  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8; /*opacity proportional to the size*/

  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}
/*
* Wing 1.0.0-beta
* Copyright 2016, Kabir Shah
* http://usewing.ml/
* Free to use under the MIT license.
* https://kingpixil.github.io/license
*/
body,h1,h2,h3,h4,h5,h6{font-weight:400;font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}body,h6{line-height:1.6}html{box-sizing:border-box;font-size:62.5%;margin:0;padding:0}body{letter-spacing:.01em;font-size:1.5em}h1,h2,h3{letter-spacing:-.1rem}h1{font-size:4rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:3rem;line-height:1.3}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;letter-spacing:0}@media (min-width:550px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}a{color:#104cfb;transition:all .1s ease}a:hover{color:#222}[type=submit],button{padding:1.1rem 3.5rem;margin:1rem 0;background:#111;color:#f5f5f5;border-radius:2px;border:none;font-size:1.3rem;transition:all .2s ease}[type=submit].outline,button.outline{padding:1.1rem 3.5rem;background:0 0;color:#111;border:1.5px solid #111}[type=submit]:hover,button:hover{background:#222}[type=submit].outline:hover,button.outline:hover{background:0 0;border:1.5px solid #444;color:#444}[type=submit]:focus,button:focus{outline:0}[type=submit]:active,button:active{transform:scale(.99)}input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],select,textarea,textarea[type=text]{margin:1rem 0;width:100%;max-width:100%;border-radius:2px;border:1px solid #a4a4a4;font-size:1.3rem;transition:all .2s ease}input[type=email]:hover,input[type=file],input[type=number]:hover,input[type=password]:hover,input[type=search]:hover,input[type=tel],input[type=text]:hover,select:hover,textarea:hover,textarea[type=text]:hover{border:1px solid #111}input[type=email]:focus,input[type=file],input[type=number],input[type=password]:focus,input[type=search]:focus,input[type=tel],input[type=text]:focus,select:focus textarea:focus,textarea[type=text]:focus{outline:0;border:1px solid #104cfb}input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],select{padding:1.1rem}textarea,textarea[type=text]{height:10rem;padding:14px 20px}.container{max-width:960px;margin:0 auto;width:80%}.row{display:flex;flex-flow:row wrap;justify-content:space-between}.row>:first-child{margin-left:0}.row>:last-child{margin-right:0}.col{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.col,[class*=" col-"],[class^=col-]{margin:1rem}.col-1{flex:1}.col-2{flex:2}.col-3{flex:3}.col-4{flex:4}.col-5{flex:5}.col-6{flex:6}.col-7{flex:7}.col-8{flex:8}.col-9{flex:9}.col-10{flex:10}.col-11{flex:11}.col-12{flex:12}ul{list-style:circle inside}ol{list-style:decimal inside}.table{width:100%;border:none;border-collapse:collapse;border-spacing:0;text-align:left}.table td,.table th{vertical-align:middle;padding:12px 4px}.table thead{border-bottom:2px solid #333030}@media screen and (max-width:768px){.col,[class*=" col-"],[class^=col-]{margin:0;flex:0 0 100%}.table.responsive{position:relative;display:block}.table.responsive td,.table.responsive th{margin:0}.table.responsive thead{display:block;float:left;border:0}.table.responsive thead tr{display:block;padding:0 10px 0 0;border-right:2px solid #333030}.table.responsive th{display:block;text-align:right}.table.responsive tbody{display:block;overflow-x:auto;white-space:nowrap}.table.responsive tbody tr{display:inline-block}.table.responsive td{display:block;min-height:16px;text-align:left}.table.responsive tr{padding:0 10px}}.pull-right{float:right}.pull-left{float:left}.text-center{text-align:center}.full-screen{width:100%;min-height:100vh}.vertical-align{display:flex;align-items:center}.horizontal-align{display:flex;justify-content:center}.center,.right{align-items:center;display:flex}.center{justify-content:center}.right{justify-content:flex-end}.left{display:flex;align-items:center;justify-content:flex-start}.fixed{position:fixed;width:100%}@media screen and (max-width:400px){.hide-phone{display:none}}@media screen and (max-width:768px){.hide-tablet{display:none}}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px;font-family:Consolas,Monaco,Menlo,monospace}pre>code{display:block;padding:1rem 1.5rem;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.nav,.nav-brand,.nav-menu{display:flex}.nav{position:relative;flex-wrap:wrap;align-items:center;padding:1rem}.nav-menu{flex-flow:row;flex:1 0 auto}.nav-item{padding:1rem 2rem}.nav-logo{font-weight:bolder;font-size:2rem;line-height:0}

h3 {
  border-bottom: 1px solid #000;
  margin-bottom: 10px;
}

h4 {
  margin: 2px;
}

ul {
  margin: 0;
}

hr {
  margin-top: 2rem;
  width: 50%;
}

p {
  margin: 0;
}

.align-right { text-align: right; }
.text-left { text-align: left; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Sky blue gradient background with blue at the top */
  background: linear-gradient(to bottom, #6cc6ec 0%, #bbeafa 60%, #fff 100%);
  position: relative;
  overflow-x: hidden;
}

/* Green hills using SVG background */
body::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50vh;
  background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 1440 320" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%236dbb43" fill-opacity="1" d="M0,224L60,202.7C120,181,240,139,360,133.3C480,128,600,160,720,186.7C840,213,960,235,1080,218.7C1200,203,1320,149,1380,122.7L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path><path fill="%23a8e063" fill-opacity="0.7" d="M0,288L60,272C120,256,240,224,360,197.3C480,171,600,149,720,154.7C840,160,960,192,1080,197.3C1200,203,1320,181,1380,170.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
}

.main-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 2rem 1rem 4rem 1rem;
}

header.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem 0 1rem 0;
  background: transparent;
  z-index: 10;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 2rem;
  font-weight: bold;
  color: #388e3c;
  text-decoration: none;
}

.logo img {
  display: inline-block;
  vertical-align: middle;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: #388e3c;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 500;
  transition: color 0.2s;
}

.site-nav a:hover {
  color: #20551e;
}

form {
  width: 100%;
  max-width: 500px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 1.5rem;
}

form input,
form input[type="email"],
form input[type="text"],
form input[type="password"],
form input[type="file"],
form input[type="number"],
form select,
form textarea {
  width: 100%;
  padding: 1rem;
  border-radius: 1.2rem;
  border: 1.5px solid #b6a16b;
  font-size: 1.75rem;
  background: #f8fbf3;
  color: #20551e;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  /* add a drop shadow */
}

form input:focus,
form select:focus,
form textarea:focus {
  border-color: #6dbb43;
  outline: none;
  box-shadow: 0 0 0 2px #a8e06344;
}

form label {
  color: #388e3c;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

form button,
form input[type="submit"] {
  background: linear-gradient(90deg, #6dbb43 0%, #a8e063 100%);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 1.5rem;
  padding: 1rem 2.5rem;
  margin-top: 0.5rem;
  box-shadow: 0 2px 8px #b6a16b33;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  display: inline-block;
}

form button:hover,
form input[type="submit"]:hover {
  background: linear-gradient(90deg, #388e3c 0%, #6dbb43 100%);
  box-shadow: 0 4px 16px #6dbb4344;
  transform: translateY(-2px) scale(1.03);
}

table.table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1.5rem;
  background: #fff;
  box-shadow: 0 2px 12px #b6a16b22;
  border-radius: 1.2rem;
  overflow: hidden;
}

table.table thead tr {
  background: linear-gradient(90deg, #6dbb43 0%, #a8e063 100%);
}

table.table th {
  color: #fff;
  font-weight: bold;
  padding: 1rem 0.75rem;
  font-size: 1.15em;
}

table.table td {
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid #e0ffd6;
  color: #20551e;
}

table.table tbody tr:nth-child(even) {
  background: #f8fbf3;
}

table.table tbody tr:nth-child(odd) {
  background: #fff;
}

table.table tbody tr:hover {
  background: #e0ffd6;
}

.section-plot-layout {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
}

.plot-main {
  flex: 3 1 0;
  max-width: 100%;
}

.plot-sidebar {
  flex: 1 1 0;
  max-width: 25%;
}

.plot-cards {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.plot-card {
  background: linear-gradient(120deg, #e0ffd6 0%, #a8e063 100%);
  border-radius: 1.2rem;
  box-shadow: 0 2px 8px #b6a16b22;
  padding: 1.5rem 2rem;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.plot-card-title {
  font-size: 1.1rem;
  color: #388e3c;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.plot-card-value {
  font-size: 2rem;
  color: #20551e;
  font-weight: bold;
}

@media (max-width: 900px) {
  .section-plot-layout {
    flex-direction: column;
  }
  .plot-main, .plot-sidebar {
    max-width: 100%;
  }
  .plot-cards {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 700px) {
  header.site-header {
    flex-direction: column;
    gap: 1rem;
  }
  .site-nav ul {
    gap: 1rem;
  }
}

.homepage-hero {
  background: linear-gradient(120deg, #e0ffd6 0%, #a8e063 100%);
  padding: 3rem 1rem 2rem 1rem;
  border-radius: 1.5rem;
  margin: 2rem auto 2rem auto;
  max-width: 700px;
  box-shadow: 0 2px 16px #b6a16b22;
}

.homepage-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #20551e;
  margin-bottom: 1rem;
}

.homepage-grow {
  color: #388e3c !important;
  font-weight: 900;
  margin: 0 0.3em;
  font-size: 1.1em;
}

.homepage-hero p.lead {
  font-size: 1.3rem;
  color: #388e3c;
  margin-bottom: 0;
}

.homepage-features {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 2px 12px #b6a16b22;
  padding: 2.5rem 1.5rem 2rem 1.5rem;
  max-width: 900px;
  margin: 2rem auto;
}

.homepage-features-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.homepage-feature-card {
  background: linear-gradient(120deg, #f8fbf3 0%, #e0ffd6 100%);
  box-shadow: 0 2px 8px #b6a16b22;
  padding: 2rem 1.5rem;
  font-size: 2rem;
  min-width: 220px;
  max-width: 300px;
  flex: 1 1 220px;
  text-align: center;
}

.homepage-feature-card h3 {
  color: #388e3c;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.homepage-feature-card p {
  color: #20551e;
  font-size: 1.5rem;
}

@media (max-width: 700px) {
  .homepage-features-cards {
    flex-direction: column;
    gap: 1.2rem;
  }
  .homepage-hero {
    padding: 2rem 0.5rem 1.5rem 0.5rem;
  }
  .homepage-features {
    padding: 1.2rem 0.5rem 1rem 0.5rem;
  }
}