    body, html {
        margin: 0;
        height: 100%;
        overflow: hidden; /* Prevents scrolling */
    }
    
    body {
        font-family: 'Poppins', sans-serif;
        padding-top: 100px;
        padding-bottom: 100px; /* Adjust based on the height of your footer */
        color: #fff;
        /* background: url('img/server-room.jpg') no-repeat center center fixed; */
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    body, .main-container { /* Assuming there's a wrapper with class .main-container */
        display: flex;
        flex-direction: column; /* Stacks children vertically */
        align-items: center; /* Centers children horizontally */
    }
    /* Ensuring the background container is fixed and covers the entire viewport */
    .background-container {
        position: fixed; /* Fixes the container relative to the viewport */
        top: 0;
        left: 0;
        right: 0;  /* Ensures it stretches across horizontally */
        bottom: 0; /* Ensures it stretches across vertically */
        z-index: -1; /* Places it behind other content */
        overflow: hidden; /* Prevents any overflow from this container */
    }

    .background-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the whole container without distorting */
    }
    
    .gif-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.1); /* White background with 50% opacity */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .gif-image {
        max-width: 100%;
        max-height: 100%;
        opacity: 0.5; /* Adjust opacity to blend the GIF with the background */
    }
    div {
        display: block; /* Overrides any flex settings that might be applied */
    }
    .content {
        position: relative;
        width: 90%;
        max-width: 600px;
        padding: 20px;
        border-radius: 8px; /* Rounded corners for the content box */
        z-index: 2; /* Higher than background-blur */
        overflow: hidden; /* Necessary for containing the pseudo-elements */
    }
    .content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
        z-index: -1; /* Ensures it's behind the content text */
    }
    .content::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit; /* Inherits the background from the body */
        filter: blur(10px); /* Apply the blur effect */
        z-index: -2; /* Further behind the content text */
    }
    h1, h2, p, form {
        position: relative; /* Ensures text and form are on top of the blurred background */
        z-index: 3;
    }
    h1 {
        font-family: 'Jersey 10', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 5.618em;
        margin: 0.5em 0;
        display: block; /* Ensures it's a block-level element */
        width: 100%; /* Ensures it takes the full width */
        text-align: center; /* Optional: Centers the heading */
        margin-top: 20px; /* Adds some space above the heading */
        margin-bottom: 20px; /* Adds some space below the heading */
    }
    p, h2 {
        margin-top: 0;
        margin-bottom: 1em;
    }
    form {
        margin-top: 2em;
    }
    .form-label {
        display: block;
        margin-bottom: .5rem;
    }
    .form-control, .btn {
        margin-bottom: 1em;
    }
    .btn {
        font-size: 18px; /* Larger font size */
        font-weight: 600; /* Bolder font */
        padding: 12px 20px; /* Larger padding for a better touch area */
        background-color: #007bff; /* Bootstrap primary color */
        border: none; /* No border */
        border-radius: 0; /* Square border-radius */
        color: #ffffff; /* Text color */
        transition: background-color 0.3s ease; /* Smooth transition for hover effect */
        position: relative; /* Position relative for the pseudo element */
        overflow: hidden; /* Hide the overflow */
    }
    .btn::before {
        content: ''; /* Pseudo element for the hover animation */
        position: absolute; /* Position absolute for the pseudo element */
        top: 50%; /* Start position */
        left: 50%; /* Start position */
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        background: rgba(255, 255, 255, 0.1); /* Semi-transparent white color */
        transition: transform 0.5s ease; /* Smooth transition for transform */
        z-index: -1; /* Behind the button text */
        transform: translate(-50%, -50%) scale(0); /* Initial scale down */
        border-radius: 0; /* Square border-radius */
    }
    .btn:hover::before {
        transform: translate(-50%, -50%) scale(2); /* Scale up on hover */
    }
    .btn:hover {
        background-color: #0056b3; /* Darker shade when hovered */
        color: #ffffff;
        outline: none; /* Removes outline on focus for a cleaner look */
    }
    
