* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Itim', sans-serif;
}
html {
    scroll-behavior: smooth; /* Enable smooth scrolling */
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Itim', sans-serif; /* Headings font */
}
body {
    background-color: #f3f4f6;
    color: #333;
    color-scheme: light;
}
.logo img {
    height: 100px; /* Adjust height as needed */
}

/* Tooltip styling */
.tooltip {
    display: none;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    top: -30px;
    left: 10px;
    z-index: 100;
}

.input-wrapper {
    position: relative;
    margin-top: 5px;
}

.sizebox {
    height: 30px;
    font-size: 24px;

}

/*Navbar*/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
}

.navbar .logo {
    font-size: 24px;
    font-weight: bold;
}

.navbar nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.navbar nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 5px 10px;
    transition: color 0.3s;
}

.navbar nav ul li a:hover {
    color: #007BFF;
}

.top-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

/*Sidebar*/
.sidebar {
    position: fixed;
    top: 0;
    left: -250px; /* Hide sidebar off-screen */
    width: 250px;
    height: 100%;
    background-color: #333; /* Background color for the sidebar */
    color: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    transition: left 0.3s ease; /* Smooth transition */
    z-index: 1000; /* Ensure sidebar is above other content */
}

.sidebar nav ul {
    list-style: none;
    padding: 20px; /* Add some padding */
}

.sidebar nav ul li {
    margin-bottom: 20px; /* Space between menu items */
}

.sidebar a {
    color: #fff; /* White text for links */
    text-decoration: none; /* Remove underline */
}

.sidebar-toggle {
    display: none; /* Hide toggle button by default */
}

.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px; /* Size for close button */
    cursor: pointer;
}

.cta-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #0056b3;
}

/*Hero (Main page)*/
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
    background: 
        linear-gradient(to right, rgba(0, 123, 255, 0.6), rgba(8, 13, 69, 0.6)), /* Gradient with transparency */
        url('../images/background_sd.jpg'); /* Background image */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    color: #fff;
    text-align: center;
    padding: 20px;
}

.hero-content {
    max-width: 600px;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* CSS for service pages */
.services {
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, #669eff 0%, #669eff 100%); /* Gradient background */
    align-items: center;
    justify-content: center;
    height: 80vh;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    color: #000;
}

.rate {
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, #669eff 0%, #669eff 100%); /* Gradient background */
    align-items: center;
    justify-content: center;
    height: 80vh;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    color: #000;
}

.portfolio {
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, #669eff 0%, #669eff 100%); /* Gradient background */
    align-items: center;
    justify-content: center;
    height: 80vh;
    margin-top: 0px;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    color: #000;
}

/*Contact Us*/
.contact {
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, #669eff 0%, #669eff 100%); /* Gradient background */
    align-items: center;
    justify-content: center;
    height: 80vh;
    margin-top: 0px;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    color: #000;
}

.contact-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    font-family: Itim, sans-serif;
}

.contact-form h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    text-align: left;
    font-weight: bold;
}

.contact-form input, .contact-form select, .contact-form button {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 16px;
}

.contact-form button {
    background-color: #007BFF;
    color: white;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    background-color: #0056b3;
}

.about {
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, #669eff 0%, #669eff 100%); /* Gradient background */
    align-items: center;
    justify-content: center;
    height: 80vh;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    color: #000;
}

.about h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/*Card*/
.card-container {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 1;
    padding: 10px;
}

.card {
    flex: 1 1 300px; /* Each card takes up at least 300px */
    max-width: 300px; /* Set a max width for desktop */
    padding: 20px;
    border-radius: 10px;
    background-color: #f4f4f4; /* Card background color */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.card-design {
    background: linear-gradient(135deg, #636dd4 0%, #5861c7 100%); /* Gradient background */
}

.card-development {
    background: linear-gradient(135deg, #5861c7 0%, #525aba 100%); /* Different gradient */
}

.card-server {
    background: linear-gradient(135deg, #525aba 0%, #42499e 100%); /* Another gradient */
}

.card-consultation {
    background: linear-gradient(135deg, #42499e 0%, #42488f 100%); /* Yet another gradient */
}

.card h3 {
    font-size: 2rem; /* Font size for the service title */
    margin-bottom: 10px; /* Space below the title */
    color: black; /* Change text color to black */
}

.card p {
    font-size: 1rem; /* Font size for the description */
    color: whitesmoke; /* Darker text for better readability */
}

.card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

.back-to-top {
    position: fixed; /* Fixed position */
    bottom: 20px; /* Distance from the bottom of the viewport */
    right: 20px; /* Distance from the right of the viewport */
    background-color: #FFC107; /* Button color */
    color: black; /* Text color */
    border: none; /* Remove border */
    border-radius: 50%; /* Circular shape */
    width: 60px; /* Button width */
    height: 60px; /* Button height */
    font-size: 30px; /* Font size for the arrow */
    display: none; /* Hidden by default */
    justify-content: center; /* Center the text */
    align-items: center; /* Center the text */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s; /* Smooth color transition */
    z-index: 1000; /* On top of other content */
}

.back-to-top:hover {
    background-color: #0056b3; /* Darker shade on hover */
}
.buttons {
    display: flex;
    flex-direction: row-reverse; /* Stack buttons vertically on smaller screens */
    gap: 15px;
}

.button {
    padding: 10px 20px;
    background-color: #FFC107;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border-radius: 20px;
    transition: background-color 0.3s;
    text-align: center;
}

.button:hover {
    background-color: #e0a800;
}

.button.outline {
    background-color: transparent;
    border: 2px solid #FFC107;
    color: #FFC107;
    transition: background-color 0.3s, color 0.3s;
}

.button.outline:hover {
    background-color: #FFC107;
    color: #333;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .card {
        width: calc(33.33% - 20px); /* 3 cards per row on medium screens */
    }
}

@media (max-width: 768px) {
    .card-container {
        max-height: 60vh; /* Adjust based on available space */
        flex-direction: column; /* Stack cards vertically on mobile */
        align-items: center;
        overflow-y: auto;
    }

    .card {
        width: 90%; /* Take most of the screen width on mobile */
        max-width: none; /* Remove the max-width for full flexibility */
    }
    .top-nav {
        display: none; /* Hide top navigation on mobile */
    }
    .sidebar-toggle {
        display: block; /* Show sidebar toggle button on mobile */
    }
    .hero h1 {
        font-size: 2rem; /* Smaller font size for mobile */
    }

    .hero p {
        font-size: 1rem; /* Smaller font size for mobile */
    }

    .button {
        padding: 10px; /* Adjust padding for buttons on mobile */
    }
}

@media (max-width: 480px) {
    .card {
        width: 100%; /* Full width for mobile screens */
    }
}