@import "jquery.fancybox.css";
@import "base.css";
@import "skeleton.css";
@import "fonts.css";

html, body {
    height: 100%;
}

body {
    background: none;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    width: 100%;
    display: table;
}

#content {
    display: table-row;
    height: 100%;
    width: 100%;
}

#content:after {
    content: "";
    display: block;
}

h1 {
    color: #fff;
    font-family: 'copperplate_gothic';
    font-size: 30px;
    letter-spacing: 0.01em;
    padding-top: 10px;
    text-align: center;
    text-shadow: -1px 1px 10px #333333;
    text-transform: uppercase;
}

h2 {
    color: #a8f9e0;
    font-family: "Courier New", Courier, monospace;
    font-size: 26px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

/* #Nav */
header,
#header {
    background: url(../images/sky_bg.jpg) no-repeat center bottom;
    background-size: cover; /* Ensure background covers the area */
    position: relative; /* Allows child elements to be positioned relative to this container */
}

header #nav-container {
    padding: 16px 0 0;
    width: 100%;
    max-width: 1100px;
    cursor: pointer;
    margin: 0 auto;
}

#logo {
    position: absolute;
    bottom: -34px;
    margin: 0;
    padding: 0;
    z-index: 9999;
    width: 130px;
}

#logo img {
    width: 100%;
    height: auto;
}

header nav > ul {
    margin: 0 auto;
}

header nav > ul > li {
    display: inline-block;
    padding: 0 0 6px;
    margin: 0;
    font-family: 'copperplate_gothic';
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 14px;
    position: relative;
    z-index: 2;
    background: #1b2877;
}

header nav > ul > li > a {
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    text-decoration: none;
    padding: 9px 0 0;
    height: 18px;
    width: 156px;
    text-align: center;
    display: inline-block;
    background: #1b2877;
}

header nav a,
header nav a:visited {
    color: #fff;
}

header nav > ul > li:hover,
header nav > ul > li.active {
    background: #000;
}

header nav > ul > li > a:hover,
header nav > ul > li.active a {
    background: #1b2877;
    color: #fff;
}

/* Content */
#content-copy {
    height: auto;
}

/* Original background color: green */
#text-container {
    /* background: #a8f9e0; */
    background: none; /* New background color */
    padding: 30px 10px;
    color: #000;
    font-size: 18px;
    line-height: 22px;
    text-align: left;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto 25px;
}

#text-container.row {
    margin-bottom: 0;
}

#text-container.contact {
    background: rgba(211, 211, 211, 0.2); /* Light gray with 70% opacity */
}

.container .seven.columns.copy {
    width: 475px;
}

.container.contact .seven.columns.copy {
    min-height: 350px;
    width: auto;
    padding: 10px;
    background: #fff;
}

.images-left,
.images-right {
    position: absolute;
    top: 0;
    clear: both;
    max-width: 180px;
}

.images-left {
    left: -180px;
}

.images-right {
    right: -180px;
}

.images-left img,
.images-right img {
    display: block;
    width: 100%;
    height: auto;
}

.services p,
.services ul.disc {
    clear: both;
}

.services ul.disc li {
    width: 3500px;
}

.services ul.disc li:nth-child(odd) {
    margin-right: 30px;
}

/* Styles specific to the services page */

/* Text container styles specific to the services page */

#text-container.services ul.disc li {
    color: #fff !important; /* Change text color to white */
}

.four.columns {
    text-align: center;
}

.text-container-MG {
    position: relative;
    padding: 20px; /* Adjust padding as needed */
}

.text-container-MG::before {
    content: "";
    background-image: url('images/MGS1.jpg'); /* Background image path */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 400px; /* Scale the background image to fit within the container */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
    z-index: -1;
    opacity: 0.5;
}

.text-container-SC {
    position: relative;
    padding: 20px; /* Adjust padding as needed */
}

.text-container-SC::before {
    content: "";
    background-image: url('images/cable.jpg'); /* Background image path */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 300px; /* Scale the background image to fit within the container */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
    z-index: -1;
    opacity: 0.5;
}

.text-container-BL {
    position: relative;
    padding: 20px; /* Adjust padding as needed */
}

.text-container-BL::before {
    content: "";
    background-image: url('images/BL1.jpg'); /* Background image path */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 400px; /* Scale the background image to fit within the container */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
    z-index: -1;
    opacity: 0.5;
}

.text-container-OS {
    position: relative;
    padding: 20px; /* Adjust padding as needed */
}

.text-container-OS::before {
    content: "";
    background-image: url('images/OS1.jpg'); /* Background image path */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 300px; /* Scale the background image to fit within the container */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
    z-index: -1;
    opacity: 0.5;
}

ul.disc {
    column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    padding-left: 260px;
}

/* Styles specific to the contact page */

.text-container-C {
    position: relative;
    padding: 20px; /* Adjust padding as needed */
    height: 430px; /* Ensure the height matches the desired display area */
    background-image: url('images/Contact_MGC.jpg'); /* Ensure this path is correct */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
}

.text-container-C::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ensure it covers the width of the container */
    height: 100%; /* Ensure it covers the height of the container */
    z-index: -1;
    opacity: 0.7;
    background-image: url('images/Contact_MGC.jpg'); /* Ensure this path is correct */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
}

/* Ensure this is applied */
.text-container-C h2 {
    color: #fff; /* Change the color of the heading to white */
}

/* Photo Gallery Styles */

/* Photo Gallery Container */
.photo-gallery {
    position: relative; /* Allows absolute positioning inside this container */
    z-index: 10; /* Makes sure the photo is on top of the background */
    padding: 20px;
    text-align: center;
}

/* Thumbnail */
.photo-gallery img {
    max-width: 100%;
    height: auto;
    border: 2px solid #fff; /* Optional: Adds a border around the image */
    border-radius: 8px; /* Optional: Rounds the corners of the image */
}