/* Styling of header */
    header {
        background: rgba(0,0,0,0);
        color: white;
        padding: 10px 0;  /* Increase padding if more height is needed */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;   /* This ensures it stretches across the full width */
        z-index: 1000;
    }

/* General styles for the navigation bar */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: #333;
        color: #fff;
        position: fixed;
        top: 0;
        z-index: 1000; /* Make sure this is higher than the z-index of other elements */
    }

    .nav-links {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
    }
    
    .nav-links li {
        padding: 0 15px;
    }
    
    .nav-links a {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .icon-svg {
        width: 24px;
        height: 24px;
        fill: white; /* Ensure this isn't being overridden */
        transition: transform 0.3s ease;
    }
    
    .nav-icon:hover .icon-svg {
        transform: scale(1.2);
    }
        .nav-links small a {
        display: inline-block; /* Allows transform to work properly */
        transition: transform 0.3s ease; /* Smooth transition for scaling */
        transform-origin: center; /* Ensures scaling is centered */
        text-decoration: none; /* Optional: removes underline from links */
        color: white; /* Optional: sets text color, adjust as needed */
    }
    
    .nav-links small a:hover {
        transform: scale(1.2); /* Increase size by 20% */
    }
    
/* cards */
    /* Container holding all cards, ensuring proper spacing and alignment */
    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 20px;
    }
    
    /* Styling for each service card */
    .service-card {
        display: block;
        width: 300px;
        background: #000;
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
        text-decoration: none;  /* No underline on the entire card */
        color: #333;  /* Text color inside the card */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Smooth transitions for hover effects */
    }
    
    /* Remove text decoration from links and ensure color consistency */
    .service-card a, .service-card a:hover {
        text-decoration: none;  /* No underline for links */
        color: inherit;  /* Inherits color from .service-card */
    }
    
    /* Hover effect for the service card */
    .service-card:hover {
        transform: scale(1.2);  /* Enlarges the card by 20% */
        box-shadow: 0 10px 15px rgba(0,0,0,0.2);  /* Darker shadow for a "lifted" effect */
    }
    
    /* Image styling within the card */
    .service-card img {
        width: 100%;
        display: block;  /* Removes any inline element margin */
        height: auto;  /* Maintain aspect ratio */
    }
    
    /* Styling for text paragraphs within the card */
    .service-card p {
        padding: 15px;  /* Padding around text for better readability */
        margin: 0;  /* Remove default margins */
    }
    
    /* Ensures the first paragraph, typically the title, stands out */
    .service-card p:first-of-type {
        font-weight: bold;  /* Make the title bold */
        margin-bottom: 5px;  /* Space between title and detailed text */
    }
    .card-container a.service-card, 
    .card-container a.service-card:hover, 
    .card-container a.service-card p, 
    .card-container a.service-card p:hover {
        text-decoration: none;  /* Ensures text-decoration is none */
        color: #fff;  /* Inherits the text color from the parent */
    }
    .service-card a, 
    .service-card a:hover {
        text-decoration: none !important;
    }

/* Footer styling */
    footer {
        position: fixed; /* Fixes the footer at a specific location in the viewport */
        left: 0; /* Aligns the footer to the left edge of the viewport */
        bottom: 0; /* Aligns the footer to the bottom edge of the viewport */
        width: 100%; /* Ensures the footer extends across the full width of the viewport */
        background-color: #000; /* Light background color */
        padding: 10px; /* Padding inside the footer for spacing */
        text-align: center; /* Centers the text inside the footer */
        border-top: 1px solid #e7e7e7; /* Adds a subtle border line on top */
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Optional: adds shadow for depth */
    }
    footer p {
        margin: 5px 0; /* Adds a little space between paragraphs */
    }
    footer a {
        color: #fff; /* Bootstrap primary blue color for links */
        text-decoration: none;
    }
    footer a:hover {
        text-decoration: none; /* Adds underline on hover for better user interaction */
    }
    
/* About section styling */
    .about-section {
        max-height: 400px; /* or another appropriate value based on your design needs */
        overflow-y: auto; /* Ensures that vertical scrolling is enabled */
        padding: 20px; /* Adequate padding for readability */
        box-sizing: border-box; /* Includes padding in the height calculation */
    }
    
