ul.imagestyle {
   list-style-image: url('images/ul.png');
}

body {
   background-color: #f1f1f1;
}

div.horizontalRule {
   min-height: 1px;
   clear: both;
   width: 100%;
   border-bottom: 1px solid #d1d1d1;
   height: 1px;
   margin-top: 1px;
   margin-bottom: 0px;
}

td.header {
   border-right: 1px solid #d1d1d1;
   width: 20%;
   cursor: pointer;
}

div.copyright {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 12px;
   font-style: normal;
   margin-left: 340px;
   vertical-align: bottom;
}

td.tab {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 18px;
   text-transform: capitalize;
   text-indent: inherit;
   text-align: justify;
   color: #006B24;
   margin-left: 2px;
   background-color: #f1f1f1;
   width: 50px;
   height: 40px;
   padding-left: 30px;
   cursor: pointer;
}

td.tab:hover {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 18px;
   text-transform: capitalize;
   text-indent: inherit;
   text-align: left;
   color: #f1f1f1;
   margin-left: 2px;
   background-color: #A9A9A9;
   width: 50px;
   height: 40px;
   padding-left: 30px;
   cursor: pointer;

}

td.selected {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 18px;
   text-transform: capitalize;
   text-indent: inherit;
   text-align: left;
   color: #f1f1f1;
   margin-left: 2px;
   background-color: #A9A9A9;
   width: 50px;
   height: 40px;
   padding-left: 30px;
   cursor: pointer;

}

td.content {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 20px;
   vertical-align: top;
}

p.headertext {
   margin-left: 10px;
   font: 300 35px source-sans-pro, sans-serif;
   color: #768074;
}

p.headertext2 {
   margin-left: 20px;
   font: 300 25px source-sans-pro, sans-serif;
   color: #6C6C6C;
}

p.headertext3 {
   margin-left: 20px;
   font: 300 20px source-sans-pro, sans-serif;
   color: #6C6C6C;
}

p.regulartext {
   margin-left: 10px;
   font: 300 15px source-sans-pro, sans-serif;
   color: #6C6C6C;
   text-align: justify;
   padding-left: 10px;
   padding-right: 10px;
}


li.regulartext {
   margin-left: 10px;
   font: 200 12px source-sans-pro, sans-serif;
   color: #6C6C6C;
   text-align: justify;
   padding-left: 10px;
   padding-right: 10px;
   src: url(images/ul.png);
}

li.regulartextgreyheader {
   margin-left: 10px;
   font: 200 18px source-sans-pro, sans-serif;
   color: #6C6C6C;
   text-align: justify;
   padding-left: 10px;
   padding-right: 10px;
   color: #6C6C6C;
}

li.regulartextgrey {
   margin-left: 0px;
   font: 200 15px source-sans-pro, sans-serif;
   color: #6C6C6C;
   text-align: justify;
   padding-left: 10px;
   padding-right: 10px;
   color: #6C6C6C;
   list-style-type: none
}

li.regulartextmedium {
   margin-left: 10px;
   font: 200 17px source-sans-pro, sans-serif;
   color: #6C6C6C;
   text-align: justify;
   padding-left: 10px;
   padding-right: 10px;
   src: url(images/ul.png);
}

li.regulartextlarge {
   margin-left: 10px;
   font: 200 20px source-sans-pro, sans-serif;
   color: #6C6C6C;
   text-align: justify;
   padding-left: 10px;
   padding-right: 10px;
   src: url(images/ul.png);
}

font.semibold {
   font-weight: 500;
}

table.tabstyle {
   width: 100%;
}

td.tdtabstyle {
   width: 50%;
   vertical-align: bottom;
}

table.tab-group {
   width: 100%;
}

img.contactus {
   vertical-align: center;
   padding-top: 1px;
}

img.architecture {
   vertical-align: center;
   margin-left: 100px;
}

ul.imagestyle {
   list-style-image: url('../images/ul.png');
}

html,
body {
   height: 100%;
   margin: 0;
   display: flex;
   flex-direction: column;
}

.toplevel {
   flex: 1;
   display: flex;
   flex-direction: column;
}

.tabstyle {
   width: 100%;
   border-collapse: collapse;
}

.mainSection {
   flex: 1;
   padding: 20px;
   box-sizing: border-box;
   min-height: 500px;
   /* Fixed height for main section */
}

.mainSection {
   display: flex;
   /* Flexbox to align the content and the bar */
   padding: 20px;
}

.mainSection img {
   display: block;
   /* Makes the image a block element */
   margin-left: auto;
   /* Automatically adjusts left margin */
   margin-right: auto;
   /* Automatically adjusts right margin */
}

