/* Main Page */
        p, div, table, tbody, tr, td, span, blockquote, a, img, ul, li, fieldset {
            border: 0;
            outline: 0;
            font-family: Arial, Helvetica, Sans-Serif;
            color: #2e2f2f;
            vertical-align: baseline;
            list-style: none;
            text-decoration: none;
            line-height: 1.5em;
            margin: 0;
            padding: 0;
            text-align: left;
        }

        h4.headers { 
            font-family: 'OstrichSansBlack';
            color: #741a2f;
            vertical-align: baseline;
            list-style: none;
            text-decoration: none;
            margin: 0;
            padding: 0;
            text-align: left;
            font-size: 28px;
        }
        h4.info_headers { 
            font-family: 'OstrichSansBlack';
            color: #2e2f2f;
            vertical-align: baseline;
            list-style: none;
            text-decoration: none;
            margin-bottom: 1%;
            padding: 0;
            text-align: left;
            font-size: 28px;
        }

        h3 {
            font-family: 'OstrichSansBlack';
            font-weight: bold;
            color: #741a2f;
        }


/* Menu specific */
        .menu a{
            color: #FFF;
        }
        .email_link{
           color: #2e2f2f;
	       text-decoration: none;
        }

/* Page Container */
            body {
                background:#741a2f;
                font-size:14px;
                background-image: url("../images/bg-02.png");
                background-attachment: fixed;body
                display: flex;
                justify-content: center;
	
            } 

           div#wrap {
                width: 1080px;
                position: relative;
                margin: 0 auto !important;
                max-width: 100%; /* Prevents overflow on smaller screens */
            }

            /* For landscape phones (wider than 768px but less than 1024px) */
            @media screen and (max-width: 1024px) and (orientation: landscape) {
                div#wrap {
                    width: 90vw; /* Uses 90% of the viewport width */
                    max-width: 1280px; /* Prevents excessive stretching */
                }
            }

            /* For smaller devices like portrait phones */
            @media screen and (max-width: 767px) {
                div#wrap {
                    width: 95vw; /* Uses most of the screen width */
                    padding: 10px; /* Adds slight spacing for aesthetics */
                }
            }



/* Page */
        div#container {
            width: 900px; /* Increased by 100px */
            float: right;
            padding-right: 20px;
            left: 65px;
            position: relative;
            padding-top: 0;
            background: #dcddde;
        }

        div.page {
            margin-bottom: 5px solid #dbdbdb;
            margin-bottom: 0;
            padding-top: 20px;
        }

        div.page_content {
            padding: 15px 0 40px 25px;
        }

        div#container h3.page_title {
            font-family: 'OstrichSansBlack';
            margin-left: 25px;
            font-size: 35px;
            color: #000;
            border-bottom: 1px solid #2e2f2f;
            /*text-shadow: 1px 1px 2px #a7a9ac;*/
            line-height: 2;
            padding: 5px 0 0px 0px;
        }


/* Nav sidebar */
        div#sidebar {
            width: 220px;
            height: 100%;
            float: left;
            background: #2c2c2c;
            border-right: 1px solid #2e2f2f;
            position: fixed;
            padding: 10px 2px 0 2px;
        }

/* slider */
        .gf-slider .slides li {
            height: 400px; /* Set the desired height */
            width: 100%; /* Make the <li> fill the width */
            overflow: hidden; /* Prevent image overflow */
        }

        .gf-slider .slides li img {
            width: 100%; /* Make the image fill the width */
            height: 100%; /* Make the image fill the height */
            object-fit: cover; /* Maintain aspect ratio and cover the space */
        }

        .gf-slider .flex-caption {
            /* Adjust caption styling as needed */
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
            color: white;
            padding: 10px;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
        }


