html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

footer {
    height: 80%; /* Set the height of the footer to 50% */
    flex-shrink: 0; /* Don't allow footer to shrink */
    height: 110px; /* Set fixed height */
    width: 100%; /* Take up full width */
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    scroll-behavior: smooth;
}


body {


    font-family: Arial, sans-serif;
}


/*INDEX Page*/
.albumGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Space between items */
}

.albumContainer {
    width: 220px; /* Set container width */
    height: 220px; /* Set container height */
    margin-bottom: 20px;
    text-align: center;
    box-sizing: border-box;
    position: relative; /* Ensures the image fits perfectly within the container */
    overflow: hidden; /* Prevents text overflow */
}

    .albumContainer a {
        display: block; /* Makes the link cover the entire container */
        width: 100%;
        height: 100%;
        position: relative; /* Allows for absolute positioning of child elements */
    }

.albumImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container without distortion */
    border-radius: 50%; /* Makes the image circular */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.19);
    transition: opacity 0.3s; /* Smooth transition for hover effect */
}

.albumName {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: white;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s; /* Smooth transition for hover effect */
}

.albumContainer:hover .albumImage {
    opacity: 0.3; /* Fade the image when hovered */
}

.albumContainer:hover .albumName {
    opacity: 1; /* Show the name when hovered */
    color: black;
}

#previousWork {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: space-around; /* Distribute items evenly with space around */
    padding: 10px; /* Add padding around the items */
    border-radius: 50%;
}

.websites-item {
    flex: 0 1 calc(25% - 20px); /* Adjust width to fit 4 items per row with padding */
    max-width: calc(25% - 20px); /* Adjust max width to fit 4 items per row with padding */
    margin: 10px; /* Add margin between items */
    text-align: center; /* Center align content */
    overflow: hidden; /* Hide overflow content */
    border-radius: 50%;
}

    .websites-item img {
        max-width: 100%; /* Ensure images resize properly */
        height: auto; /* Maintain aspect ratio */
        cursor: pointer; /* Add pointer cursor on hover */
        border-radius: 50%;
    }


    #websites img {
        height: 75%; /* Relative to parent */
        width: 75%; /* Relative to parent */
        border-radius: 50%;
        box-shadow: 1px 1px 15px black;
    }
.mainBodyIndex{
    height:auto;
    width:auto;
}
#servicesOffered {
    width: 100%;
    height: auto;
    margin-left: auto;
}
#services {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
    #services li {
        flex: 1 1 calc(33.333% - 10px); /* Subtract gap if any */
        margin: 5px; /* Half of the gap on each side */
        padding: 10px; /* Optional: For better visualization */
        border: 1px solid #ccc; /* Optional: For better visualization */
        box-sizing: border-box; /* Ensures padding and border are included in width calculation */
        box-shadow: 1px 1px 10px black;
    }
ul#services {
    list-style-type: none;
    padding: 0;
}

    ul#services li {
        position: relative;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        ul#services li i {
            cursor: pointer;
        }


    .popup h5 {
        margin-top: 0;
    }

.popup-overlay {
    display: none; /* Initially hide the popup overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.popup {
    display: none; /* Initially hide the popups */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
}

    .popup .popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }
#clientTestimonials{

    width:auto;
    height:auto;
    text-align:center;
}
    #clientTestimonials #reviews {

        width: auto;
        height: auto;
        text-align: center;
        box-shadow: 1px 1px 5px black;
    }
/*CREATE INVOICE PAGE*/
#createInvoiceForm{

}

    #createInvoiceForm input[type="text"],
    #createInvoiceForm input[type="email"],
    #createInvoiceForm input[type="tel"],
    #createInvoiceForm textarea {
        width: 100%; /* Make input fields full width */
        padding: 10px; /* Add padding for spacing */
        margin-bottom: 15px; /* Add spacing between input fields */
        box-sizing: border-box; /* Include padding and border in width calculation */
    }
#formValues {
    width: 100%;
    height: auto;
    border: 1px solid red;
    margin-top: 20px;
}

#dataTable {
    width: 100%;
    border-collapse: collapse;
}

    #dataTable td, #dataTable th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    #dataTable tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #dataTable tr:hover {
        background-color: #ddd;
    }

    #dataTable th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #04AA6D;
        color: white;
    }
#bannerMessage {
    position: relative;
    width: auto;
    height: auto; /* Adjust height as needed */
    background-color: #f0f0f0; /* Example background color */
    overflow: hidden;
}

#bannerBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: auto;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

#countryFlagDiv {
    width: 30px;
}
#divContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* To clear floats */
}

    #divContainer #centreDiv {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #divContainer #centreDiv img {
            max-width: 100%;
            max-height: 100%;
        }

/*SLIDESHOW*/

#slider {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    overflow: hidden; /* Hide overflowing content */
    position: relative; /* Ensure proper positioning for child elements */
}