/* media queries */
@media (max-width: 767px) {
        .footer .col-md-6 {
            text-align: center;
        }
    }
.footer .container, .footer .row {
    padding: 0;
    margin: 0;  /* Removes spacing that might cause issues */
}
@media (max-width: 768px) {
    .navbar {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav-links {
        width: 100%;
        padding: 0;
    }

    .nav-links li {
        display: block;
        width: 100%;
        text-align: center;
    }

    .nav-icon {
        margin-bottom: 5px;
    }

    .nav-icon svg {
        width: 30px;
        height: 30px;
    }
}
@media (max-width: 768px) {
    .service-card {
        width: 100%;
        margin-bottom: 20px;
    }

    .service-card img {
        height: 200px;  /* Adjust height if needed */
    }
}
@media (max-width: 768px) {
    footer {
        text-align: center;
    }

    footer .row {
        flex-direction: column-reverse;
    }

    footer .col-md-6 {
        text-align: center;
        width: 100%;
        font-size: 10px;
    }
}
@media (max-width: 768px) {
    .form-control {
        width: 100%;  /* Ensures form fields use the available width */
        margin-bottom: 10px;
    }

    .btn {
        width: 100%;
    }
}
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Smaller text for better readability */
    }

    h1, h2 {
        font-size: 24px; /* Adjust heading sizes appropriately */
    }
}
@media (max-width: 768px) {
    .footer .col-6 {
        text-align: center;  /* Centers the text on small screens */
        padding: 10px 0;     /* Adds padding for better spacing */
    }
}
@media (max-width: 768px) {
    .footer .row {
        flex-direction: column-reverse;  /* Stacks the columns vertically in reverse order */
    }
    .footer .col-6 {
        text-align: center;
        width: 100%;  /* Makes each column full width */
    }
}
@media (max-width: 768px) {
    .about-section {
        max-height: 50vh; /* 50% of the viewport height */
        overflow-y: auto; /* Enable scrolling */
    }
}
/* Style for the body and html to ensure the full screen coverage */
body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Full height */
    overflow: hidden; /* Disable scrolling if the content is larger than the screen */
}

/* Container for background image and GIF */
.background-container {
    position: relative; /* Establishes a positioning context for absolute children */
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Ensures no overflow from this container */
}

/* Full-screen background image */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container without distorting aspect ratio */
}