/* Logo */
            a#logo {
                text-align:center;
                display:block;
                border-bottom: 0px solid #353535;
                width:100%;
                position:relative;
                z-index:999;
                opacity:1;
                -webkit-transition:all 300ms;
                -moz-transition:all 300ms;
                -o-transition:all 300ms;
                transition:all 300ms;
                padding: 15px 0 5px 0;
            }
            ul#navigation {
                margin-top:25px;
                margin-right:-5px;
                position:relative;
                width:220px;
                z-index:999
            }
            ul#navigation li {
                border:none;
                background:none;
                margin:0;
                padding:0
            }
            ul#navigation li a:link, ul#navigation li a:visited {
                text-decoration:none;
                font-family:'OstrichSansBlack', Arial, sans-serif;
                margin-bottom:1px;
                width:auto;
                font-size:20px;
                text-align:left;
                padding-left:10px !important;
                display:block;
                transition:all 200ms;
                -webkit-transition:all 200ms;
                -moz-transition:all 200ms;
                -o-transition:all 200ms;
                padding:5px 10px 5px 0
            }
            ul#navigation li a:hover, ul#navigation li a.active {
                background:#1b1b1b;
                color:#FFF;
            }


/* icons for services*/
        .icon_left {
            margin-top:0%; 
            margin-right:10px; 
            /*filter: invert(100%);*/
            border:none!important

        }
        .icon_right {
            margin-top:0%; 
            margin-right:10px; 
            /*filter: invert(100%);*/
            border:none!important

        }

/* Testimonials */
 /* Ensure the testimonial container is responsive */
        .slider-container {
            display: flex;
            overflow: hidden;
            position: relative;
            width: 100%;
            margin: 0 auto;
        }

        .testimonial {
            display: none; /* Hide all testimonials by default */
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            text-align: left;
            background-color: rgba(255, 255, 255, 0.3); /* White with 30% opacity */
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .testimonial.active {
            display: block !important; /* Show only the active testimonial */
        }


        .testimonial .description {
            white-space: normal;
            word-wrap: break-word;
            word-break: break-word;
        }

        .testimonial .author {
            font-weight: bold;
            color: #333;
            margin-top: 10px;
        }

        /* Controls - Previous and Next buttons */
button.prev, button.next {
    position: relative; /* Change from absolute to relative */
    top: auto; /* Remove the top alignment */
    transform: none; /* Reset the transform */
    display: inline-block; /* Ensure they are inline */
    margin: 20px 10px; /* Space them out below the testimonials */
    background-color: #152E7F; /* Theme color */
    color: white;
    font-size: 18px;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
}

/* Center the navigation buttons below the testimonial */
.controls {
    text-align: center;
    margin-top: 10px;
}

/* Change button appearance on hover */
button.prev:hover, button.next:hover {
    background-color: #0e1f5b;
}


        button.prev {
            left: 10px;
        }

        button.next {
            right: 10px;
        }

        button:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }


/*  samples */
            div#works {
                margin-top: 10px;
                overflow:visible!important;
                width:725px;
            }
            div#works img {
                width:28%;
                min-height:150px;
                position:relative;
                margin-right:26px;
                margin-bottom:18px;
                float:left;
                cursor:pointer;
                transition:all 500ms;
                -webkit-transition:all 500ms;
                -moz-transition:all 500ms;
                -o-transition:all 500ms;
                background:#fff;
            }
            div#works img:hover {
                top:-10px!important;
                opacity:.5!important
            }
            ul#works_filter {
                margin-top:10px !important;
                float:left;
                clear:both;
                margin:15px 0 5px
            }
            ul#works_filter li {
                border:none;
                background:none;
                float:left;
                padding:0
            }
            ul#works_filter li a:link, ul#works_filter li a:visited {
                font-size:12px;
                text-decoration:none;
                display:block;
                color:#2e2f2f;
                font-weight: bold;
                margin-right:1px;
                padding:2px 10px
            }
            ul#works_filter li a:hover, ul#works_filter li a.selected {
                background:#0D4667;
                color:#fff;
                opacity:1;
                -webkit-border-radius: 0.2em;
                -moz-border-radius: 0.2em;
                border-radius: 0.2em;
                /* IE hacks */
                zoom: 1;
             *display: inline;
            }

/* CLIENTS */
/* Default state for logos */
        .client-logo img {
            transition: filter 0.4s ease, opacity 0.4s ease, background 0.4s ease;
        }

        /* Active state: Invert colors */
        .client-logo.active img {
            filter: invert(100%);
        }

        /* Hover state: Remove inversion */
        .client-logo:hover img {
            filter: none; /* Ensures that hover removes inversion */
            opacity: 0.8; /* Keeps the hover effect */
        }

        /* Grayscale image behavior remains the same */

        /* Ensure active logos don't have a background */
        #clients .client-logo.active {
            background: none !important;
        }

        /* Hover: Background changes to #741a2f */
        #clients .client-logo:hover {
            background: #741a2f !important;
            transition: background 0.3s ease;
        }

