:root {
  --brand-grey-light: #d7d7d7;
  --brand-grey-dark: #424242;
  --brand-dark: #77c555;
  --brand-accent: #F8CD05;
  
  --primary: #77c555;
  --secondary-light:#CDE4AE;
  --secondary-dark:#58933e;
  --accent: #F8CD05;
  --accent-dark: #dbb400;
}

/* Sitewide Styles
======================================*/
h1 {
    font-weight: 800;
    margin: 20px 0;
    color: var(--brand-dark);
    font-size: clamp(3rem, 3.5vw, 6rem);
}
h2 {
    font-size: clamp(2rem, 1.5vw, 4rem);
    font-weight: 600;
    margin: 28px 0 5px;
    color: var(--secondary-dark);
}
h3 {
    font-size: clamp(1.5rem, 1.25vw, 3rem);
    margin: 20px 0 5px;
    font-weight: 700;
    color: var( --accent-dark);
}
h4 {
    font-size: 18px;
    line-height: 1.2;
}
blockquote {
    padding: 3%;
    background: aliceblue;
    font-size: 20px;
    color: #000000ad;
    text-transform: capitalize;
    border-radius: 5px;
}
.bold {
    font-size: clamp(3rem, 4vw, 6rem);
    font-weight: 800;
    margin: 28px 0 5px;
    color: var(--brand-dark);
    line-height: 1;
}
.semibold {
    font-size: clamp(2rem, 2.5vw, 45rem);
    font-weight: 600;
    margin: 28px 0 5px;
    color: var(--brand-dark);
    line-height: 1;
}
.whiteshadow {
    color: #ffffff;
    text-shadow: 2px 3px 3px black;
}
a.btn {
    display: inline-block;
    background-color: var(--secondary-dark);
    padding: 15px 20px;
    text-decoration: none;
    color: #ffffff;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 2px 2px 5px 2px #0000004f;
    transition: 0.2s ease-in;
    width: max-content;
    margin: 15px 0;
}
a.btn:hover {
  background-color: var(--secondary-light);
  color: #000;
}
.picredit {
    display: block;
    width: -webkit-fill-available;
    text-transform: uppercase;
    font-size: 12px;
}
figure.imgrt figcaption {
    line-height: 1.2;
    margin: 8px;
}
.imgrt {
    float: right;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}
.imglt {
    float: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: #487733;
}
/* TABLE Styles
======================================*/
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 20px 0;
  padding: 0;
  table-layout: auto;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: left;
  border: solid 1px #c3c3c3;
}

table th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #00407b;
    color: #fff;
}