/* Transparent layer for GIF */
.gif-layer {
    position: absolute; /* Positioned absolutely to overlay on the background */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Flex container to center the GIF */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Styling for the GIF image */
.gif-image {
    opacity: 0.2; /* Slightly see-through to blend with the background */
    max-width: 100%; /* Restrict the size to be within the container */
    max-height: 100%; /* Restrict the size to be within the container */
}
.content {
    position: relative; /* Ensures this content is in the normal flow but can be z-indexed */
    z-index: 100; /* Higher than the background container */
    padding: 20px; /* Optional: Adds some spacing around the content */
}
body {
    padding-top: 60px; /* Adjust based on the height of your fixed header, if any */
}
.background-image, .gif-layer {
    position: absolute; /* Absolute positioning relative to the fixed container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Covers the entire area of the container */
}
.gif-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the GIF covers the designated area */
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.content {
    position: relative;  /* This ensures the z-index property is respected */
    z-index: 100;        /* Higher than the background’s z-index */
    background-color: #fff; /* Optional: makes content stand out against the background */
    padding: 20px;       /* Gives some spacing inside the content area */
}
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;  /* Ensure this is lower than the content z-index */
    overflow: hidden;
}
.content {
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    padding: 20px;
}
.content {
    position: relative; /* Ensure positioning context for child elements */
    background-color: rgba(0,0,0,0.2); /* Semi-transparent background */
    height: 100%; /* Takes the full height of its parent */
    overflow-y: auto; /* Enables vertical scrolling if the content overflows */
}
html, body {
    height: 100%; /* Ensures the full height of the viewport is used */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
}
.about-section {
    max-height: 500px; /* Adjust based on your design preference */
    overflow-y: auto; /* Allows scrolling within the about section */
    padding: 20px; /* Provides spacing inside the container */
}
/* Base styles for content */
.content {
    padding: 2% 10px; /* Adjusted for demonstration, apply your standard padding */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

/* Media query for devices with a max-width of 768px */
@media (max-width: 768px) {
    .content {
        padding-top: 20vh; /* Adds 16% padding at the top */
        padding-bottom: 20vh; /* Adds 16% padding at the bottom */
    }
}
body, html {
    height: auto;
    overflow-x: hidden;  /* Prevent horizontal scrolling */
    padding-top: 60px;   /* Space for fixed header */
    padding-bottom: 60px; /* Space for footer */
    margin: 0;
}

.card-container {
    padding: 1em;  /* Adds padding around the cards for spacing */
    box-sizing: border-box;  /* Includes padding in width calculations */
}
.service-card {
    display: block;  /* Stack the cards vertically */
    width: 100%;  /* Full width on mobile */
    margin-bottom: 20px;  /* Space between cards */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* Subtle shadow for depth */
    border-radius: 10px;  /* Rounded corners */
    overflow: hidden;  /* Keeps all content within the rounded corners */
}

.service-card img {
    width: 100%;  /* Ensure images fill the card */
    height: auto;  /* Maintain aspect ratio */
    display: block;  /* Remove any inline spacing */
}
.service-card p {
    font-size: 16px;  /* Larger text for readability */
    line-height: 1.4;  /* More line spacing */
    padding: 16px;  /* Padding inside cards around text */
    color: #FFF;  /* Darker text for better contrast */
}
@media (max-width: 768px) {
    body {
        padding-top: 50px;  /* Adjust if header height is different on mobile */
        padding-bottom: 50px;  /* Adjust if footer height is different on mobile */
    }

    .service-card {
        font-size: 14px;  /* Slightly smaller text on very small screens */
    }
}
.card-container {
    padding: 1em;  /* Ensures there is space around the cards */
}

.service-card {
    margin: 0.5em 0;  /* Adds vertical space between each card */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Subtle shadows for depth */
    transition: box-shadow 0.3s ease-in-out;  /* Smooth transition for hover effects */
}

@media (max-width: 768px) {
    .card-container {
        padding: 0.5em;  /* Adjust padding for smaller screens */
    }
}
.service-card:hover, .service-card:focus {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);  /* Larger shadow on hover/focus */
    transform: scale(1.03);  /* Slight increase in size */
}
.service-card:focus {
    outline: none;  /* Remove default outline */
    box-shadow: 0 0 0 2px #0056b3;  /* Custom focus style */
}
/* Media query for handling different orientations */
@media (orientation: landscape) {
    .service-card {
        width: 48%;  /* Two cards per row in landscape orientation on small devices */
        margin: 1% 1%;  /* Slightly smaller margins */
    }
}
html, body {
    height: auto; /* Allows the body to expand as needed based on content */
    min-height: 100%; /* Ensures at least full viewport height */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scrolling */
    overflow-y: visible; /* Allows vertical scrolling */
}
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensures it stays behind all other content */
    overflow: hidden; /* Prevents any overflow from this element */
}
.card-container {
    padding: 20px; /* Adds padding inside the container */
    margin-top: 60px; /* Adds margin to top to compensate for any fixed header */
    margin-bottom: 60px; /* Adds margin to bottom to compensate for any fixed footer */
}
.content {
    overflow: hidden; /* If this is set, it could prevent scrolling */
}

/* Change it to */
.content {
    overflow: visible; /* or 'auto' if you want scrollbars only when necessary */
}
@media (min-width: 768px) {
    .card-container {
        width: 90%; /* Control width to ensure cards are well displayed */
        margin: auto; /* Center align if needed */
    }
}
.service-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: scale(1.05);
}
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Adjusts the alignment of the cards */
}

