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

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/*----------------------------Header-----------------------------------*/
.header {
    background: #36454F;
    text-align: center;
    padding: 1rem;
}

.nav-menu li {
    flex: 1;
    text-align: center;
}

.nav-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.logo-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.logo-link:hover {
    transform: scale(1.1);
}

.nav-link {
    text-decoration: none;
    color: white;
    font-size: 18px;
    display: block;
}

.nav-link:hover {
    color: grey;
}

.logo {
    width: 100px;
    height: auto;
}

/* Mobile view */
.hamburger {
    display: none;
    cursor: pointer;
}

.nav-menu {
    display: flex;
}

/*-------------------------------Home-Body-----------------------------------------*/

button {
    margin-top: 20px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: rgb(42, 42, 138);
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

button:hover {
    background-color: darkblue;
}

.overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.email-box {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    text-align: left;
}

.email-box input[type="text"], .email-box textarea {
    width: 100%; /* Makes the input and textarea fill the container */
    padding: 10px; /* Adds some padding inside the text fields */
    margin-bottom: 20px; /* Adds space between the fields */
    box-sizing: border-box; /* Ensures padding doesn't affect the total width */
}

.email-box textarea {
    height: 150px; /* Sets a fixed height for the textarea */
    resize: vertical; /* Allows the user to resize the textarea vertically */
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#sendBtn {
    background-color: green;
}

#sendBtn:hover {
    background-color: darkgreen;
}

/*-------------------------------Home-v2-Body-----------------------------------------*/
.img-ribbon {
    background: url('images/rolls.png') center center / cover no-repeat;
    position: relative;
    width: 100%;
    height: 400px; /* Adjust based on your preference */
}

.info-box {
    position: absolute;
    top: 10%; /* Adjust based on your preference */
    left: 30%;
    right: 30%;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    color:white;
    text-align: center;
}

.info-box h1, .info-box p {
    padding-top: 10px;
    margin-bottom: 15px;
}

.info-box h1 {
    font-size: 34px;
}

.info-box p{
    font-size: 20px;
}

.lic-ribbon, .serv-ribbon {
    padding: 20px;
}

.lic-ribbon {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers text vertically */
    justify-content: center; /* Centers text horizontally */
    text-align: center; /* Centers text if it breaks into multiple lines */
    background-color: #000000;
    color: white;
}

.lic-ribbon h2{
    font-size: 28px;
    padding-bottom: 10px;
}

.lic-ribbon p {
    padding-top: 15px;
    font-size: 18px;
    padding-bottom: 15px;
}

.serv-ribbon {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Centers items (including text) vertically */
    justify-content: center; /* Centers the content block vertically if there's extra space */
    text-align: center; /* Ensures the text within is centered if it breaks into multiple lines */
    color:#000000;
    background-color: rgb(192, 192, 192);
}

.serv-ribbon h2, .serv-ribbon p, .coin-images {
    margin-bottom: 30px;
}

.coin-images {
    display: flex;
    justify-content: space-between; /* Space out the images equally */
    flex-wrap: wrap; /* Ensure responsiveness */
    gap: 80px; /* Adjust based on your preference */
}

.coin img {
    border-radius: 50%; /* Make images circular */
    width: 90px; /* Adjust based on your preference */
    height: 90px; /* Adjust based on your preference */
    object-fit: cover; /* Ensure images maintain aspect ratio */
}

.coin {
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center-align the items */
    flex: 1; /* Add this line: Allow flex items to grow and fill the space */
    min-width: 90px; /* Add this to ensure a minimum width */
}

.coin span {
    margin-top: 10px; /* Space between image and text */
    display: block; /* Ensure the span behaves like a block element */
}
/*-------------------------------Solutions-Body-----------------------------------------*/
.solutions-page {
    background-image: url('images/bkrnd11-transformed.png');
    background-size: cover; /* Cover the entire page */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the image */
}