@media screen and (max-width: 767px) {
  table {
    border: 0;
    width:100%;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: left;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  td:first-child {
    background: #003f77;
    color: #fff;
}
  table td:last-child {
    border-bottom: 0;
  }
}
/* Content List Styles
======================================*/
.content ol, .content ul {
    background: #58933e17;
    margin: 15px 0;
    padding: 22px;
    border-radius: 8px;
}
/* Page Image Styles
======================================*/
.pageimage {
    width: 100%;
}
.pageimage img {
    width: -webkit-fill-available;
}
/* Key Takeaway Styles
======================================*/
.keytakebox {
    padding: 15px;
    background: #ffcd050d;
    border-radius: 15px;
}
.keytakebox h2 {
    font-variant-caps: all-petite-caps;
    margin: 0 0 8px 0;
    display: block;
    border-bottom: solid 1px;
}
/* Header Styles
======================================*/
.headerwrap {
    padding: 5px 0;
}
.tagbox h2 {
    font-size: clamp(1.5rem, 2vw, 3rem);
    font-weight: 600;
}
/* Hero Styles
======================================*/
.bannerwrap {
    background-image: url(/assets/uploads/images/microgreen-radish-sprouts.webp);
    background-size: cover;
    height: 25vw;
}
/* Page Banner Styles
======================================*/
.pghdrtext {
    min-height: 24vh;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: center;
}
.pghdrtext h1 {
    font-size: clamp(3rem, 3vw, 4rem);
    color: #e7e7e7;
    font-weight: 700;
    text-shadow: 3px 3px black;
    padding: 25px 0;
}
/* Home section Styles
======================================*/
.mailbarwrap,.pgbnrwrap {
    padding: 2vw;
    background-image: url(/assets/uploads/images/fpdl.in-microgreens-with-seeds-roots-germination-microgreens-169016-35093-medium.jpg);
    background-size: cover;
    background-position: center;
    background-color: #215529;
    background-blend-mode: multiply;
}
.mailbarwrap h2 {
    font-size: clamp(3rem, 4vw, 6rem);
    color: #77c555;
}
.mailbarwrap p {
    color: #fff;
    font-size: 25px;
}
.articlewrap {
    background: #f3fff0;
}
.sectionwrap {
    padding: 3vw;
}
/* Blog post list Styles
======================================*/
.titlebox {
    min-height: 80px;
    display: flex;
    align-items: center;
    background: #dddddd;
    padding:8px;
}
.titlebox h2 {
    margin:0;
}
.post-excerpt {
    padding: 15px 0;
}
.pastwrap {
    margin: 5px 0;
}
.imgbox {
    margin:8px;
}
.imglink {
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    cursor: pointer;
}
.imglink:hover {
    background: #4e4e4e26;
}
/* Nav Styles
======================================*/
.headerwrap {
    z-index: 999999;
    position: sticky;
    top: 0;
    background:#ffffff;
}
.headerwrap .cssmenu {
    margin: 18px 0 0 18px;
}
.cssmenu > ul > li > a {
    color: #5b8727;
}
.cssmenu > ul > li > a:hover {
    background: none;
    border-bottom: 3px solid #ffcd05;
}
.cssmenu > ul > li:hover > ul {
    border-bottom: 3px solid #ffcd05;
}
/* BREADCRUMB Styles
======================================*/
.pagination, ol.breadcrumb {
    margin: 0;
    padding: 20px 0;
}
.page-item, .breadcrumb li {
    display: inline-flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 10px;
    margin: 0 3px;
    font-weight: 600;
    background: #d7d7d7;
    border-radius: 3px;
}
/* Box Slider Styles
======================================*/
.bxslide {
    background: var(--brand-accent);
}
.slideimg {
    height: clamp(250px, 68vw, 600px);
    background-size: cover;
    background-position: center;
}
.btn.bnrbtn {
    margin: 10px 0;
    max-width: 265px;
    text-align: center;
}
.slide {
    padding:0;
}
.bxslidetext {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
    padding: 10px;
    margin: auto;
}
.bxslidetext h2 {
    color: var(--secondary-dark);
    font-size: clamp(2.5rem, 3.5vw, 6rem);
    line-height: 1;
}
.bxslidetext p {
    font-size: clamp(1rem, 2.5vw, 2rem);
    line-height: 1.2;
}
@media only screen and (max-width: 767px) {
    .bxslidetext {
        text-align: center;
    }
    .btn.bnrbtn {
    margin: 10px auto;
    }
}
/* First Section Styles
======================================*/
.firstSecWrap {
    padding: 10vh 0;
    margin: 8vh 0;
    background: #fff;
}
.firstSecText {
    padding: 2vh 0;
}
.firstSecText p {
    padding: 10px;
}
.firstSecLink {
    text-align: center;
}
/* GALLERY Styles
======================================*/
.GallerImage {
    min-height: 200px;
    background-position: top center;
    background-size: cover;
    margin: 8px;
    cursor:pointer;
}
/* Intro text box Styles
===========================================*/
.introtext {
    background: aliceblue;
    padding: 20px;
    margin: 10px 0 20px;
}

/* Modal Styles
===========================================*/

.galimagebox {
    padding: 10px;
}
.modal {
z-index:1;
display:none;
padding-top:10px;
position:fixed;
overflow-y: hide;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.8)
}


.modal-content-wrapper {
display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100%;
    width: 100%;
}
.modal-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
}

.modal-row {
    align-self: center;
    background-size: cover;
    background-position: center;
    display: flex;
    position: relative;
    justify-content: end;
}


#img01 {
    display: block;
    margin: 0px;
    width: fit-content;
    height: fit-content;
    
}