.verticalBar {
   width: 5px;
   /* Width of the vertical bar */
   background-color: green;
   height: 100%;
   /* Full height of the main section */
   margin-right: 20px;
   /* Spacing between the bar and content */
}

.content {
   flex: 1;
   /* Allows content to take the remaining space */
}


.footer {
   font-size: 10px;
   text-align: center;
   padding: 0px;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   background-color: #f1f1f1;
   position: sticky;
   bottom: 0;
   width: 100%;
   box-sizing: border-box;
   border-top: 0px solid #ccc;
}

.tab-group .selected {
   background-color: #ccc;
}

/* Remove bullets only from lists with the 'no-bullets' class */
.no-bullets {
   list-style-type: none;
   padding-left: 0;
}



/* contact us form */


/* General form styling */
.form-section {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   background-color: #f9f9f9;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   margin: 20px auto;
   /* Center the form */
   max-width: 600px;
   /* Set a fixed max width */
}

/* Flexbox for form rows */
.contact-form .form-row {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 20px;
   /* Space between rows */
}

/* Labels and inputs spacing */
.contact-form label {
   width: 100%;
   margin-bottom: 5px;
   font: 300 15px source-sans-pro, sans-serif;
   color: #6C6C6C;
   text-align: justify;

}

/* Input and textarea styling */
.contact-form input,
.contact-form select,
.contact-form textarea {
   width: 100%;
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 4px;
   background-color: #fefefe;
   box-sizing: border-box;
   margin-bottom: 10px;
   font: 300 15px source-sans-pro, sans-serif;
   color: #6C6C6C;
   text-align: justify;

}

/* Half-width fields for two-column layout */
.contact-form .form-row.half-width {
   width: 48%;
   /* Each field takes 48% of the row */
   margin-right: 4%;
   /* Add spacing between the columns */
}

.contact-form .form-row.half-width:last-child {
   margin-right: 0;
   /* Remove margin for the last column */
}

/* Full-width fields */
.contact-form .form-row.full-width {
   width: 100%;
}

/* Textarea specific styling */
.contact-form textarea {
   resize: vertical;
   /* Allow resizing only vertically */
   min-height: 100px;
}

.contact-form button {
   background-color: #006B24;
   /* Same green as the tabs */
   color: #ffffff;
   /* White text */
   border: none;
   /* Remove default border */
   border-radius: 4px;
   /* Rounded corners */
   padding: 10px 20px;
   /* Padding for a larger clickable area */
   font-size: 16px;
   /* Adjust font size */
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   cursor: pointer;
   /* Change cursor to pointer */
   margin-top: 10px;
   transition: background-color 0.3s ease, transform 0.2s ease;
   /* Smooth hover effects */
}

.contact-form button:hover {
   background-color: #004b1a;
   /* Darker green on hover */
   transform: scale(1.05);
   /* Slightly enlarge on hover */
}

.contact-form button:active {
   background-color: #003b13;
   /* Even darker green when clicked */
   transform: scale(0.98);
   /* Slightly shrink on click */
}

.submit-container {
   text-align: center;
}

/* contact us form */


/* navigation bar */

div.toplevel {
   margin-left: 200px;
   margin-top: 0px;
   width: 70%;
   background-color: #ffffff;
   border: 1px solid #ebebeb;
}

div.topleveltech {
   margin-left: 200px;
   margin-top: 0px;
   width: 70%;
   height: auto;
   background-color: #ffffff;
   border: 1px solid #ebebeb;
}

div.mainSection {
   clear: both;
   width: 100%;
   max-width: 100%;
   height: auto;
   margin-top: 1px;
   margin-bottom: 5px;
   display: flex;
}


.sidenav {
   width: 20%;
   min-width: 20%;
   position: sticky;
   background-color: #f1f1f1;
   overflow-x: hidden;
   padding-top: 10px;
}

.sidenav a {
   padding: 6px 8px 6px 16px;
   text-decoration: none;
   font-size: 25px;
   color: #006B24;
   display: block;
   font: 300 source-sans-pro, sans-serif;
}

.sidenav a:hover {
   color: #f1f1f1;
   background-color: #ccc;
}

.sidenav a:focus,
.sidenav a:active {
   color: #f1f1f1;
   background-color: #ccc;
}

.sidenav a.active {
   color: #f1f1f1;
   background-color: #ccc;
}

.rightnav {
   margin-left: 5;
   max-height: 500px;
   overflow-y: auto;
}

/* navigation bar */