* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -o-font-smoothing: antialiased;
}

*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
    outline: 0.125rem solid #4d65ff;
    outline-offset: 0.125rem;
}


/* Get rid of top margin on first element in any rich text element */

.w-richtext> :not(div):first-child,
.w-richtext>div:first-child> :first-child {
    margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */

.w-richtext>:last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
    margin-bottom: 0 !important;
}

/* Prevent all click and hover interaction with an element */

.pointer-events-off {
    pointer-events: none;
}

/* Enables all click and hover interaction with an element */

.pointer-events-on {
    pointer-events: auto;
}

/* Create a class of .div-square which maintains a 1:1 dimension of a div */

.div-square::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/* Make sure containers never lose their center alignment */

.container-medium,
.container-small,
.container-large {
    margin-right: auto !important;
    margin-left: auto !important;
}


/* Apply "..." after 3 lines of text */

.text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */

.text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Adds inline flex display */

.display-inlineflex {
    display: inline-flex;
}

/* These classes are never overwritten */

.hide {
    display: none !important;
}

@media screen and (max-width: 991px) {
    .hide,
    .hide-tablet {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .hide-mobile-landscape {
        display: none !important;
    }
}

@media screen and (max-width: 479px) {
    .hide-mobile {
        display: none !important;
    }
}

.margin-0 {
    margin: 0rem !important;
}

.padding-0 {
    padding: 0rem !important;
}

.spacing-clean {
    padding: 0rem !important;
    margin: 0rem !important;
}

.margin-top {
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
}

.padding-top {
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
}

.margin-right {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
}

.padding-right {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
}

.margin-bottom {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}

.padding-bottom {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

.margin-left {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
}

.padding-left {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
}

.margin-horizontal {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
}

.padding-horizontal {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.margin-vertical {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}

.padding-vertical {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

/* Apply "..." at 100% width */

.truncate-width {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Removes native scrollbar */

.no-scrollbar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.service-title {
font-size: 2.5rem;
font-weight: bold;
color: #2c3e50;
margin-bottom: 40px;
}

.row-equal-height {
display: flex;
flex-wrap: wrap;
}

.service-card {
display: flex;
flex-direction: column;
transition: transform 0.3s ease-in-out;
border: none;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
height: 100%;
flex: 1;
}

.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.service-card-header {
background-color:#29b94a;
color: #fff;
border-radius: 10px 10px 0 0;
padding: 20px;
text-align: center;
}

.service-card-body {
padding: 30px;
background-color: #fff;
border-radius: 0 0 10px 10px;
flex-grow: 1; /* Ensures body takes the available space */
}

.service-card-body ul {
list-style-type: square;
padding-left: 20px;
}

.service-card-body p {
color: #7f8c8d;
font-size: 1.1rem;
}

.service-card-footer {
text-align: center;
padding: 15px;
background-color: #f1f1f1;
border-radius: 0 0 10px 10px;
}

.service-icon {
font-size: 3rem;
color: #2980b9;
}

.service-card img {
border-radius: 10px;
}
.accordion-button:focus, .accordion-button:active {
box-shadow: none; /* Removes the blue outline */
border-color: transparent; /* Removes the blue border */
background-color: transparent; /* Keeps the background transparent */
color: inherit; /* Ensures text color remains unchanged */
}

/* Optional: Change the background and text color for accordion buttons */
.accordion-button {
background-color: #f8f9fa; /* Change the background color */
color: #495057; /* Change the text color */
}

.accordion-button:not(.collapsed) {
background-color: #007bff; /* Color for active state */
color: white; /* Text color when expanded */
}
.carousel-container {
overflow: hidden; /* Hide the overflow to create the scrolling effect */
position: relative;
}

.carousel-track {
display: flex; /* Align items horizontally */
animation: scroll 5s linear infinite; /* Infinite scroll animation */
}

.carousel-item {
min-width: 20%; /* Each item takes up 20% of the screen width */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}

.carousel-box {
background-color: #f8f9fa; /* Light background */
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel-box img {
width: 100%; /* Make image take full width of its container */
border-radius: 10px;
transition: transform 0.3s ease-in-out;
}


.carousel-box:hover img {
transform: scale(1.05); /* Zoom effect on hover */
}
.industries {
padding: 50px 20px;
text-align: center;
background-color: #ffffff;
}

.industries h2 {
font-size: 2.5rem;
margin-bottom: 30px;
color: #333;
}

/* Grid Layout */
.industries-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}

/* Card Styling */
.industry-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
overflow: hidden;
}

.industry-card:hover {
transform: translateY(-10px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.industry-card img {
width: 100%;
height: 150px;
object-fit: cover;
border-bottom: 1px solid #ddd;
}

.industry-card h3 {
font-size: 1.2rem;
color: #333;
margin: 15px 0;
padding: 0 10px;
}


/* The scrolling animation */
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); } /* Move the content to the left */
}
.box {
height: 250px; /* Fixed height for all boxes */
width: 100%;   /* Full width within the flex-fill container */
}
.middle{
display:flex;
flex-direction: column;
align-items: center;
}
.vision-box {
border: 1px solid #ddd; /* Border around the box */
border-radius: 8px;     /* Rounded corners */
padding: 20px;          /* Padding inside the box */
background-color: #f9f9f9; /* Light background color */
}
.vision-box img {
width: 100px; /* Set the image width */
height: 100px; /* Set the image height */
margin-bottom: 15px; /* Add space below the image */
}
.industry-box {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
text-align: center;
padding: 15px;
}
.industry-box img {
width: 100%; /* Full width of the container */
height: 200px; /* Fixed height for image */
object-fit: cover; /* Ensures the image fits the box proportionally */
border-radius: 10px 10px 0 0; /* Rounded corners on the top */
}
.industry-box h3 {
font-size: 1.25rem;
margin: 15px 0;
color: #333;
}
.industry-box p {
font-size: 1rem;
color: #555;
}