/* General body and container styling to prevent horizontal overflow */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Container styling */
.container {
    margin: 0 auto; /* Center the content if needed */
    padding: 0;
    max-width: 90%; /* Ensure the container does not exceed the viewport width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Adjust the static banners wrapper */
.static-banners-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent overflow within the grid */
}

/* Adjust the steps content wrapper */
.steps-content-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 auto; /* Center the content */
    max-width: 100%; /* Ensure it stays within the viewport */
}

/* Media queries */
@media (min-width: 1024px) {
    .steps-content-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .steps-content-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

.steps-content-single-arrow {
    display: none;
}


/* Main color */
/* Main color */
:root {
    --main-color: #f88427; /* Main orange color */
    --hover-color: #FFD700; /* Yellow for hover effects */
}

/* Main text color */
h3, 
.steps-content-single-description,
.footer-wrapper p,
.footer-wrapper h2,
.footer-contact,
.footer-contact h2,
.footer-contact a,
.flex.flex-wrap.w-full.justify-center.md\:justify-start,
.flex.flex-wrap.w-full.justify-center.md\:justify-start a,
.text-custom,
.social-link {
    color: var(--main-color);
}

/* Ensure hover styles are applied correctly */
.social-link:hover,
.footer-contact a:hover,
.flex.flex-wrap.w-full.justify-center.md\:justify-start a:hover,
a:hover {
    color: var(--hover-color); /* Set hover color to yellow */
}

/* Additional hover styles for all links */
.footer-wrapper a:hover {
    color: var(--hover-color); /* Ensures footer links also have hover effect */
}

/* Adjustments for links within paragraphs, etc. */
p a:hover {
    color: var(--hover-color); /* Set hover color for links in paragraphs to yellow */
}