/* name grid */
        .clients-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(calc(50% - 10px), 1fr)); /* Default: at least 2 columns */
            grid-gap: 5px;
        }

        @media (min-width: 600px) { /* Adjust breakpoint as needed */
            .clients-grid {
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* For larger screens */
            }
        }

        .client-item {
            padding: 5px;
            border: none;
            text-align: center;
        }

        .client-item h3 a {
            text-decoration: none;
            color: inherit;
        }
        .client-item h3 a:hover {
            color: #dcddde;
            opacity: .7;
            background-color: #741A2f;
            padding: 5px;
            border-radius: 5px;
            text-decoration: none;
            
        }
/* Contact Section */
        .page_contact {
            display: flex;
            justify-content: space-between; /* Space between text and image on large screens */
            align-items: center; /* Center vertically */
            flex-wrap: wrap; /* Allow the content to wrap on small screens */
        }

        /* Image Styling */
        .contact-img {
            margin-left: 5px; /* Reduced space between the text and image on larger screens */
            flex-shrink: 0; /* Prevents image from shrinking */
            width: 100px; /* Ensure the width is correctly set */
            transition: all 0.3s ease; /* Smooth transition for any style changes */
            border: none; /* Remove border */
            outline: none; /* Remove outline */
            padding: 0; /* Ensure no padding */
        }

        /* Remove borders and outlines from images in links */
        a img {
            border: none; /* Remove the border around the image if inside a link */
            outline: none; /* Remove the outline if the image is in a link */
        }

        /* Remove any default margin/padding on the <p> tag */
        .page_contact p {
            margin: 0; /* Remove default margin */
            padding: 0; /* Remove default padding */
        }

        /* Specific for small screens */
        @media (max-width: 768px) {
            .page_content {
                flex-direction: column; /* Stack the image and text on smaller screens */
                align-items: center; /* Center align on small screens */
            }

            .contact-img {
                margin-left: 0; /* Remove the left margin on small screens */
                margin-top: 15px; /* Adds space between text and image */
                padding-right: 0; /* Remove padding */
            }
        }

/* footer */
        div.footer {
            text-align:center;
            font-size:12px;
            margin-top:40px;
            padding:15px 0
        }
        .gotop {
            position: fixed;
            right: 50px;
            bottom: 15px;
            opacity: .7;
            padding: 10px;
            color: #741A2f;
            display: block;
            text-decoration: none;
            text-align: center;
            font-size: 13px;
            font-weight: bold;
            z-index: 999;
            transition: all 300ms;
            -webkit-transition: all 300ms;
            background-color: #dcdcdc; /* Background color */
            border-radius: 5px; /* Optional: rounded corners for the button */
            border: 2px solid #741A2f;
        }

        .gotop:hover {
            color: #eee;
            opacity: .9;
            background-color: #741A2f; /* Different background color when hovered */
        }

        a.gotop {
            text-decoration: none !important;
        }