/* Individual slides */
.slide {
    width: 100%; /* Full width of the container */
    height: 400px; /* Adjust height as needed */
    position: relative; /* Ensure images are positioned correctly */
    background-color: #f0f0f0; /* Background color for shading */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for shading */
    display: none; /* Hide all slides by default */
}

    .slide.active {
        display: block; /* Show only the active slide */
    }

    /* Style the images within each slide */
    .slide img {
        width: auto; /* Adjust image width based on container size */
        height: 100%; /* Maintain aspect ratio */
        object-fit: contain; /* Scale the image to fit within the container */
        display: block; /* Remove any inline spacing */
        margin: 0 auto; /* Center the image horizontally */
    }

/* Position previous and next buttons */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 1; /* Ensure buttons are above the image */
}

.prev {
    left: 10px; /* Adjust left position as needed */
}

.next {
    right: 10px; /* Adjust right position as needed */
}

    /* Hover effect for buttons */
    .prev:hover, .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
#portfolioTitle{
    font-size:24px;
    font-family:'Courier New';
    letter-spacing:17px;
    font-weight:bold;
    text-align:center;

}

/* Sidebar styles */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    padding-top: 20px;
    overflow: hidden; /* Ensure content doesn't overflow */
}

.sidebar-content {
    display: block; /* Ensure sidebar content is displayed by default */
}

.sidebar a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
}

    .sidebar a:hover {
        background-color: #ddd;
    }

/* Dropdown button styles */
.dropdown-button {
    display: none; /* Hidden by default */
    background-color: #3498db;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

    .dropdown-button:hover, .dropdown-button:focus {
        background-color: #2980b9;
    }

/* Submenu styles */
.submenu {
    position: relative;
}

.submenu-content {
    display: none; /* Hidden by default */
    background-color: #f9f9f9;
    padding-left: 20px;
}

    .submenu-content a {
        padding: 8px 10px;
    }

.submenu:hover .submenu-content {
    display: block; /* Show submenu on hover */
}

/* Dropdown button styles */
.dropdown-button {
    display: none; /* Hidden by default */
    background-color: #3498db;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

    .dropdown-button:hover, .dropdown-button:focus {
        background-color: #2980b9;
    }

.main {
    height: 100vh; /* Full viewport height */
    padding: 20px;
}
#ContactForm {
    max-width: 1500px; /* Adjust the max-width as needed */
    margin: 0 auto; /* Center the form horizontally */
    padding: 20px; /* Add padding for spacing */
}
    #ContactForm input[type="text"],
    #ContactForm input[type="email"],
    #ContactForm textarea {
        width: 100%; /* Make input fields full width */
        padding: 10px; /* Add padding for spacing */
        margin-bottom: 15px; /* Add spacing between input fields */
        box-sizing: border-box; /* Include padding and border in width calculation */
    }
    #ContactForm button {
        width: 100%; /* Make the button full width */
        padding: 10px; /* Add padding for spacing */
   
        }
#selfwateringPlant{
    width:50%;
    float:left;
}

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
    }

    .dropdown-button {
        display: block; /* Show button on smaller screens */
    }

    .sidebar-content {
        display: none; /* Hide sidebar content on smaller screens */
    }

        .sidebar-content.show {
            display: block; /* Show sidebar content when button is clicked */
        }
}
#androidDev {

    background-image: url('../images/androidlogoopacity.png');
    background-repeat: no-repeat; /* Ensures the image does not repeat */
    background-position: center; /* Centers the image */
    background-size: contain; /* Ensures the image fits within the element without being cropped */
}

#serviceContainer {
    width: 100%;
    height: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ourServices {
    width: 200px;
    border-radius: 10px;
    margin: 20px;
    text-align: center;
    background: #FFC300;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iconContainer {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .iconContainer img {
        width: 100%;
        height: auto;
        display: block;
    }

.serviceText {
    margin-top: 20px;
    font-size: 14px;
    color: #333;
}
#containerDiv {
    position: fixed;
    bottom: 100px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 1000;
}
#countDownClock {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
}

#days, #hours, #minutes, #seconds {
    height: 100%;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace; 
    font-size:30px;
    text-align:center;
}

#contactMeContainer{
    margin-top:20px;
    text-align:center

}

#contactMeForm {
    max-width: 500px; /* Adjust the max-width as needed */
    margin: 0 auto; /* Center the form horizontally */
    padding: 20px; /* Add padding for spacing */
}

    #contactMeForm label {
        display: block; /* Display each label on its own line */
        margin-bottom: 10px; /* Add spacing between labels */
    }

    #contactMeForm input[type="text"],
    #contactMeForm input[type="email"],
    #contactMeForm textarea {
        width: 100%; 
        padding: 10px; 
        margin-bottom: 15px;
        box-sizing: border-box; 
    }

    #requestQuotePage button {
        width: 100%; /* Make the button full width */
        padding: 10px; /* Add padding for spacing */
    }