/* Basic Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Got Monitoring Main Settings */
html,
body {
    background-color: white;
    color: navy;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Layout in Internet Explorer versions*/
.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* This rule sets the top and bottom margins of elements with the class "row" to 0 (no margin) */
/* This rule sets the maximum width of elements with the class "row" to 1140 pixels. */
.row {
    margin: 0 auto;
    max-width: 1140px;
}

/* Defines a set of styling rules for all <section> elements in your HTML document. */
section {
    padding: 15px 0;
}

/* This is a CSS class selector. It selects all HTML elements that have the class attribute set to "box." */
/* So, any HTML elements with the class "box" will have a padding of 1% applied to them */
.box {
    padding: 1%;
}

/* Headings defaults */
/* Defines styling rules for multiple HTML heading elements (h1, h2, h3, and h4). Let's break down what this code does:

    h1, h2, h3, h4:
        These are CSS selectors for HTML heading elements with the tags h1, h2, h3, and h4. It selects all of these heading elements on the web page.

    font-weight: 600;:
        The font-weight property sets the thickness or boldness of the text characters. In this case, it sets the font weight to 600, which is typically a bold or semi-bold font weight. This makes the text within these headings appear bold.

    color: navy;:
        The color property sets the text color. Here, it sets the text color to "navy," which is a dark blue color. */
h1,
h2,
h3,
h4 {
    font-weight: 600;
    color: navy;
}

/* Headings "Got Monitoring" text */
h1 {
    color: white;
    font-size: 300%;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
    margin-top: 5px;
    word-spacing: 3px;
}

/* Main group headers in the center of a page Header */
h2 {
    font-size: 180%;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 30px;
    margin-top: 0px;
    text-align: center;
    word-spacing: 2px;
}

/* Adds a ---Line in the center--- */
h2:after {
    background-color: navy;
    content: " ";
    display: block;
    height: 2px;
    margin: 0 auto;
    margin-top: 30px;
    width: 100px;
}

/* Adds a --- Unlineline ---- */
h3 {
    font-size: 180%;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 30px;
    margin-top: 0px;
    text-align: center;
    word-spacing: 2px;
    text-decoration: underline;
}

/* Smaller text size */
h4 {
    color: navy;
    font-size: 120%;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 30px;
    margin-top: 0px;
    text-align: center;
    word-spacing: 2px;
}

/* Changes backgroud to Navy */
h4:after {
    background-color: navy;
    content: " ";
    display: block;
    height: 2px;
    margin: 0 auto;
    margin-top: 15px;
    width: 100px;
}

/* Smaller text size */
h5 {
    color: navy;
    font-size: 80%;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0px;
    margin-top: 0px;
    text-align: left;
    word-spacing: 2px;
}

/* Smaller font size */
h6 {
    color: navy;
    font-size: 80%;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0px;
    margin-top: 0px;
    text-align: left;
    word-spacing: 2px;
}

/* Smaller font color white */
h7 {
    color: white;
    font-size: 80%;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0px;
    margin-top: 0px;
    text-align: left;
    word-spacing: 2px;
}

/* Smaller text size */
h8 {
    color: navy;
    font-size: 80%;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0px;
    margin-top: 0px;
    text-align: center;
    word-spacing: 2px;
}


/* Smaller font color white */
h9 {
    color: white;
    font-size: 180%;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 30px;
    margin-top: 0px;
    text-align: left;
    word-spacing: 2px;
    }

 
/* Paragraphs */
/* Educational Training Description */
.long-copy {
    line-height: 145%;
    width: 70%;
    margin-left: 15%;
}

/* Training Class <div class="col span-1-of-4 box"> Header */
.box {
    padding: 0%;
}



/* Training Class 01-04 Paragraphs inside the box */
.box p {
    font-size: 90%;
    line-height: 145%; 
}

/* Header */
header {
    background-image: url(images/WaterBackGround.jpg);
    background-size:cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;
}

.header-text-box {
    position: absolute;  
    width: auto;
    top: 10px;
    left: 10px;
}

.box p {
    font-size: 90%;
    line-height: 145%;
}

/* Buttons on Main Page */

.button:link,
.button:visited {
    display: inline-block;
    padding: 10px 30px;
    font-weight:600%;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: navy;
    margin-right: 15px;
    border-radius: 20px;
    border: 2px solid white;
    transition: background-color 1.0s, border 1.0s, color 1.0s;
}

.button:hover,
.button:active{
    background-color: white;
    color: navy;
    border: 2px solid navy;
}

.venders-showcase{
    list-style: none;
    width: 100%;
}
    
.venders-showcase li{
    display: block;
    float:left;
    width: 25%;
}

.vender-photo{
    width: 100%
    margin: 1%;
    overflow: hidden;
    background-color: white;
 }

.vender-photo img{
    opacity: 0.7;
    width: 100%;
    height: auto;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

.vender-photo img: hover{
    opacity: 1;
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
}

.section-features .long-copy {
    margin-bottom: 30px;
}

.large-white-text {
    font-size: 32px; /* Adjust the font size as needed */
    color: white;
}

.custom-button-list {
    list-style-type: none;
    padding: 0;
}

.custom-button-list li {
    margin-bottom: 10px; /* Adjust the spacing as needed */
}

.custom-button-list a.button {
    display: inline-block; /* Change from "block" to "inline-block" */
    text-align: left;
    padding: 5px; /* Add padding for spacing */
}

/* Center the specified image */
.centered-image {
    max-width: 100%; /* Ensure the image doesn't exceed its container's width */
    height: auto; /* Maintain the image's aspect ratio */
    display: block; /* Remove any extra spacing below the image */
    margin: 0 auto; /* Center the image horizontally */
}

/* Apply styles to .long-copy within .next-service */
.next-service .long-copy {
    margin-bottom: 30px;
}

/* Apply styles to .long-copy within .daily-cycles */
.daily-cycles .long-copy {
    line-height: 145%;
    width: 70%;
    margin-left: 15%;
}

/* Apply styles to .long-copy within .next-service */
.next-service .long-copy {
    margin-bottom: 30px;
}

/* Apply styles to .long-copy within .daily-cycles */
.daily-cycles .long-copy {
    line-height: 145%;
    width: 70%;
    margin-left: 15%;
}

/* Limit the width of images within columns */
.vender-photo img {
    max-width: 100%;
    height: auto;
}

/* Adjust width for .box elements to create three columns */
.next-service .box {
    width: 33.33%;
    float: left;
}

/* CSS for the image container */
.image-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px; /* Adjust the maximum width as needed */
    margin: 0 auto;
}

/* CSS for the columns */
.column {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    width: 50%;
    text-align: center; /* Center the content within columns */
}

/* Additional styles for the images if needed */
.column img {
    max-width: 100%; /* Make sure images don't exceed column width */
}