/* font info */
        @font-face {
            font-family: 'OstrichSansCondensedLight';
            src: url('Fonts/ostrich-light-webfont.eot');
            src: url('Fonts/ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),  url('Fonts/ostrich-light-webfont.woff') format('woff'),  url('Fonts/ostrich-light-webfont.ttf') format('truetype'),  url('Fonts/ostrich-light-webfont.svg#OstrichSansCondensedLight') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'OstrichSansMedium';
            src: url('Fonts/ostrich-regular-webfont.eot');
            src: url('Fonts/ostrich-regular-webfont.eot?#iefix') format('embedded-opentype'),  url('Fonts/ostrich-regular-webfont.woff') format('woff'),  url('Fonts/ostrich-regular-webfont.ttf') format('truetype'),  url('Fonts/ostrich-regular-webfont.svg#OstrichSansMedium') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'OstrichSansBold';
            src: url('Fonts/ostrich-bold-webfont.eot');
            src: url('Fonts/ostrich-bold-webfont.eot?#iefix') format('embedded-opentype'),  url('Fonts/ostrich-bold-webfont.woff') format('woff'),  url('Fonts/ostrich-bold-webfont.ttf') format('truetype'),  url('Fonts/ostrich-bold-webfont.svg#OstrichSansBold') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'OstrichSansBlack';
            src: url('Fonts/ostrich-black-webfont.eot');
            src: url('Fonts/ostrich-black-webfont.eot?#iefix') format('embedded-opentype'),  url('Fonts/ostrich-black-webfont.woff') format('woff'),  url('Fonts/ostrich-black-webfont.ttf') format('truetype'),  url('Fonts/ostrich-black-webfont.svg#OstrichSansBlack') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'OstrichSansRoundedMedium';
            src: url('Fonts/ostrich-rounded-webfont.eot');
            src: url('Fonts/ostrich-rounded-webfont.eot?#iefix') format('embedded-opentype'),  url('Fonts/ostrich-rounded-webfont.woff') format('woff'),  url('Fonts/ostrich-rounded-webfont.ttf') format('truetype'),  url('Fonts/ostrich-rounded-webfont.svg#OstrichSansRoundedMedium') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'OstrichSansDashedMedium';
            src: url('Fonts/ostrich-dashed-webfont.eot');
            src: url('Fonts/ostrich-dashed-webfont.eot?#iefix') format('embedded-opentype'),  url('Fonts/ostrich-dashed-webfont.woff') format('woff'),  url('Fonts/ostrich-dashed-webfont.ttf') format('truetype'),  url('Fonts/ostrich-dashed-webfont.svg#OstrichSansDashedMedium') format('svg');
            font-weight: normal;
            font-style: normal;
        }

/* services */
        /* Default: Two Columns */
        .one_half {
            float: left;
            width: 50%;
        }
        /* Mobile View: One Column */
        @media screen and (max-width: 767px) {
            .one_half {
                float: none;
                width: 100%;
            }
            .one_half > .column_content, .one_half > div {
                padding-right: 0; /* Remove side padding for a full-width look */
            }

            .one_half.last > .column_content, .one_half.last > div {
                padding-left: 0;
            }
        }
        .one_half > .column_content, .one_half > div {
            padding-right:15px
        }
        .last > .column_content, .last > div {
            padding-right:0
        }
        .one_half.last > .column_content, .one_half.last > div {
            padding-left:15px
        }
        .column_content {
            margin-top:20px;
        }
        .column_content p {
            margin-left:68px;
        }
        .column_content h4 {
            font-family: 'OstrichSansBlack';
            color:#2e2f2f;
            /*text-shadow:1px 1px 0px #84bbdb;*/
            font-size:28px;
        }
        .first {
            clear:left
        }
        .last {
            clear:right
        }
        .left {
            float:left
        }
        .clear {
            clear: both;
            color: #414141;
        }
        .space {
            display:block;
            float:left;
            clear:both;
            margin:10px 0
        }

        ul li {
            line-height:2;
            background:/*url(../images/icons/bullet.jpg)*/ no-repeat left center;
            padding-left:15px;
        }
        a:link, a:visited {
            text-decoration:underline
        }
        blockquote {
            border-left:5px solid #741a2f;
            font-style:italic;
            padding:10px;
            margin:20px;
        }
        div.page img {
            padding:5px;
            border:1px solid #741a2f;
            max-width:94%
        }
        a#logo:hover {
            opacity:.5
        }
        a:hover {
            text-decoration:none
        }

/* overrides extra padding on button elements in Firefox */
/* GRID */
        .grid {
            border: 0px solid #4b88ad;
            border-bottom: none;
            border-right: none;
            overflow: hidden;
        }
        .grid li {
            border-bottom: 0px solid #4b88ad;
            border-right: 0px solid #4b88ad;
            float: left;
            overflow: hidden;
            position: relative;
            width: 25%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            padding-left:10px !important;
        }
        .grid li a {
            display: block;
        }
        .grid img {
            display: block;
            height: auto;
            border:0px !important;
            width: 100%;
            opacity: .65;
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=65)";
            filter: alpha(opacity=65);
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }
        .grid li:hover img {
            opacity: 1;
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
        }