.service-card {
    
    width: 20vw;
    margin: 10px; /* Provides space between cards */
    transition: transform 0.3s ease; /* Smooth transition for hover effects */
    overflow: hidden; /* Keeps all content within the rounded corners */
    box-sizing: border-box; /* Includes padding and border in the width and height */
}

@media (max-width: 768px) {
    .service-card {
        width: 100%; /* Stacks the cards vertically on smaller screens */
    }
}
.modal-content {
    background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
    color: #fff; /* White text */
    border-radius: 10px; /* Rounded corners for the modal */
}

.modal-header,
.modal-footer {
    border-color: #444; /* Subtle borders for header and footer */
}

.btn-close {
    filter: invert(1); /* Makes the close button white */
}

.modal-body {
    text-align: justify; /* Justifies all text within the modal body */
}

.modal-body p,
.modal-body ul {
    text-align: left; /* Ensures paragraphs and lists are aligned to the left */
}

.modal-body ul {
    padding-left: 20px; /* Adjusts padding for bullet points */
    list-style-position: inside; /* Ensures bullets are aligned with text */
}
.modal-content {
    background-color: rgba(0, 0, 0, 0.85); /* Slightly more opacity for better readability */
    color: #fff;
    border-radius: 8px;
}

.modal-body p, .modal-body ul {
    text-align: left;
}

.modal-body ul {
    padding-left: 20px; /* Adjust padding for list items */
}
.modal-content {
    background-color: rgba(0, 0, 0, 0.85); /* Slightly more opacity for better readability */
    color: #fff;
    border-radius: 8px;
    overflow-y: auto; /* Makes modal content scrollable */
}

.modal-dialog {
    margin-bottom: 1rem; /* Adds space below the modal */
}

@media (max-width: 768px) { /* Adjustments for smaller devices */
    .modal-dialog {
        margin: 10px; /* Smaller margin around the modal */
    }
    .modal-content {
        max-height: 85vh; /* Limits the modal height to 85% of the viewport height */
    }
    .modal-footer {
        padding: 1rem; /* Ensures padding within the footer */
        display: flex; /* Ensures flexbox layout for better control */
        flex-direction: row; /* Aligns buttons in a row */
        justify-content: space-between; /* Distributes space evenly */
    }
    .btn-secondary, .btn-primary {
        flex-grow: 1; /* Allows buttons to grow and fill available space */
        margin: 2px; /* Small margin between buttons */
    }
}
/* General styling for the content */
.content.about-section {
    background-color: rgba(0, 0, 0, 0.2);
    min-width: 100%; /* Adjusted to 100% for mobile responsiveness */
    min-height: 100vh;
    padding-top: 16vh;
    padding-left: 1.618em;
    padding-right: 1.618em;
    padding-bottom: 20vh; /* Increase bottom padding to avoid footer overlap */
    overflow-y: auto; /* Ensures content is scrollable */
}
/* Sticky footer setup */
footer {
    width: 100%;
    position: fixed; /* or 'sticky' */
    bottom: 0;
    z-index: 10; /* Ensure it stays on top of other content if overlapping is intended */
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    .content.about-section {
        padding-top: 10vh; /* Adjust top padding on mobile */
        padding-bottom: 25vh; /* Increase bottom padding to ensure it clears the footer */
    }

    footer {
        position: sticky; /* This helps if the footer should move with content */
    }
}
.content.about-section {
    background-color: rgba(0,0,0,0); /* Transparent background */
    padding: 16vh 1.618em 16vh; /* Top and bottom padding set to 16vh, left and right to 1.618em */
    min-height: 100vh; /* Minimum height to fill the screen */
    box-sizing: border-box; /* Ensures padding is included in the height calculation */
    overflow-y: auto; /* Allows scrolling within the element if needed */
}

@media (max-width: 768px) {
    .content.about-section {
        padding: 10vh 1em; /* Reduce padding on smaller screens */
        min-height: calc(100vh - 50px); /* Subtract height of the header/footer if fixed */
    }
}
#bg {
    transition: transform 0.5s ease; /* Smooth transition for the animation */
    cursor: pointer; /* Indicates that the div is clickable */
}
p {
    text-align: justify;
}
.page-content {
    transition: opacity 0.5s ease-out;
    opacity: 1;
}
body, html { margin: 0; padding: 0; overflow-x: hidden; }
body, h1 {text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.88); /* Horizontal shadow, Vertical shadow, Blur radius, Color */}