.sol-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
  }
  
  .sol-row {
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent grey */
    margin-bottom: 10px;
    border-radius: 10px; /* Rounded corners */
    align-items: stretch; /* Vertically center the content */
  }
  
  .sol-image-container, .sol-text-container {
    flex: 1; /* Makes child divs take up equal space */
    min-width: 300px; /* Switch to column layout if screen size is small */
    display: flex; /* Added for alignment of content */
    flex-direction: column; /* Arranges content vertically */
    justify-content: space-around; /* Distributes space around items */
  }
  
  .sol-image-container img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Rounded corners */
    object-fit: cover;
    }
  
  .sol-text-container {
    padding: 20px;
    color: white; /* For better contrast on dark background */
  }
  
  .sol-text-container h2 {
    margin-top: 0;
  }
 /*-------------------------------About-Body-----------------------------------------*/ 
.about-page {
    background-image: url('images/bkrnd12-transformed.png');
    background-size: cover; /* Cover the entire page */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the image */
}

.abo-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
}

.abo-row {
display: flex;
flex-wrap: wrap;
background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent grey */
margin-bottom: 10px;
border-radius: 10px; /* Rounded corners */
align-items: stretch; /* Vertically center the content */
}

.abo-image-container, .abo-text-container {
flex: 1; /* Makes child divs take up equal space */
min-width: 300px; /* Switch to column layout if screen size is small */
display: flex; /* Added for alignment of content */
flex-direction: column; /* Arranges content vertically */
justify-content:space-around; /* Distributes space around items */
}

.abo-image-container img {
width: 100%;
height: auto;
border-radius: 10px; /* Rounded corners */
object-fit: cover;
}

.abo-text-container {
padding: 20px;
color: white; /* For better contrast on dark background */
font-size: 18px;
}

/*----------------------Contact-Body-----------------------------------*/
.contact-page {
    background-image: url('images/bkrnd17.png');
    background-size: cover; /* Cover the entire page */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the image */
}

.contact-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure it takes at least the full viewport height */
}

.contact-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2rem;
    padding: 2rem;
    width: calc(100% - 4rem); /* Adjust based on your layout, accounting for margin */
    background-color: #3f3f3fb5; /* Grey semi-transparent background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.335);
    text-align: center;
    color: white;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.info-details, .maps-embed {
    flex: 1; /* Assign equal width to both children */
}

.info-details {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center; /* Center align items if they don't span full width */
}

.info-row {
    display: flex;
    justify-content: center;
    width: 100%; /* Ensure it takes the full width of its parent */
    margin-bottom: 5px; /* Optional: adds space between rows */
    margin-top: 5px;
}


.maps-embed iframe {
    width: 100%; /* Ensure the map takes full width of its container */
    border-radius: 8px; /* Optional: if you want the map to have rounded corners */
}

.contact-form {
    background-color: #3f3f3fb5; /* Grey semi-transparent background */
    padding: 20px;
    margin: 0 auto; /* Centering the form on the page */
    width: 30%; /* Set the width of the form to take up 30% of the screen width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    width: 100%; /* Ensure the row takes the full width of the form */
}

.half-width, .full-width, .file-label { /* Adjusting for all text input types */
    width: 100%; /* Make child elements take the full width of their parent container */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

.half-width {
    width: 48%; /* Adjust for margin */
}

.full-width {
    width: 100%;
}

.file-upload {
    position: relative;
}

.file-input {
    display: none; /* Hide the default input */
}

.file-label {
    display: inline-block;
    background-color: #f3f3f3;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    height: 38px; /* Match the height of text fields, adjust as needed */
    line-height: 18px; /* Align the text vertically */
    white-space: nowrap; /* Prevent the label from wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
    box-sizing: border-box; /* Include padding in height calculation */
}

.file-label .paperclip {
    margin-right: 10px;
}

#fileList {
    list-style: none;
    margin-top: 10px;
}

#fileList li {
    margin-bottom: 5px;
}

textarea#message {
    height: 150px; /* Increase the height of the message box */
}