.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden
}
.close {
    display: flex;
    background-color: rgb(255 255 255 / 66%);
    padding: 8px;
    border-radius: 34px;
    line-height: 0.6;
    position: absolute;
    height: fit-content;
    font-size: clamp(2rem, 2vw, 4rem);
    color: black;
    transition: .5s ease;
    margin: 5px;
}
.btn-wrapper {
    margin: auto;
    align-self: center;
    display: flex;
    position: absolute;
    /* height: 100%; */
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.prev-img, .next-img{
    background-color: rgb(213 201 201 / 26%);
    padding: 8px;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.6;
    font-size: clamp(2rem, 5vw, 8rem);
    color: #fffefe;
    transition: .5s ease;
}

.prev-img:hover, .next-img:hover, .close:hover{
        background-color: rgb(2 2 2 / 99%);
    
}

.container1 {
width:200px;
display:inline-block;
}
.modal-content, #caption {   
  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
/* Contact Form Section Styles
======================================*/
.contactctawrap {
    background: #cacaca;
}
.contactctaleft {
    background: #cacaca;
    align-items: end;
    align-self: center;
}
.contactctaright {
    background: #151515;
    padding: 35px 15px;
}
.contactctatext {
    max-width: 57%;
    padding: 10px;
}
.contactctaform {
    padding: 10px 10px 10px 25px;
    max-width: 65%;
}
.contactctaform label {
    color: #fff;
}
@media all and (max-width: 768px) {
    .contactctatext, .contactctaform {
        max-width: 100%;
    }
}
/* UL LI Column List
============================================*/
ul.listcol2 li, ul.listcol3 li, ul.listcol4 li {
  margin: 0 !important;
  width: 100%;
}
ul.listcol2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2
}
ul.listcol3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}
ul.listcol4 {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}
/* MOBILEPHONES*/
@media only screen and (max-width: 767px) {
  ul.listcol2, ul.listcol3, ul.listcol4 {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
  }
}
/* Jump Boxes Styles
======================================*/
.jumpbox {
    padding: 20px;
}
.jumpbox img {
    width: -webkit-fill-available;
}
/* Footer Styles
======================================*/
.footerwrap {
    background-image: url(/assets/uploads/commercial-sign-company.jpg);
    background-blend-mode: multiply;
    background-color: var(--brand-grey-dark);
    padding: 50px 0;
    margin-top: 35px;
}
.footer, .footer a, .footer p {
    color: var(--primary);
}
.subfooterwrap {
    text-align: center;
    background-color: var(--secondary-dark);
    color: #e3e3e3;
}


/* Author Box Styles
==========================*/

.authbox {
    width: 100%;
    border-radius: 16px;
    background-color: #e5e5e5;
    padding: 10px 0;
    /*border: solid 2px var(--brand-accent);*/
}

.author-img {
    margin: auto;
}

.author-img img {
    max-width: 240px;
    border-radius: 50%;
    margin: 2px;
}

.author-img h3 {
    text-align: center;
    text-transform: uppercase;
    margin: 12px 0 0 0;
    font-size: clamp(1.5rem,1.5vw,1.8rem);
}

.author-img p {
    text-align: center;
    font-style: italic;
    margin: 2px;
}

.author-info {
    padding: 10px;
}

.author-info h3 {
    font-size: clamp(1.3rem, 1.5vw, 2rem);
    color: var(--brand-dark);
    text-transform: uppercase;
    margin: 0 0 8px 0;
}

.author-info p {
    text-align: justify;
    line-height: 1.8;
    font-size: 1rem;
}

.auth-links {
    flex-wrap: wrap;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.auth-links a i {
    color: #626262;
    font-size: 2rem;
}
.auth-links a i:hover {
    color: #000;
}

.auth-links .weblink {
    font-size: 1.8rem;
}


/* FAQs Styles
=========================*/
.faqbox {
    background: #0000001c;
    border: solid 1px #0000002b;
    margin: 8px 0;
    padding: 8px;
}
span.q {
    display: flex;
    background: #000000b5;
    width: 50px;
    height: 40px;
    justify-content: center;
    align-items: center;
    margin: 6px;
    color: #fff;
}
.faqq {
    margin: 0;
    padding: 0;
    color: #000000a3;
    flex-basis: 100%;
}
details > summary {
    color: var(--brand-accent);
    display: flex;
    border-radius: 4px;
    font-size: 24px;
    cursor: pointer;
    justify-content: space-between;
    list-style: none;
    align-items: center;
}
details[open] > summary {
  
}

details > summary::after {
    display: flex;
    content: "+";
    justify-content: center;
    align-items: center;
    margin: 6px;
    font-size: 25px;
    font-weight: 600;
}

details[open] > summary::after {
    display: flex;
    content: "-";
    justify-content: center;
    align-items: center;
}

details > summary::-webkit-details-marker {
  display: none;
}