/* Specific styles for mobile devices */
@media (max-width: 768px) {
    .card-container {
        overflow-y: scroll; /* Ensures it is always scrollable */
        padding-bottom: 16vh;
    }
}
@media (max-width: 768px) {
    footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #000; /* Set your footer background color */
        color: #fff; /* Set your footer text color */
        text-align: left;
        padding: 10px 0;
        z-index: 1000; /* Ensure it's above other content */
    }

    body {
        padding-bottom: 60px; /* Adjust this value based on the height of your footer */
    }
}

.nav-icon svg {
    fill: white;
    width: 24px;
    height: 24px;
}

.nav-icon:hover svg {
    fill: #007bff; /* Adjust color based on your theme */
}
/* General styles for the header that apply at all times */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.nav-icon svg {
    fill: white;
    width: 24px;  /* Original size */
    height: 24px;  /* Original size */
    transition: fill 0.3s;
}

.nav-links li {
    display: inline-block;
    margin-right: 8px; /* Adjust spacing between items */
}

.nav-links a small {
    display: block;
    text-align: center;
    font-size: 12px; /* Original font size */
}

/* Media Query for devices with max-width of 768px */
@media (max-width: 768px) {
    .nav-icon svg {
        width: 18px;  /* Reduced size */
        height: 18px;  /* Reduced size */
    }

    .nav-links li {
        margin-right: 5px; /* Reduced spacing between items */
    }

    .nav-links a small {
        font-size: 10px; /* Smaller font size for labels */
    }

    .navbar {
        padding: 5px 15px; /* Reduced padding */
    }
}
/* Further Media Query Adjustments for devices with max-width of 480px */
@media (max-width: 720px) {

    .navbar {
        flex-direction: column;  /* Stack elements vertically */
        align-items: center;     /* Center-align the items */
    }

    .nav-links {
        width: 100%;            /* Allow nav links to expand full width */
        text-align: center;     /* Center-align all nav items */
        padding: 0;             /* Remove padding */
        margin-top: 10px;       /* Space between logo and nav items */
    }

    .nav-links li {
        display: block;         /* Stack links vertically */
        margin: 2px 0;          /* Spacing between vertical items */
    }

    .nav-icon svg {
        width: 16px;            /* Further reduce the icon size */
        height: 16px;
    }

    .nav-links a small {
        font-size: 9px;         /* Further reduce the font size */
    }
}

/* Responsive settings for smaller devices */
@media (max-width: 768px) {
    .carousel-caption {
        position: static; /* Avoid absolute positioning on small devices */
        transform: none; /* Remove transform on small devices */
        margin-top: 10px; /* Add some margin above caption */
    }
}

/* Hiding navigation controls on very small screens for simplicity */
@media (max-width: 480px) {
    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }
}
@media (max-width: 768px) {
    .slick-carousel {
        max-width: 95%; /* Allows more width on smaller devices */
    }
}

@media (max-width: 480px) {
    .slick-carousel {
        max-width: 100%; /* Full width on very small devices */
    }
}
/* Media queries for smaller screens */
/* Media queries for smaller screens */
@media (max-width: 768px) {
    /* Adjust the position of the navigation buttons */
    .slick-prev,
    .slick-next {
        font-size: 32px; /* Increase the font size */
        width: 60px; /* Increase the width */
        height: 60px; /* Increase the height */
        line-height: 60px; /* Center the icon vertically */
        top: 50%; /* Position the buttons vertically at 50% from the top */
        transform: translateY(-50%); /* Adjust the vertical position */
    }

    .slick-prev {
        left: 10px; /* Position the previous button 10px from the left */
    }

    .slick-next {
        right: 10px; /* Position the next button 10px from the right */
    }

    .modal-dialog {
        min-width: 90%; /* Set maximum width to 90% of viewport width */
    }
}