.send-button {
    display: block; /* Make the button a block element */
    margin: 20px auto 40px; /* Center the button horizontally and add space at the bottom */
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.send-button:hover {
    background-color:darkgreen;
}

.popup-message {
    position: fixed; /* Keeps the popup at the same place on the screen */
    bottom: 20px; /* Distance from the bottom of the viewport */
    right: 20px; /* Distance from the right of the viewport */
    min-width: 200px; /* Adjust based on your content */
    background-color: white;
    color: black;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Ensures it's above other content */
    display: none; /* Hide by default */
}

.close-btn {
    float: right;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
}

/*----------------------------Footer-----------------------------------*/
footer {
    background-color: #36454F;
    color: white;
    font-size: 14px;
    padding: 20px;
    text-align: center;
    width: 100%; /* Ensure footer covers the full width */
}

.footer-ribbon {
    text-align: center; /* Center the content */
    background-color: #36454F; /* Ribbon background color */
    color: #fff; /* Text color */
    padding: 10px 0; /* Padding for some space */
}

.footer-ribbon h4 {
    margin: 0; /* Remove default margin */
}

.footer-ribbon img {
    max-width: 100px; /* Adjust based on your image size */
    height: auto; /* Maintain aspect ratio */
    display: inline-block; /* For center alignment */
}

.footer-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section {
    margin-bottom: 20px;
}

.footer-section h4 {
    margin-bottom: 10px;
}

.footer-section ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-section ul li {
    list-style-type: none;
    margin: 0 10px;
}

.footer-section ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #B0C4DE; /* Lighter shade for hover effect */
}

.footer-bottom {
    border-top: 1px solid #FFF; /* White border for separation */
    padding-top: 10px;
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    .content-container, .sol-row {
        flex-direction: column;
    }

    .text-container, .image-container, .sol-row {
        max-width: 100%;
    }

    .contact-info {
        flex-direction: column; /* Stack the children vertically on small screens */
    }

    .info-details, .maps-embed {
        width: 100%; /* Take full width on smaller screens */
        margin-bottom: 20px; /* Add some space between the map and contact details */
    }

    .nav-menu {
        flex-direction: column;
        display: flex; /* Changed from none to flex */
        width: 100%; /* Ensure full width for better visibility */
        align-items: center; /* Optional: align items for a better look */
    }

    .serv-ribbon, .coin-images {
        flex-direction: column;
        align-items: center;
    }

    .coin-images img {
        margin-bottom: 10px;
    }

    .about-page, .contact-page, .solutions-page {
        background-image: none; /* Remove the background image */
        background-color: rgb(17, 28, 48); /* Replace with your chosen solid color */
    }

    .abo-row {
        flex-direction: column; /* Stack children vertically on small screens */
    }

    .abo-image-container, .abo-text-container, .sol-image-container, .sol-text-container {
        /* Ensure both take full width and reset any specific flex settings for mobile */
        flex: 1 1 100%;
        max-width: 100%; /* Take full width on smaller screens */
        order: 1; /* Reset order to ensure consistent stacking */
    }

    /* Specifically, always force the image to come first in mobile view */
    .abo-row .abo-image-container, .sol-row, .sol-image-container {
        order: 0; /* This ensures the image is always first */
    }

    .contact-form {
        width: 100%;
    }

    .info-box {
        position: relative; /* Keep it relative for mobile views */
        top: initial; /* Reset any previously set top value */
        left: 50%; /* Start at the middle of the container */
        transform: translateX(-50%); /* Shift it back by half of its own width */
        max-width: 100%; /* Ensures the box is not wider than the screen */
        width: auto; /* Allows the box to grow up to max-width */
        margin: 0 auto; /* Adds margin to the top, auto for left and right to center */
        padding: 15px; /* Adjust padding for smaller screens */
        border-radius: 0%;
    }

    .img-ribbon {
        background-image: url('images/bkrnd15.png'); /* New background for mobile */
        height: auto; /* Change to 'auto' or a smaller fixed height as needed */
        min-height: 250px; /* Ensure there's enough room for the image on smaller screens */
        margin: 0 auto;
    }

    .info-box h1 {
        font-size: 24px; /* Reduce font size for smaller screens */
    }

    .info-box p {
        font-size: 16px; /* Reduce font size for smaller screens */
    }

    .lic-ribbon, .serv-ribbon {
        padding: 15px; /* Adjust padding for smaller screens */
    }

    footer .footer-section p {
        color: white; /* Changes the color of text in the footer section */
    }

    footer .footer-section a {
        color: white !important; /* Ensures links in the footer section are white */
        text-decoration: none; /* Optional: removes underline from links */
    }

    /* Ensure phone number stays white even if styled as a link in future */
    footer .footer-section p a {
        color: white !important; /* Targeting links specifically within paragraphs */
    }
}