/* General reset for the container */
.m-about-containt {
    opacity: 1; /* Make sure text is visible */
}

/* Dissolve and slide animation */
.animate-text {
    opacity: 0; /* Initially hidden */
    transform: translateX(-20px); /* Move left */
    transition: opacity 1.5s ease, transform 1.5s ease;
}

/* Active class to start animation */
.animate-text.active {
    opacity: 1; /* Fade in */
    transform: translateX(0); /* Move to original position */
}

/* Dynamic delay based on data-delay attribute */
.animate-text[data-delay] {
    transition-delay: var(--delay, 0s);
}




   /* General Styles */
    .section-full {
        position: relative;
        overflow: hidden;
    }

.animated-background {
    background: linear-gradient(45deg, rgba(43, 103, 87, 0.8), rgba(43, 103, 87, 0.3));
    background-color: #173d3b; /* Darker background color */
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


    .sector-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-between;
    }

    .sector-item {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.1); /* Subdued white background */
        padding: 15px;
        border-radius: 8px;
        transition: background 0.3s ease, transform 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        width: calc(33% - 20px);
        box-sizing: border-box;
        animation: cardAnimation 0.5s ease forwards; /* Added animation for cards */
        opacity: 0; /* Initial opacity for fade-in effect */
    }

    @keyframes cardAnimation {
        0% {
            transform: translateY(20px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .sector-icon img {
        width: 40px;
        height: 40px;
        margin-right: 15px;
        transition: transform 0.3s ease;
    }

    .sector-item:hover .sector-icon img {
        transform: scale(1.1);
    }

    .sector-content {
        color: #ffffff; /* Text color for better visibility */
        text-decoration: none;
        font-size: 16px;
        transition: color 0.3s ease;
    }

    .sector-content a:hover {
        color: #ffb600; /* Hover color */
    }

    /* Card Styles */
    .animated-box {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 10px;
        background-color: #ffffff; /* Keep cards white for contrast */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .animated-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    /* Contact Box Styles */
    .contact-box {
        background-color: #01303d;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    .contact-box h3 {
        margin-bottom: 20px;
    }

    /* Button Styles */
    .site-button-link {
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid #ffb600;
        color: #ffb600;
        text-transform: uppercase;
        font-weight: bold;
        border-radius: 5px;
        transition: all 0.4s ease;
        overflow: hidden;
    }

    .site-button-link:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(255, 182, 0, 0.3);
        transform: translateY(100%);
        transition: all 0.4s ease;
        z-index: 1;
    }

    .site-button-link:hover:before {
        transform: translateY(0);
    }

    .site-button-link:hover {
        color: #fff;
    }

    .arrow-animation {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    .site-button-link:hover .arrow-animation {
        transform: translateX(5px);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .sector-item {
            width: calc(50% - 20px); /* Adjust for 2 items per row on smaller screens */
        }
    }

    @media (max-width: 576px) {
        .sector-item {
            width: 100%; /* Full width for small screens */
        }
    }

   /* General styles for service section */
    .services-half-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* Style for each card */
    .mt-icon-box-wraper {
        flex: 1 0 calc(25% - 20px); /* Four items per row, minus margins */
        margin: 10px; /* Space between cards */
        position: relative; /* For positioning */
        background-color: #2b6757; /* Set background color */
        border-radius: 8px; /* Optional: rounded corners */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: shadow for depth */
        opacity: 0; /* Start invisible */
        transform: translateY(20px); /* Start slightly below */
        animation: fadeIn 0.5s ease forwards; /* Apply fade-in animation */
        transition: transform 0.3s ease; /* Smooth hover effect */
    }

    /* Equal height for all cards */
    .icon-count-2 {
        height: 100%; /* Make icon container full height */
        display: flex;
        flex-direction: column; /* Align items vertically */
        justify-content: space-between; /* Space out contents */
        padding: 30px; /* Added padding for content */
    }

    /* Fade-in animation */
    @keyframes fadeIn {
        from {
            opacity: 0; /* Start invisible */
            transform: translateY(20px); /* Start slightly below */
        }
        to {
            opacity: 1; /* Fade in */
            transform: translateY(0); /* Move to original position */
        }
    }

    /* Apply staggered animation delay to each card */
    .mt-icon-box-wraper:nth-child(1) { animation-delay: 0s; }
    .mt-icon-box-wraper:nth-child(2) { animation-delay: 0.1s; }
    .mt-icon-box-wraper:nth-child(3) { animation-delay: 0.2s; }
    .mt-icon-box-wraper:nth-child(4) { animation-delay: 0.3s; }

    /* Responsive adjustments */
    @media (max-width: 992px) {
        .mt-icon-box-wraper {
            flex: 1 0 calc(50% - 20px); /* Two items per row on medium screens */
        }
    }

    @media (max-width: 576px) {
        .mt-icon-box-wraper {
            flex: 1 0 100%; /* Full width for small screens */
        }
    }


    /* Background Animation */
.sagar {
  padding-top: 80px;
  padding-bottom: 30px;
  background: linear-gradient(-45deg, #01303d, #025b6e, #01303d, #025b6e);
  background-size: 200% 200%;
  animation: backgroundAnimation 12s ease infinite;
/*  border-radius: 12px;*/
/*  overflow: hidden;*/
}

.sagarabout {
  padding-top: 80px;
  padding-bottom: 30px;
  background: linear-gradient(-45deg, #002D42, #01303d, #025b6e, #002D42);

  background-size: 200% 200%;
  animation: backgroundAnimation 12s ease infinite;
/*  border-radius: 12px;*/
  overflow: hidden;
}

@keyframes backgroundAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}