* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    /* background:#fff; */
    /* background: #F7F9FC; */
    background: #F0F8FF;
}

:root {
    /* --primary-color: #00b894; */
    --primary-color: #1a73e8;
    --hover-color: #00a382;
    --bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --card-shadow: 0 10px 30px rgba(0,0,0,0.1);
    --hover-shadow: 0 15px 40px rgba(0,0,0,0.15);
    --gradient-start: #2563eb;
    --gradient-end: #3b82f6;
    accent-color: #06b6d4;
     --card-bg: #ffffff;
     --primary: #2563eb;
     --hover: #1d4ed8;
     /* --background: #fafafa; */
     --background: black;
     /* background: #fff; */
     --text: #1f2937;
     --secondary-text: #4b5563;
     --gradient-1: linear-gradient(135deg, #2563eb, #3b82f6);
     --gradient-2: linear-gradient(45deg, #1e40af, #2563eb);
     --text-color: #1f2937;
            --light-bg: #f3f4f6;
            --white: #ffffff;
  }


/* .header {
    position: relative;
    width: 100%;
    height: auto; 
    z-index: 2; 
    background: transparent;
} */

.header {
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure it stays above other content */
    /* background: #2C2C2C; */
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
  }

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    height:100vh;
    object-fit: cover;
    z-index: -1; /* Keeps video behind other content */
}

/* add new start */

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;  /* This controls how much of the left side has overlay */
    height: 100%;
    /* background: linear-gradient(
        to right,
        rgba(173, 216, 230, 0.5) 0%,    
        rgba(173, 216, 230, 0) 100%   
    ); */
    background:linear-gradient(to right, rgb(2 190 251 / 50%) 0%, rgba(173, 216, 230, 0) 100%);
    z-index: 0;
}

/* add new end */

/* .video-content {
    position: relative;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 60%;
    color: black;
    text-align: left;
    z-index: 1;
    padding: 10px;
} */
/* .video-title {
    position: absolute;
   
    top: 50%;
    left: 10%; 
    transform: translateY(-50%);
    width: 60%; 
    
    color: black;
    text-align: left;
    z-index: 1;
    padding: 10px; 
} */

.video-title {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    margin-top: -80px; /* Adjust based on your header height */
    padding-top: 80px; /* Add padding to prevent content overlap */
}

/* .video-title {
    position: relative;
    width: 100%;
    height: 90vh;
   
    color: black;
    text-align: left;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
} */

/* .video-title h1 {
    font-size: 2.5rem; 
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    
}

.video-title p {
    font-size: 1.2rem;
    line-height: 1.6;
  
} */


/* old vedio-content css code start */
/* .video-content h1 {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.video-content p {
    font-size: 1.2rem;
    line-height: 1.6;
} */
/* old vedio-content css code end */


/* add new vedio-content css code start */

.video-content {
    position: relative;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 60%;
    color: black;
    text-align: left;
    z-index: 1;
    padding: 10px;
}

.animated-heading {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-family: "Poppins", serif;
    font-weight: 800;
    margin-bottom: 2rem; /* Increase the space between heading and paragraph */
    line-height: 1.2;
    background: #fff;
    /* background: rgba(188,141,27,255); */
    /* background: rgba(55,132,140,255); */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    transform: translateY(20px);
    animation: revealText 0.8s ease forwards;
}

.animated-paragraph {
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.8;
    font-family: "Inter Tight", serif;
    /* font-family: "Roboto Serif", serif; */
    /* color: #4A4A4A; */
    color: #fff;
    margin-top: 1rem; /* Optional: Add additional space from the heading */
    opacity: 0;
    transform: translateY(20px);
    animation: revealText 0.8s ease forwards 0.5s;
    /* font-weight: bold; */
    
}

.animated-paragraph span {
    opacity: 0;
    display: inline-block;
    animation: revealWords 0.5s ease forwards;
}

#animatedText {
    display: flex; /* Flexbox for automatic spacing */
    flex-wrap: wrap; /* Ensures wrapping for long text */
    gap: 0.3rem; /* Space between words */
}

#animatedText span {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

/* add new start */

/* Animated Button */
.animated-button {
    display: inline-block;
    margin-top: 20px;
    padding: 6px 15px;
    font-size: 1.2rem;
    font-weight: 600;
    /* text-transform: uppercase; */
    text-decoration: none;
    color: #2C2C2C;
    background: #fff;
    border: none;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.3);
}

.animated-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,  #136D71, #259EA6);
    transition: all 0.4s ease-in-out;
}

.animated-button:hover {
    background: linear-gradient(90deg, #259EA6, #136D71);
    transform: scale(1.05);
    box-shadow: 0px 6px 15px rgba(0, 123, 255, 0.5);
    color: #fff;
}

.animated-button:hover::before {
    left: 100%;
}

/* add new end */

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

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


.gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(74,144,226,0.1), rgba(43,45,66,0.1));
    z-index: -1;
    transform: translateX(-100%);
    animation: gradientSlide 2s ease forwards;
}

@keyframes gradientSlide {
    to {
        transform: translateX(0);
    }
}

/* Hover Effects */
.video-content:hover .gradient-bg {
    background: linear-gradient(45deg, rgba(74,144,226,0.15), rgba(43,45,66,0.15));
    transition: background 0.3s ease;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .video-content {
        width: 95%;
        padding: 2rem;
    }
    .dropdown-image {
        max-height: 80px; /* Reduce image size for smaller screens */
      }

      /* add new start */
      .dropdown-links a i {
       display:none;
      }
}


@media screen and (max-width: 480px) {
    .video-content {
        padding: 1.5rem;
    }
}
/* add new vedio-content end */
/* add new customapps header css start */

.image-title {
    position: relative; 
    width: 100%; 
    height: 90vh; 
    overflow: hidden; 
    /* background: #beeaf5;  */
    background: #F7F9FC;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -80px; 
    padding-top: 80px; 
}

.image-content { 
    position: relative; 
    top: 50%; 
    left: 10%; 
    transform: translateY(-50%); 
    width: 50%; 
    color: black;  
    text-align: left; 
    z-index: 1; 
    padding: 10px; 
} 

.image-content h1 { 
    font-size: 2.5rem; 
    font-weight: bold; 
    margin-bottom: 20px; 
    color: #2C2C2C; 
    font-family: "Poppins", serif;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Heading के लिए hover effect */
.image-content h1::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0; /* Positioned at the bottom */
    width: 100%;
    height: 30%; /* Covers bottom half of the heading */
    /* background-color: rgba(92, 225, 230, 0.5); */
    /* background-color: rgba(92, 225, 230, 0.5); */
    background-color: rgba(80, 190, 200, 0.5);

   
    transition: height 0.3s ease-in-out;
    z-index: -1;
}
.image-content h1:hover::before {
    height: 100%;
}

.image-content p { 
    font-size: 1.2rem; 
    line-height: 1.6; 
    color: #484747; 
    font-weight: bold; 
    font-family: "Inter Tight", serif; 
}



.image-title_1 {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    background-image: url('assets/img/bg_custom.jpg');
    background-size: cover; /* Makes image cover the container */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents image from repeating */
    margin-top: -80px;
    padding-top: 80px;
}

.image-content_1 {
    position: relative;
    top: 50%;
    left: 10%;
    /* left:50%; */
    transform: translateY(-50%);
    width: 50%;
    color: black; /* Adjust text color based on your background image */
    text-align: left;
    z-index: 1;
    padding: 10px;
}

.image-content_1 h1 {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    margin-bottom: 20px;
}

.image-content_1 p {
    font-size: 1.2rem;
    line-height: 1.6;
}
/* add new custom header css end */

/* add on contact background title css start */


.image-title_2 {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    background-image: url('assets/img/contact_1.jpg');
    background-size: cover; /* Makes image cover the container */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents image from repeating */
    margin-top: -80px;
    padding-top: 80px;
}

.image-content_2 {
    position: relative;
    top: 50%;
    left: 10%;
    /* left:50%; */
    transform: translateY(-50%);
    width: 50%;
    color: black; /* Adjust text color based on your background image */
    text-align: left;
    z-index: 1;
    padding: 10px;
}

.image-content_2 h1 {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    margin-bottom: 20px;
}

.image-content_2 p {
    font-size: 1.2rem;
    line-height: 1.6;
}
/* add on contact end */
/* Responsive Design */

@media (max-width: 1200px) {
    .image-content {
        width: 70%;
    }
    .image-content_1 {
        width: 70%;
    }
}
@media (max-width: 992px) { /* Tablet View */
    /* .video-title {
        width: 80%; 
        left: 5%; 
    } */
    .video-content {
        width: 80%;
        left: 5%;
    }
    /* .video-title h1 {
        font-size: 2rem; 
    }

    .video-title p {
        font-size: 1rem; 
    } */
    .video-content h1 {
        font-size: 2rem; 
    }

    .video-content p {
        font-size: 1rem; 
    }

    .image-content {
        width: 80%;
        left: 5%;
    }

    .image-content h1 {
        font-size: 2.2rem;
    }

    .image-content p {
        font-size: 1.1rem;
    }
    .image-content_1 {
        width: 80%;
        left: 5%;
    }

    .image-content_1 h1 {
        font-size: 2.2rem;
    }

    .image-content_1 p {
        font-size: 1.1rem;
    }
    .image-content_2 {
        width: 80%;
        left: 5%;
    }

    .image-content_2 h1 {
        font-size: 2.2rem;
    }

    .image-content_2 p {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) { /* Mobile View */
    /* .video-title {
        width: 90%; 
        left: 5%; 
        top: 40%; 
        transform: translateY(-40%);
        padding: 15px;
    } */
    .video-content {
        width: 80%;
        left: 5%;
    }
    /* .video-title h1 {
        font-size: 1.8rem; 
    }

    .video-title p {
        font-size: 0.9rem; 
    } */
    .video-content h1 {
        font-size: 1.8rem; 
    }

    .video-content p {
        font-size: 0.9rem; 
    }
    .image-content {
        width: 90%;
        left: 5%;
    }

    .image-content h1 {
        font-size: 2rem;
    }

    .image-content p {
        font-size: 1rem;
        line-height: 1.5;
    }
    .image-content_1 {
        width: 90%;
        left: 5%;
    }

    .image-content_1 h1 {
        font-size: 2rem;
    }

    .image-content_1 p {
        font-size: 1rem;
        line-height: 1.5;
    }
    .image-content_2 {
        width: 90%;
        left: 5%;
    }

    .image-content_2 h1 {
        font-size: 2rem;
    }

    .image-content_2 p {
        font-size: 1rem;
        line-height: 1.5;
    }
}

@media (max-width: 480px) { /* Small Mobile View */
    /* .video-title {
        width: 95%; 
        left: 2.5%; 
        top: 35%;
        transform: translateY(-35%);
    } */
    .video-content {
        width: 95%;
        left: 2.5%;
    }
    /* .video-title h1 {
        font-size: 1.5rem; 
    }

    .video-title p {
        font-size: 0.8rem;
        line-height: 1.4;
    } */
    .video-content h1 {
        font-size: 1.5rem; 
    }

    .video-content p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .image-content {
        width: 95%;
        left: 2.5%;
    }

    .image-content h1 {
        font-size: 1.8rem;
    }

    .image-content p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    .image-content_1 {
        width: 95%;
        left: 2.5%;
    }

    .image-content_1 h1 {
        font-size: 1.8rem;
    }

    .image-content_1 p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    .image-content_2 {
        width: 95%;
        left: 2.5%;
    }

    .image-content_2 h1 {
        font-size: 1.8rem;
    }

    .image-content_2 p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}
@media (max-width: 320px) {
    .image-content h1 {
        font-size: 1.5rem;
    }

    .image-content p {
        font-size: 0.85rem;
    }
    .image-content_1 h1 {
        font-size: 1.5rem;
    }

    .image-content_1 p {
        font-size: 0.85rem;
    }
    .image-content_2 h1 {
        font-size: 1.5rem;
    }

    .image-content_2 p {
        font-size: 0.85rem;
    }
    
}

/* add new start */



/* add new end */

.nav-container {
    position: relative;
    z-index: 10; /* Keeps navigation above video */
    max-width: 1400px;
    margin: 0 auto;
    /* padding: 15px 20px; */
    padding: 0 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
   
}

/* Logo styles */
.logo-wrapper {
    display: flex;
    align-items: center;
    position: relative;
   
    z-index: 1001;
}



.desktop-logo {
    display: block;
}

.mobile-logo {
    display: none;
    width: 40px;
    height: 40px;
}

/* Adjust desktop logo size */
.desktop-logo img {
    /* width: 150px;  */
    height: 60px; /* Updated height */
    margin-bottom: -10px;
    
}

/* Adjust mobile logo size */
.mobile-logo img {
    width: 60px; /* Updated width */
    height: 50px; /* Updated height */
    background: none; /* Ensure no background */
    mix-blend-mode: normal; /* Reset blending mode */
}


/* Navigation styles */
.main-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    flex: 1;  /* Added to take available space */
    justify-content: space-around;  /* Center the navigation */
}

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

.nav-item {
    position: static;  /* Changed from relative to static */
}

.nav-link {
    /* color: #333; */
    color:#fff;
    /* color:#fff; */
    /* color:#5ce1e6; */
    text-decoration: none;
    padding: 10px;
    font-size: 16px;
    display: block;
    font-family: "Poppins", serif;
}

.nav-link:hover{
    color:#37848c;
    
}



.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
    display: flex;
    /* flex-wrap: wrap; */
    gap: 20px;
    width: auto; /* Dynamically adjust width */
    max-width: 90%; /* Ensure it doesn't exceed the parent container's width */
    min-width: 200px; /* Set a minimum width for small content */
    white-space: nowrap; /* Prevent line breaks in links */
    z-index: 1000;
  }

.dropdown-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.dropdown-title {
    font-size: 18px;
    font-weight: 600;
    color: #37848c;
    text-align: left;
    width: 100%;
    font-family: "Poppins", serif;
}

.dropdown-links-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for the items */
    gap: 20px; /* Space between columns */
    width: 100%;
}

.dropdown-image {
    width: 100%;
    height: auto;
    max-height: 120px; /* Restrict image height */
    object-fit: cover;
    /* border-radius: 8px; */
    margin-bottom: 15px;
}


/* add new start */
/* Dropdown Icon Styling */
.nav-link .dropdown-icon {
    margin-left: 5px;
    font-size: 12px;
    transition: transform 0.3s ease;
  }
  
  /* Rotate Icon on Hover */
  .nav-item:hover .dropdown-icon {
    transform: rotate(180deg);
  }
/* add new end */

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}


.dropdown-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between list items */
    font-family: "Poppins", serif;
    font-size: 14px;
}


.dropdown-links li {
    margin-bottom: 5px;
}

.dropdown-links a i {
    margin-right: 8px; /* Adjust space between icon and text */
    font-size: 1.2rem; /* Adjust icon size */
  }

/* .dropdown-links li a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
} */

/* Dropdown Links */
.dropdown-links  a {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    position: relative;
  }
  /* Arrow Icon Styling */
  .arrow-icon {
    opacity: 0; /* Arrow is hidden by default */
    font-size: 12px;
    color: #999;
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
    margin-left: 10px; /* Ensure there’s no gap between the text and arrow */
  }
.dropdown-links a:hover {
    /* color: #fff; */
    color: #37848c;
}
.dropdown-links a:hover .arrow-icon {
    opacity: 1; /* Make arrow visible on hover */
    transform: translateX(5px); /* Move arrow to the right */
  }
/* Button styles */
.btn-group {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1001;
}
.search-icon {
    width: 23px;
    height: 26px;
    cursor: pointer;
}

.connect-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.connect-btn:hover {
    background: #333;
}

/* Mobile menu button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001; 
}


.hamburger {
    width: 25px;
    height: 3px;
    /* background: #fff; */
    background:#fff;
    position: relative;
    transition: all 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background: #fff;
    /* background: #5ce1e6; */
    transition: all 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

/* Menu overlay */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    display: block;
}

/* Responsive styles */
@media (max-width: 992px) {

    .dropdown-image {
        display: none; /* Hide dropdown images in mobile view */
    }

   
    .desktop-logo {
        display: none;
    }

    .mobile-logo {
        display: block;
    }
    .main-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: #2C2C2C;
        flex-direction: column;
        padding: 80px 20px 20px;
        transition: right 0.3s ease;
        align-items: center;
        z-index: 1000;
        overflow-y: auto; /* Enable vertical scrolling */
    }
    .main-menu.active {
        right: 0;
    }

    .navbar-nav {
        flex-direction: column;
        width: 100%;
        max-width: 400px; /* Limit content width for readability */
        margin: 0 auto;
        text-align: center;
    }

    .nav-item {
        width: 100%;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        display: none;
        box-shadow: none;
        width: 100%;
        max-width: 100%;
        transform: none;
        left: 0;
        background: #fff;
    }
    

    .menu-toggle {
        display: block;
    }

   
    .connect-btn.desktop {
        display: none;
    }

    /* Animate hamburger to X */
    .hamburger.active {
        background: transparent;
      
    }

    .hamburger.active::before {
        top: 0;
        transform: rotate(45deg);
    }

    .hamburger.active::after {
        bottom: 0;
        transform: rotate(-45deg);
    }

    .dropdown-links a {
        color: #2C2C2C;
        text-decoration: none;
        font-size: 10px;
        transition: color 0.3s ease;
        padding:0
    }
    
    
}

@media (max-width: 1024px) {
    .desktop-logo img {
        width: 150px;
        height: 70px;
    }

    .mobile-logo img {
        width: 90px;
        height: 60px;
    }
}
@media (max-width: 768px) {
    .desktop-logo img {
        width: 200px;
        height: 50px;
    }

    .mobile-logo img {
        width: 50px;
        height: 50px;
    }
}

/* add new start */


/* add new end */



@media (max-width: 576px) {
    .nav-container {
        padding: 10px;
    }

    .btn-group {
        gap: 10px;
    }
    .desktop-logo img {
        width: 180px;
        height: 40px;
    }

    .mobile-logo img {
        width: 60px;
        height: 50px;
    }
}


/* add new logo slider start */
.company-section {
    position: relative;
    /* background: #f5f5f5; */
    background: #F0F8FF;
    padding: 60px 20px;
    margin: 20px 0;
    text-align: center;
}

.section-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 20px;
}

.company-description1 {
    max-width: 1200px;
    margin: 0 auto 40px;
    line-height: 1.6;
    color: #666;
    font-family: "Inter Tight", serif;
}

.logo-section {
    position: absolute;
    bottom: -45px;
    left: 0;
    width: 100%;
}

.logo-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* background: white; */
    padding: 15px 0;
    /* box-shadow: 0 0 20px rgba(0,0,0,0.1); */
    border-radius: 10px;
    margin: 0 auto;
    max-width: 100%;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.logo-carousel {
    display: inline-flex;
    animation: slide 20s linear infinite;
    width: max-content;
}

.logo-carousel:hover {
    animation-play-state: paused;
}

.carousel-item {
    flex: 0 0 auto;
    width: 200px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
}

.carousel-item img {
    max-width: 180px;
    max-height: 180px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.logo-track {
    display: flex;
    width: max-content;
}

@media (max-width: 768px) {
    .carousel-item {
        width: 150px;
        margin: 0 10px;
    }
    .carousel-item img {
        max-width: 90px;
        max-height: 50px;
    }
    .company-section {
        padding: 40px 15px;
        margin: 40px 0;
    }
}
/* add new logo slider end */
/* Background Image Section */
/* Background Image Section */
.section {
    position: relative;
    width: 100%; /* Adds space on left and right */
    height: 600px;
    background: url('assets/img/it-remove.jpg') center/cover no-repeat;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    color: white;
    margin: 70px auto; 
   
    border-radius: 15px; /* Rounded corners */
    overflow: hidden; /* Ensures content stays within rounded corners */
}

/* Overlay */
.section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    border-radius: 15px; /* Rounded corners for overlay */
}

/* Content */
.section .content {
    position: relative;
    /* z-index: 2; */
    max-width: 600px;
    padding: 20px;
}

/* Open Letter Box Styling */
.section .content .openletter-box {
    /* background-color: white; */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #333;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Light white border */
    text-align: left;
    margin-left: 40px;
}

/* Heading, Paragraph, and Button Styling */
.section .content .openletter-box h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #24908D;
    /* color: #37848c; */
    font-family: "Poppins", serif;
}

.section .content .openletter-box p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    /* color: #555; */
    color:#202020;
    font-family: "Inter Tight", serif;
}

/* .section .content .openletter-box button {
    padding: 10px 20px;
    font-size: 1rem;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
} */

/* .section .content .openletter-box button:hover {
    background-color: #0056b3;
} */

/* Responsive Design */
@media (max-width: 1024px) {
    .section {
        height: auto;
        padding: 20px;
        margin: 50px auto;
    }

    .section .content {
        max-width: 90%;
    }

    .section .content .openletter-box {
        margin-left: 20px;
    }

    .section .content .openletter-box h1 {
        font-size: 1.8rem;
    }

    .section .content .openletter-box p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .section {
        flex-direction: column; /* Stack content vertically */
        padding: 15px;
    }

    .section .content {
        max-width: 100%;
        text-align: center; /* Center-align for smaller devices */
    }

    .section .content .openletter-box {
        margin: 0 auto;
        text-align: center;
        padding: 15px;
    }

    .section .content .openletter-box h1 {
        font-size: 1.6rem;
    }

    .section .content .openletter-box p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .section {
        margin: 30px auto;
    }

    .section .content .openletter-box h1 {
        font-size: 1.4rem;
    }

    .section .content .openletter-box p {
        font-size: 0.8rem;
    }
}






button {
    margin: 20px;
  }
  .custom-btn {
    width: 130px;
    height: 40px;
    color: #2C2C2C;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
     box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
   
  }

  /* 6 */
.btn-6 {
    /* background: rgb(247,150,192); */
   /* background:linear-gradient(90deg, #5ce1e6, #89eff1); */
   /* background: linear-gradient(90deg, #5caeb3, #37848c); */
   background: #259EA6;
  /* background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%); */
  /* background: radial-gradient(circle, rgb(170, 237, 240) 0%, rgba(118,174,241,1) 100%); */
  /* background: radial-gradient(circle, #bc8d1b 0%, #bc8d1b 100%); */

 
  line-height: 42px;
    padding: 0;
    border: none;
   
  }
  .btn-6 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
   
  }

  .btn-6 span a{
    text-decoration: none;
    color:black;
    font-family: "Montserrat", serif;

  }
  
  .btn-6:before,
  .btn-6:after {
    position: absolute;
    content: "";
    height: 0%;
    width: 1px;
   box-shadow:
     -1px -1px 20px 0px rgba(255,255,255,1),
     -4px -4px 5px 0px rgba(255,255,255,1),
     7px 7px 20px 0px rgba(0,0,0,.4),
     4px 4px 5px 0px rgba(0,0,0,.3);


   
  }
  .btn-6:before {
    right: 0;
    top: 0;
    transition: all 500ms ease;
  }
  .btn-6:after {
    left: 0;
    bottom: 0;
    transition: all 500ms ease;
  }
  .btn-6:hover{
    background: #fff;
    /* color: #76aef1; */
    color:#bc8d1b;
    box-shadow: none;
  }
  .btn-6:hover:before {
    transition: all 500ms ease;
    height: 100%;
  }
  .btn-6:hover:after {
    transition: all 500ms ease;
    height: 100%;
  }
  .btn-6 span:before,
  .btn-6 span:after {
    position: absolute;
    content: "";
    box-shadow:
     -1px -1px 20px 0px rgba(255,255,255,1),
     -4px -4px 5px 0px rgba(255,255,255,1),
     7px 7px 20px 0px rgba(0,0,0,.4),
     4px 4px 5px 0px rgba(0,0,0,.3);

   
    
  }
  .btn-6 span:before {
    left: 0;
    top: 0;
    width: 0%;
    height: .5px;
    transition: all 500ms ease;
  }
  .btn-6 span:after {
    right: 0;
    bottom: 0;
    width: 0%;
    height: .5px;
    transition: all 500ms ease;
  }
  .btn-6 span:hover:before {
    width: 100%;
  }
  .btn-6 span:hover:after {
    width: 100%;
  }
  
  
/* 3 */
.btn-3 {
    display: inline-block;
    margin-top: 20px;
    width: 130px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    font-family: "Montserrat", serif;
    color: #fff;
    background: rgb(37, 158, 166);
    border: none;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.3);
}

.btn-3 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 1;
    font-size: 14px;
}

/* Border animation effects */
.btn-3:before,
.btn-3:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: rgba(55,132,140,255);
    transition: all 0.3s ease;
    z-index: 0;
}

.btn-3:before {
    height: 0%;
    width: 2px;
}

.btn-3:after {
    width: 0%;
    height: 2px;
}

/* Span border animation */
.btn-3 span:before,
.btn-3 span:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background: rgba(55,132,140,255);
    transition: all 0.3s ease;
}

.btn-3 span:before {
    width: 2px;
    height: 0%;
}

.btn-3 span:after {
    width: 0%;
    height: 2px;
}

/* Hover effects */
.btn-3:hover {
    background: transparent;
    box-shadow: 0px 6px 15px rgba(0, 123, 255, 0.5);
    transform: scale(1.05);
}

.btn-3:hover:before {
    height: 100%;
}

.btn-3:hover:after {
    width: 100%;
}

.btn-3:hover span {
    color: #fff;
    background: #2C2C2C;
}

.btn-3:hover span:before {
    height: 100%;
}

.btn-3:hover span:after {
    width: 100%;
}

/* Gradient animation */
.btn-3::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #136D71, #259EA6);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.btn-3:hover::before {
    left: 100%;
}
  /* services container start */

  .solution-layout {
    width: 100%;
    /* max-width: 1400px; */
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    overflow: hidden;
    min-height: 600px;
    border:1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.solution-aside {
    width: 300px;
    /* background: #f8fafc; */
    background:#fff;
    padding: 2rem;
    border-right: 1px solid #e2e8f0;
}

.aside-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #2C2C2C;
    font-family: "Poppins", serif;
    /* color: #bc8d1b; */
}

.aside-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #5ce1e6, #2dbec4);
    /* margin: 1rem auto; */
    border-radius: 2px;
}

.aside-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aside-item {
    padding: 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    
}

.aside-item.is-active {
    background: #e2e8f0;
    /* color:#64748b; */
}

.solution-item {
    display: none;
}

.solution-item.is-active {
    display: block;
}

.aside-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    /* background: #5ce1e6; */
    background: #24908D;
    /* background:#bc8d1b; */
    transform: scaleY(0);
    transition: transform 0.3s ease;
    border-radius: 0 2px 2px 0;
}

.aside-item:hover {
    background: #f1f5f9;
    /* color: #64748b; */
  
}

.aside-item:hover::before {
    transform: scaleY(1);
}

.aside-item-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2C2C2C;
    font-family: "Poppins", serif;
    /* color:#bc8d1b; */
}

.aside-item-desc {
    font-size: 0.9rem;
    /* color: #5c646e; */
    color: #97999b;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.solution-main {
  
    flex: 1;
    padding: 2rem;
    background-size: cover;
    background-position: center;
    /* background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(''); */
    /* background-image: url('assets/img/blog_10.jpg'); */
    background-color: #F0F8FF;
    overflow:hidden;
}


  

.solution-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.solution-gallery.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gallery-item {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
    box-shadow: 0 4px 6px rgb(12 12 12 / 38%);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, #5ce1e6, #a2f7fa); */
    background-color: #24908D;

    /* background: linear-gradient(45deg, #c9a040, #f3d28a); */


    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.gallery-item:hover {
    transform: translateY(-5px);
    /* box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1); */
}

.gallery-item:hover::after {
    opacity: 0.95;
}

.item-wrapper {
    position: relative;
    z-index: 2;
}

.item-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.gallery-item:hover .item-icon {
    transform: scale(1.2);
}

.item-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    /* color: #37848c; */
    color:#24908D;
   
    font-family: "Poppins", serif;
    /* color: #bc8d1b; */
    transition: color 0.3s ease;
}

.gallery-item:hover .item-title,
.gallery-item:hover .item-link {
    color: white;
    /* color:#37848c; */
    font-weight: bold;
}
.gallery-item:hover .item-desc{
    /* color:#2C2C2C; */
    color:rgba(255, 255, 255, 0.7882352941);
    font-weight: 500;
}

.item-desc {
    font-size: 0.9rem;
    font-family: "Inter Tight", serif;
    color: #64748b;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.item-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* color: #3b82f6; */
    color: #bc8d1b;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.item-link svg {
    transition: transform 0.3s ease;
}

.gallery-item:hover .item-link svg {
    transform: translateX(5px);
}

.solution-gallery[data-solution] {
    display: none;
}

.aside-item:hover + .solution-gallery[data-solution],
.solution-gallery[data-solution]:hover {
    display: grid;
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .solution-layout {
        flex-direction: column;
    }

    .solution-aside {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .solution-main {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .aside-title {
        font-size: 1.25rem;
    }

    .aside-item-title {
        font-size: 1rem;
    }

    .aside-item-desc {
        font-size: 0.8rem;
    }
}
/* services end */
.card-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
}

.card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.card:hover {
    transform: translateX(20px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.card-content {
    flex: 1;
    z-index: 2;
}

.card-title {
    /* color: #ffffff; */
    color:black;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.card-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: #4a90e2;
    transition: width 0.3s ease;
}

.card:hover .card-title::after {
    width: 100px;
}

.card-description {
    color: #cccccc;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.card-image {
    width: 400px;
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    transition: transform 0.5s ease;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-image {
    transform: scale(1.05) rotate(2deg);
}

.card-button {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: #4a90e2;
    color: white;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.card-button:hover {
    background: #357abd;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeIn 0.8s ease forwards;
}

@media (max-width: 768px) {
    .card {
        flex-direction: column;
        text-align: center;
    }

    .card-image {
        width: 100%;
        max-width: 300px;
    }

    .card:hover {
        transform: translateY(10px);
    }

    .card-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple {
    z-index: 1;
}


/* add new start */
.project-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.project-title {
    text-align: center; /* Center the title */
    font-size: 32px; /* Adjust font size */
    color: #333; /* Set text color */
    margin: 20px 0; /* Space above and below the title */
    font-weight: bold; /* Make the title bold */
    width: 100%; /* Ensures the title takes full width */
}


.project-card_1 {
    position: relative;
    width: 100%;
    max-width: 100%;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.project-card_1:hover {
    transform: translate(10px, -10px);
}

.card-content_1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    /* color: #fff; */
    color:black;
    padding: 20px;
    border-radius: 10px;
    /* height: 300px; */
    height: 400px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 30px 0;
}

/* .project-card_1:nth-child(1) .card-content_1 {
    background-image: url('assets/img/bg_pattern.jpg');
} */

.project-card_1:nth-child(2) .card-content_1 {
    background-image: url('assets/img/bg_pattern.jpg');
}

.project-card_1:nth-child(3) .card-content_1 {
    background-image: url('assets/img/bg_pattern.jpg');
}

.project-card_1:nth-child(4) .card-content_1 {
    background-image: url('assets/img/bg_pattern.jpg');
}

.text-content_1 {
    width: 45%;
}

/* .text-content_1 h3{
    font-size: 24px;
    font-weight: bold;
  margin-top: 80px;
} */

/* .text-content_1 p{
    font-size: 16px;
    color: #223547;
    font-weight: 500;
    max-width: 260px;
    text-align: center;
} */
.project-image_1 {
    width: 100%;
    max-width: 400px;
    height: 200px;
    /* margin-bottom: 10px; */
}


.project-image_1 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px; /* Uncomment if you want rounded corners */
    filter: brightness(0.9) drop-shadow(0 0 15px rgba(0, 0, 0, 0.7)); /* Intensifies the shadow on hover */ filter: brightness(0.9) drop-shadow(0 0 15px rgba(0, 0, 0, 0.7)); /* Intensifies the shadow on hover */
    transition: filter 0.3s ease; /* Smooth transition for the filter effect */
}


/* Responsive Adjustments */
@media (max-width: 1024px) {
    /* For tablets and smaller laptops */
    .card-content_1 {
        height: 250px;
    }

    .text-content_1 {
        width: 50%;
    }

    .project-image_1 {
        width: 45%;
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    /* For mobile devices */
    .card-content_1 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
        height: auto;
    }

    .text-content_1 {
        width: 100%;
        margin-bottom: 15px;
    }

    .project-image_1 {
        width: 80%;
        max-width: 250px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    /* For small mobile screens */
    .project-section {
        gap: 10px;
        padding: 10px;
    }

    .card-content_1 {
        padding: 10px;
        margin: 20px 0;
    }

    .text-content_1 {
        font-size: 0.9rem;
    }

    .project-image_1 {
        width: 100%;
        max-width: 200px;
        height: 120px;
    }
}
/* add new end */



/* Base styles */
.main-title_1 {
    text-align: center;
    color: #2C2C2C;
    /* color: #bc8d1b; */
    margin: 20px 0;
    /* font-size: clamp(24px, 5vw, 32px); */
    font-size: 2.5rem;
    font-family: "Poppins", serif;
    font-weight: bold;
    padding: 0 20px;
}

.main-title_1::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.container_2 {
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
    position: relative;
    min-height: 800px;
    padding: 0 20px;
}

.process-step {
    width: 100%;
    max-width: 380px;
    padding: 30px;
    background: white;
    border-radius: 20px;
    position: absolute;
    opacity: 0;
    transition: all 0.5s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #e1e4e8;
    overflow: hidden;
}

.process-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    /* background: #5ce1e6; */
    background: #37848c;
    /* background: #bc8d1b; */
    border-radius: 3px 0 0 3px;
}

.process-step::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(26, 115, 232, 0.05);
    /* background: rgb(247 235 207,0.05); */
    border-radius: 50%;
    z-index: 0;
 
}

.process-step.active {
    opacity: 1;
    transform: translateY(0);
}

.process-step.completed {
    background: linear-gradient(to right, #f8f9fa, white);
    border-left: 6px solid #34a853;
}

.process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.step-title {
    font-size: 22px;
    font-weight: bold;
    color: #1a73e8;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    font-family: "Poppins", serif;
}

.step-number {
    position: absolute;
    top: -15px;
    /* right: -15px; */
    right:15px;
    font-size: 64px;
    /* color: rgba(26, 115, 232, 0.1); */
    color: rgba(55, 132, 140, 1);
    font-weight: bold;
    z-index: 0;
}

.step-description {
    font-size: 15px;
    color: #5f6368;
    line-height: 1.6;
    margin-top: 10px;
    position: relative;
    z-index: 1;
    font-family: "Inter Tight", serif;
}
.arrow-container {
    position: absolute;
    width: 40px; /* Adjust width if needed */
    height: 40px; /* Adjust height if needed */
    opacity: 0;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-container.active {
    opacity: 1;
}

.arrow-container.glow {
    filter: drop-shadow(0 0 8px rgba(26, 115, 232, 0.7));
}

.arrow-container i {
    font-size: 24px; /* Size of the arrow icons */
    color: #1a73e8; /* Arrow color */
    transition: filter 0.3s ease; /* Transition for glowing effect */
}

.arrow-container.glow i {
    color: rgba(26, 115, 232, 1); /* Change color on glow */
    filter: drop-shadow(0 0 5px rgba(26, 115, 232, 0.7)); /* Glow effect */
}

/* add new responsive css start */

@media screen and (min-width: 1400px) {
    .container {
        width: 80%;
        max-width: 1400px; /* Expand container width */
        min-height: 500px; /* Increase height */
    }
    .process-step {
        width: calc(100% - 100px); /* Adjust step width for larger screens */
        max-width: 420px;
        padding: 40px;
    }
    .step-title {
        font-size: 24px; /* Slightly larger titles */
    }
    .step-number {
        font-size: 72px; /* Bigger number for visual impact */
    }
}


@media screen and (min-width: 1600px) {
    .container {
        max-width: 1600px;
        min-height: 1200px;
    }
    .process-step {
        max-width: 500px;
        padding: 50px;
    }
    .step-title {
        font-size: 28px;
    }
    .step-number {
        font-size: 80px;
    }
}

/* add new responsive css end */

/* Responsive breakpoints */
@media screen and (max-width: 1200px) {
    .process-step {
        width: calc(100% - 60px);
        max-width: 340px;
    }
}

@media screen and (max-width: 992px) {
    .container {
        min-height: 1000px;
    }
    
    .process-step {
        max-width: 320px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        min-height: auto;
        padding-bottom: 50px;
    }
    
    .process-step {
        position: relative;
        max-width: 100%;
        margin-bottom: 30px;
        top: auto !important;
        left: auto !important;
        opacity: 1;
        transform: none;
    }
    
    .step-title {
        font-size: 20px;
    }
    
    .step-description {
        font-size: 14px;
    }
    
    .step-number {
        font-size: 48px;
    }
    
    .arrow-container {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .process-step {
        padding: 20px;
    }
    
    .step-title {
        font-size: 18px;
    }
    
    .step-number {
        font-size: 36px;
        top: -10px;
        right: 10px;
    }
}

/* add execution process end */




  .case-studies-container {
    min-height: 100vh;
    padding: 1rem 2rem;
    position: relative;
    overflow: hidden;
    /* margin-top: 350px; */
    /* margin-top:50px; */
   
}

   /* Header section styles */
   .section-header {
    max-width: 1400px;
    margin: 0 auto 4rem;
    padding: 2rem;
   
    border-radius: 20px;
}

.section-title_2 {
    font-family: "Poppins", serif;
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    /* background: linear-gradient(90deg, #fff, #888); */
    background: #2C2C2C;
   
    /* background: #bc8d1b; */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title_2::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    /* background: linear-gradient(90deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.section-description {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #484747;
    max-width: 800px;
    margin-bottom: 2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.stat-item_1 {
    /* background: rgba(255, 255, 255, 0.03); */
    /* background: linear-gradient(135deg, rgba(55, 132, 140, 0.05) 0%, rgba(55, 132, 140, 0.1) 100%); */
    background: linear-gradient(135deg, rgba(36, 144, 141, 0.05) 0%, rgba(14, 56, 177, 0.1) 100%);
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    border: 1px solid rgba(36, 144, 141, 0.15);
    /* border: 1px solid rgba(55, 132, 140, 0.15); */
    font-family: "Roboto Serif", serif;
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.3s ease;
    /* box-shadow: 0 4px 6px rgba(55, 132, 140, 0.05); */
    box-shadow: 0 4px 6px rgba(36, 144, 141, 0.05);
}

.stat-item_1:hover {
    transform: translateY(-5px);
    /* box-shadow: 0 8px 12px rgba(55, 132, 140, 0.1);
    border-color: rgba(55, 132, 140, 0.3); */
    box-shadow: 0 8px 12px rgba(36, 144, 141, 0.1);
    border-color: rgba(14, 56, 177, 0.3);
}

.stat-number_1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    /* background: linear-gradient(90deg, #00ff88, #00a1ff); */
    /* background: linear-gradient(90deg, #37848c, #4fa2a8); */
    /* background: linear-gradient(90deg, #37848c, #4fa2a8); */
    background: linear-gradient(90deg, #24908D, #0E38B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label_1 {
    /* color: rgba(55,132,140,255); */
    color: #24908D;
    font-size: 0.9rem;
}

/* Animated background */
.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, #0a0a0a 0%, #1a1a1a 100%); */
    /* background: #fff; */
    background: linear-gradient(135deg, #ffffff 0%, #edf7f8 100%);
    /* background: linear-gradient(45deg, #3b82f6, #60a5fa); */
    z-index: -1;
}

/* .animated-bg::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(255, 255, 255, 0.03) 20px,
        rgba(255, 255, 255, 0.03) 40px
    );
    animation: bgMove 20s linear infinite;
} */

/* @keyframes bgMove {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
} */

/* Main content grid */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    /* max-width: 1400px; */
    width:100%;
    margin: 0 auto;
    /* height: 80vh; */
    min-height: 80vh;
    height:auto;
}

/* Case studies list */
.cases-list {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.case-item {
    padding: 1.5rem;
    /* background: rgba(255, 255, 255, 0.03); */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
    /* border: 1px solid rgb(68 66 66 / 10%); */
    border: 1px solid rgba(55, 132, 140, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(55, 132, 140, 0.05);
}

.case-item:hover {
    /* background: rgba(255, 255, 255, 0.07); */
    /* background: linear-gradient(135deg, rgba(55, 132, 140, 0.05) 0%, rgba(55, 132, 140, 0.1) 100%); */
    background: linear-gradient(135deg, rgba(36, 144, 141, 0.05) 0%, rgba(14, 56, 177, 0.1) 100%);
    transform: translateX(10px);
    box-shadow: 0 4px 8px rgba(55, 132, 140, 0.1);
}

.case-item.active {
    /* background: rgba(255, 255, 255, 0.1); */
    /* background: linear-gradient(135deg, rgba(55, 132, 140, 0.1) 0%, rgba(55, 132, 140, 0.15) 100%); */
    background: linear-gradient(135deg, rgba(36, 144, 141, 0.1) 0%, rgba(14, 56, 177, 0.15) 100%);
    /* border-color: rgb(68 66 66 / 8%); */
    /* border-color: rgba(55, 132, 140, 0.3);
    box-shadow: 0 6px 12px rgba(55, 132, 140, 0.15); */
    border-color: rgba(36, 144, 141, 0.3);
    box-shadow: 0 6px 12px rgba(36, 144, 141, 0.15);
}

.case-item h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    /* color: #37848c; */
    color: #24908D;
    font-family: "Poppins", serif;
    /* color: #bc8d1b; */
}

.case-meta {
    font-size: 0.9rem;
    /* color: rgba(255, 255, 255, 0.6); */
    color:#2C2C2C;
    display: flex;
    gap: 1rem;
    /* font-weight: bold; */
    font-family: "Inter Tight", serif;
}

/* Preview section */
.preview-section {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* height: 400px; */
}

.preview-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.preview-content.active {
    opacity: 1;
}

.preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* height: 900px; */
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.preview-image.active {
    transform: scale(1.05);
}

/* Progress bar */
.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    /* background: linear-gradient(90deg, #5ce1e6, #4bc8cd); */
    /* background: linear-gradient(90deg, #37848c, #4fa2a8); */
    background: linear-gradient(90deg, #24908D, #0E38B1);
    /* background: linear-gradient(90deg, #f5b10b, #dfb955); */
    width: 0;
    transition: width 0.3s linear;
}

/* Floating elements */
.tech-stack {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.tech-badge {
    padding: 0.5rem 1rem;
    /* background: rgba(255, 255, 255, 0.1); */
    /* background: rgba(55, 132, 140, 0.1);
    border: 1px solid rgba(55, 132, 140, 0.2); */
    background: rgba(36, 144, 141, 0.1);
    border: 1px solid rgba(14, 56, 177, 0.2);
    border-radius: 20px;
    font-size: 0.8rem;
    backdrop-filter: blur(10px);
    font-family: "Montserrat", serif;
    /* color: #37848c; */
    color: #24908D;
}

/* Stats counter */
.stats-counter {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 3rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 968px) {
    .content-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .preview-section {
        height: 50vh;
    }
}
  
/* add new section end 




   /* Footer Container start */
   .footer {
    background: #2C2C2C;
    color: #333;
    position: relative;
    overflow: hidden;
    padding: 30px 0 30px;
    z-index: 0;
}

/* Decorative Background Elements */
.footer::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(55, 132, 140, 0.03) 0%, transparent 70%);
    z-index: -1;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Grid Container */
/* Footer Container */
.footer-container {
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-grid {
    display: flex;
    justify-content: space-between;  /* Distribute space evenly */
    gap: 50px;                       /* Add space between sections */
}

.company-info, .address, .contact-form {
    flex: 1 1 25%; /* Take equal space (25% each), adjust if necessary */
    min-width: 250px; /* Prevent too small section */
}

/* Company Info Section */
.company-info {
    animation: fadeInUp 0.6s ease-out;
}

.footer-logo {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.05) rotate(-2deg);
}

.company-description {
    color: white;
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: "Inter Tight", serif;
    font-size: 1.05rem;
}

/* Social Media Icons */
.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 1px solid rgba(55, 132, 140, 0.1);
    color: #37848c;
}

.social-icon:hover {
    background: #37848c;
    color: white;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(55, 132, 140, 0.15);
}

/* Footer Heading */
.footer-heading {
    font-size: 1.5rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
    color: #87CEEB;
    font-family: "Poppins", serif;
    font-weight: 600;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #37848c, #2a6f73);
    transition: width 0.3s ease;
}

.footer-heading:hover::after {
    width: 100px;
}

.services-list {
    list-style: none;
}

.services-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.services-list li a {
    text-decoration: none;
    color: #2C2C2C;
    font-family: "Roboto Serif", serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

.services-list li:hover {
    transform: translateX(10px);
    background: linear-gradient(90deg, rgba(55, 132, 140, 0.05), transparent);
    border-radius: 6px;
}

.services-list li::before {
    content: '▹';
    color: #37848c;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.services-list li:hover::before {
    transform: scale(1.2);
}

/* Contact Form */
.contact-form {
    animation: fadeInUp 0.6s ease-out 0.4s backwards;
}

.form-group {
    margin-bottom: 20px;
}

.form-input, .form-textarea {
    width: 100%;
    padding: 12px;
    background: white;
    border: 1px solid rgba(55, 132, 140, 0.2);
    border-radius: 6px;
    color: #333;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: #37848c;
    box-shadow: 0 0 0 3px rgba(55, 132, 140, 0.1);
    transform: translateY(-2px);
}

.form-textarea {
    height: 100px;
    resize: none;
}

.submit-btn {
    background: rgb(37, 158, 166);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
    font-family: "Montserrat", serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin: 0px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(55, 132, 140, 0.2);
    background: linear-gradient(135deg, #2a6f73, #37848c);
}

.submit-btn:active {
    transform: translateY(-1px);
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    color: #37848c;
    font-weight: bold;
    font-size: 10px;
    margin-top: 40px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Animation for Tech Icons */
.tech-icon_1 {
    position: absolute;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .footer-grid {
        gap: 30px;
    }

    .company-info, .address, .contact-form {
        flex: 1 1 30%;
    }
}

@media (max-width: 768px) {
    /* Stack footer sections vertically on smaller screens */
    .footer-grid {
        flex-direction: column;
        gap: 30px;
    }

    .company-info, .address, .contact-form {
        flex: 1 1 100%;  /* Take full width */
        min-width: 0;    /* Allow them to shrink */
    }

    .footer-heading {
        font-size: 1.2rem; /* Smaller heading font */
    }

    .footer-logo {
        width: 120px; /* Smaller logo */
    }

    .submit-btn {
        font-size: 0.9rem;
    }

    .footer-bottom {
        font-size: 12px; /* Slightly larger font for copyright text */
        margin-top: 20px;
    }
}

/* Mobile First - Below 480px */
@media (max-width: 480px) {
    .footer-container {
        padding: 0 15px;
    }

    .footer-logo {
        width: 100px;  /* Further reduce logo size on mobile */
    }

    .footer-heading {
        font-size: 1rem; /* Smaller font size */
    }

    .footer-bottom {
        font-size: 10px;
    }
}


  .ai-innovation {
    background: radial-gradient(circle at 50% 50%, #0a0f29, #1a1f3c);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    color: #fff;
    font-family: 'Arial', sans-serif;
    margin-bottom: 50px;
}

/* Cybernetic Grid Background */
.cyber-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, rgba(82, 236, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(82, 236, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: top;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    from { background-position: 0 0; }
    to { background-position: 0 50px; }
}

/* DNA Helix Animation */
.dna-container {
    position: absolute;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    opacity: 0.3;
}

.dna-helix {
    position: absolute;
    width: 100px;
    height: 200px;
    animation: rotateDNA 10s linear infinite;
}

@keyframes rotateDNA {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* Neon Glow Effects */
.neon-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(50px);
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.5; }
}

/* Main Content Styles */
.content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
    position: relative;
    z-index: 1;
}

.section-header_4 {
    text-align: center;
    margin-bottom: 60px;
    background: linear-gradient(180deg, rgba(55, 132, 140, 0.05) 0%, rgba(55, 132, 140, 0) 100%);
}

.main-title {
    font-size: 4em;
    margin: 0;
    background: linear-gradient(120deg, #52ecff, #5263ff, #ff52e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleGlow 2s ease-in-out infinite;
}

.subtitle {
    color: #a0b3d9;
    font-size: 1.2em;
    margin-top: 10px;
}

@keyframes titleGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(82, 236, 255, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(82, 236, 255, 0.8)); }
}

/* Innovation Cards */
.innovation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    perspective: 1000px;
}

.innovation-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
    cursor: pointer;
}

.innovation-card:hover {
    transform: translateZ(20px);
    background: rgba(255, 255, 255, 0.1);
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.ai-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, #52ecff, #5263ff);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
}

.ai-icon::after {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: rotate(45deg) translate(-50%, -50%);
    animation: iconShine 3s infinite;
}

@keyframes iconShine {
    0% { transform: rotate(45deg) translate(-150%, -150%); }
    100% { transform: rotate(45deg) translate(150%, 150%); }
}

/* Stats Display */
.ai-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.stat-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
}

.stat-value {
    font-size: 2.5em;
    font-weight: bold;
    color: #52ecff;
    margin: 10px 0;
}

.stat-label {
    color: #a0b3d9;
    font-size: 0.9em;
}

/* Progress Circles */
.progress-circle {
    width: 120px;
    height: 120px;
    margin: 20px auto;
    position: relative;
}

.circle-bg, .circle-progress {
    fill: none;
    stroke-width: 4;
}

.circle-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

.circle-progress {
    stroke: #52ecff;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 1s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .innovation-grid {
        grid-template-columns: 1fr;
    }

    .ai-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-title {
        font-size: 2.5em;
    }
}
  
.tech-section {
    padding: 1rem 2rem;
    /* background: linear-gradient(45deg, #1a1c2e, #2a2d3e); */
    /* background: #fff; */
    background: linear-gradient(135deg, #ffffff 0%, #edf7f8 100%);
    font-family: system-ui, -apple-system, sans-serif;
    /* color: #fff; */
    color: #37848c;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    margin-top: 20px;
}

.tech-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 50%); */
    background: radial-gradient(circle at 50% 50%, rgba(55, 132, 140, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* z-index: 1; */
}

/* .shape {
    position: absolute;
    background: rgba(255,255,255,0.03);
    background: linear-gradient(135deg, rgba(55, 132, 140, 0.05), rgba(55, 132, 140, 0.1));
    border-radius: 50%;
    animation: float 15s infinite;
    border: 1px solid rgba(55, 132, 140, 0.1);
} */

@keyframes float {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -50px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

.section-title {
    text-align: center;
    color:#2C2C2C;
    /* color: #37848c; */
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: bold;
    position: relative;
    font-family: "Poppins", serif;
    /* z-index: 2; */
    /* text-shadow: 0 2px 15px rgba(0,0,0,0.2); */
}

.section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    /* background: linear-gradient(90deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #37848c, #4fa2a8);
    margin: 1rem auto;
    border-radius: 2px;
}

.tech-container {
    /* max-width: 1200px; */
    margin: 0 auto;
    position: relative;
    /* z-index: 2; */
}

.tech-category {
    /* background: rgba(255, 255, 255, 0.05); */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 8px 32px rgba(55, 132, 140, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tech-category:hover {
    transform: translateY(-10px);
    /* box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); */
    box-shadow: 0 8px 32px rgba(55, 132, 140, 0.08);
    /* border-color: rgba(255, 255, 255, 0.2); */
    border-color: rgba(55, 132, 140, 0.2);
}

.category-title {
    /* color: #fff; */
    color: #37848c;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: "Poppins", serif;
}

.category-title svg {
    stroke: #4facfe;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2rem;
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    border-radius: 12px;
    /* background: rgba(255, 255, 255, 0.03); */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
    /* border: 1px solid rgba(0, 0, 0, 0.2);  */
    border: 1px solid rgba(55, 132, 140, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(55, 132, 140, 0.05);
}

.tech-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent); */
    background: linear-gradient(45deg, transparent, rgba(55, 132, 140, 0.05), transparent);
    transform: translateX(-100%);
    transition: 0.5s;
}

.tech-item:hover::before {
    transform: translateX(100%);
}

.tech-item:hover {
    transform: scale(1.05) translateY(-5px);
    /* background: rgba(255, 255, 255, 0.07); */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 1));
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); */
    box-shadow: 0 8px 24px rgba(55, 132, 140, 0.1);
    border-color: rgba(55, 132, 140, 0.2);
}

.tech-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
    object-fit: contain;
}

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

.tech-name {
    font-size: 0.95rem;
    color: #2C2C2C;
    /* font-weight: 500; */
    opacity: 0.9;
    font-weight: bold;
    font-family: "Poppins", serif;
}

.progress-bar_1 {
    width: 100%;
    height: 4px;
    /* background: rgba(255, 255, 255, 0.1); */
    background: rgba(55, 132, 140, 0.1);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    /* background:linear-gradient(90deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #37848c, #4fa2a8);
    transform-origin: left;
    animation: fillProgress 1.5s ease-out forwards;
}

@keyframes fillProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (max-width: 768px) {
    .tech-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 1rem;
    }

    .tech-category {
        padding: 1.5rem;
    }
}

.skill-level {
    font-size: 0.8rem;
    /* color: rgba(0, 0, 0, 0.7); */
    color: rgba(55, 132, 140, 0.8);
    margin-top: 0.25rem;
    font-family: "Inter Tight", serif;
}

/* Particle animation */
@keyframes particle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-100px) rotate(180deg);
    }
}

.services-container_1 {
    /* max-width: 1200px; */
    /* max-width: 1400px; */
    width:100%;
    /* margin: 50px auto; */
    padding: 20px;
    /* margin-top:380px; */
  }

  .section-title_1 {
    text-align: center;
    margin-bottom: 50px;
  }

  .section-title_1 h2::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

  .section-title_1 h2 {
    font-size: 2.5em;
    color: #2C2C2C;
    font-family: "Poppins", serif;
    /* color: #bc8d1b; */
    margin-bottom: 15px;
  }

  .section-title_1 p {
    /* color: #7f8c8d; */
    color: #484747;
    font-size: 1.3em;
    font-family: "Poppins", serif;
    font-weight: bold;
  }

  .services-grid_2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }

  .service-card_2 {
    background: #FFFFFF;
    /* background: #E3E8F0; */
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }

  .service-card_2:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
  }

  .service-card_2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #5ce1e6, #37b6ba);
    /* background: linear-gradient(90deg, #bc8d1b, #d4a832); */
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .service-card_2:hover::before {
    transform: scaleX(1);
  }

  .service-icon_1 {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f3f6;
    color: #3498db;
    /* color: #d4a832; */
    font-size: 2em;
    transition: all 0.3s ease;
  }

  .service-card_2:hover .service-icon_1 {
    /* background: #3498db; */
    /* background: #5ce1e6; */
    background: #37848c;
    color: white;
  }

  .service-title_2 {
    font-size: 1.5em;
    color: #37848c;
    font-family: "Poppins", serif;
    /* color: #bc8d1b; */
    margin-bottom: 15px;
  }

  .service-description_1 {
    /* color: #7f8c8d; */
    color:#2C2C2C;
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: "Inter Tight", serif;
    /* font-weight: bold; */
  }

  .service-link_1 {
    display: inline-block;
    padding: 10px 25px;
    background: transparent;
    color: #3498db;
    border: 2px solid #3498db;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
  }

  .service-link_1:hover {
    background: #3498db;
    color: white;
  }

  @media (max-width: 768px) {
    .services-grid_1 {
      grid-template-columns: 1fr;
    }
    
    .section-title_1 h2 {
      font-size: 2em;
    }
    .services-container_1{
        margin: 0;
    }
  }

  /* industry solution start */

  .industry-section {
    padding: 10px 0;
    /* background: var(--bg-gradient); */
    font-family: 'Arial', sans-serif;
    overflow: hidden;
  }

  .container_4 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
   
  }

  .section-title_3 {
    text-align: center;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
  }

  .section-title_3 h2 {
    font-size: 2.8rem;
    /* background: linear-gradient(45deg, #2d3436 30%, #d4a832 70%); */
    background: #2C2C2C;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Poppins", serif;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
  }

  .section-title_3 h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    /* background: var(--primary-color); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    border-radius: 2px;
  }

  .section-title_3 p {
    /* color: #636e72; */
    color:#484747;
    font-size: 1.2rem;
    /* max-width: 700px; */
    margin: 20px auto 0;
    line-height: 1.6;
    /* font-weight: bold; */
    font-family: "Poppins", serif;
  }

  .industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px 0;
  }

  .industry-card {
    background: white;
    border-radius: 20px;
    border: 1px solid rgba(36, 144, 141, 0.1);
    padding: 35px;
    box-shadow: var(--card-shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
  }

  .industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, rgba(0,184,148,0.1), rgba(0,184,148,0)); */
    /* background: linear-gradient(45deg, rgba(92, 225, 230, 0.1), rgba(92, 225, 230, 0)); */
    /* background: linear-gradient(45deg, rgba(100, 210, 220, 0.1), rgba(100, 210, 220, 0)); */
    background: linear-gradient(45deg, rgba(36, 144, 141, 0.1), rgba(45, 190, 196, 0.05));
    /* 45-degree gradient with transparency */
    opacity: 0;
    transition: all 0.3s ease;
  }

  .industry-card:hover {
    transform: translateY(-15px) scale(1.02);
    /* box-shadow: var(--hover-shadow); */
    border-color: #24908D;
    box-shadow: 0 10px 30px rgba(36, 144, 141, 0.1);
    border-top: 4px solid #24908D;
  }

  .industry-card:hover::before {
    opacity: 1;
  }

  .industry-icon {
    width: 80px;
    height: 80px;
    /* background: var(--primary-color); */
    /* background: linear-gradient(90deg, #5ce1e6, #2dbec4); */
    /* background: linear-gradient(90deg, #5caeb3, #37848c); */
    background: linear-gradient(135deg, #24908D, #2dbec4);
    box-shadow: 0 10px 20px rgba(36, 144, 141, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    position: relative;
    transition: all 0.3s ease;
  }

  .industry-icon i {
    color: white;
    font-size: 35px;
    transition: all 0.3s ease;
  }

  .industry-card:hover .industry-icon {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #2dbec4, #24908D);
  }

  .industry-card:hover .industry-icon i {
    transform: rotateY(-180deg);
  }

  .industry-card h3 {
    font-size: 1.6rem;
    color: #2d3436;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 15px;
  }

  .industry-card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    /* background: var(--primary-color); */
    /* background: linear-gradient(90deg, #5ce1e6, #2dbec4); */
    /* background: linear-gradient(90deg, #4aa3a9, #37848c); */
    background: linear-gradient(90deg, #24908D, #2dbec4);
    transition: width 0.3s ease;
  }

  .industry-card:hover h3::after {
    width: 60px;
  }

  .industry-card p {
    color: #636e72;
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 1.1rem;
    font-family: "Inter Tight", serif;
  }

  .features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
  }

  .features-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #2d3436;
    font-size: 0.95rem;
    font-family: "Inter Tight", serif;
  }

  .features-list li i {
    /* color: var(--primary-color); */
    /* color:#37848c; */
    color: #24908D;
    margin-right: 10px;
    font-size: 14px;
  }

  .learn-more {
    /* color: var(--primary-color); */
    color: #24908D;
    /* color: #37848c; */
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    padding: 10px 20px;
    /* border: 2px solid var(--primary-color); */
    /* border: 2px solid  #37848c ; */
    border: 2px solid #24908D;
    font-family: "Montserrat", serif;
    border-radius: 25px;
    font-size: 1rem;
  }

  .learn-more:hover {
    /* background: var(--primary-color); */
    /* background: linear-gradient(90deg, #5ce1e6, #89eff1); */
    /* background: linear-gradient(90deg, #5caeb3, #78d4db); */
    background: linear-gradient(135deg, #24908D, #2dbec4);
    color: #fff;
    border-color: transparent;
    transform: translateX(5px);
  }

  .learn-more i {
    margin-left: 8px;
    transition: transform 0.3s ease;
  }

  .learn-more:hover i {
    transform: translateX(5px);
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Stats counter */
  .stats-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,184,148,0.1);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9rem;
    color: var(--primary-color);
  }

  /* Pulse animation for new tag */
  .new-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff7675;
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  /* Responsive adjustments */
  @media (max-width: 992px) {
    .section-title_3 h2 {
        font-size: 2.4rem;
      }
      
      .section-title_3 p {
        font-size: 1.1rem;
      }
    
    .industry-grid {
      grid-template-columns: 1fr;
    }

    .industry-card {
      padding: 25px;
    }
  }

  @media (max-width: 768px) {
    .section-title_3 h2 {
        font-size: 2rem;
      }

      .section-title_3 p {
        font-size: 1rem;
        padding: 0 10px;
      }

    .learn-more {
      font-size: 0.9rem;
      padding: 8px 16px;
    }
  }

  @media (max-width: 576px) {
    .section-title_3 h3 {
        font-size: 1.8rem;
      }

      .section-title_3 h3::after {
        width: 60px;
      }

      .section-title_3 p {
        font-size: 0.95rem;
        line-height: 1.5;
      }
    
    .industry-icon {
      width: 60px;
      height: 60px;
    }

    .industry-icon i {
      font-size: 28px;
    }

    .industry-card h3 {
      font-size: 1.4rem;
    }
    
    .industry-card p {
      font-size: 0.95rem;
    }
  }
  @media (max-width: 400px) {
    .section-title h2 {
      font-size: 1.6rem;
    }

    .section-title p {
      font-size: 0.9rem;
      max-width: 90%;
    }
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* industry solution end */

  /* main-wrapper  section css start */

  .main-wrapper {
    display: flex;
    min-height: 100vh;
    align-items: stretch; /* Ensures both divs have the same height */
    
}

.vertical-text {
    width: 350px;
    /* background: #b6cdf3; */
    /* background: #beeaf5; */
    /* background:#fff; */

    /* background: linear-gradient(135deg, #0A0F2C, #1E1E2E); */
    /* background: #37848c; */
    background: #24908D;
  
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding: 20px;
    color: white;
    font-size: 5rem;
    font-family: lato, sans-serif;
    font-weight: 700;
    display: flex;
   
    align-items: center;
    justify-content: center;
    /* position: fixed; */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    -webkit-text-stroke: 2px #545353;
}

/* 
.vertical-text::after {
    content: 'Custom Web Apps';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -50%) rotate(180deg);
    color: transparent;
    -webkit-text-stroke: 1px rgba(26, 26, 26, 0.3);
    text-shadow: none;
    z-index: -1;
} */
.content-wrapper_1 {
    flex: 1;
    /* margin-left: 150px;  */
    margin-right:10px;
    position: relative;
    z-index: 1; /* Ensures content overlaps .vertical-text */
}

.services-section {
    padding: 80px 20px;
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
    position: relative;
    z-index: 1;
}
.container_1 {
    /* max-width: 1200px; */
    max-width: 1000px;

    margin: 0 auto;
}

.title {
    font-size: 2.5rem;
    color: #2d3436;
    margin-bottom: 1.5rem;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
    font-family: "Poppins", serif;
}

.description {
    font-size: 1.1rem;
    line-height: 1.6;
    /* color: #636e72; */
    color:#484747;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease 0.2s forwards;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.highlight {
    /* color: #0984e3; */
    color:#fff;
    font-weight: 600;
}

.accent-line {
    width: 80px;
    height: 4px;
    /* background: linear-gradient(90deg, #0984e3, #74b9ff); */
    background:linear-gradient(90deg, #37848c, #2a646a);
    margin: 20px auto;
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0);
    animation: expandLine 0.8s ease 0.4s forwards;
}

.feature-showcase {
    max-width: 1200px;
    margin: -50px auto 0;
    padding: 0 2rem 6rem;
    position: relative;
    z-index: 2;
}

.api-feature-showcase {
    max-width: 1200px;
    margin: -50px auto 0;
    padding: 0 2rem 6rem;
    position: relative;
    z-index: 2;
}

.section-title_4 {
    text-align: center;
    margin-bottom: 5rem;
    position: relative;
}

.section-title_4 h2 {
    font-size: 3.5rem;
    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.section-subtitle {
    color: var(--accent-color);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.2s forwards;
}

.section-description {
    color: #64748b;
    font-size: 1.2rem;
    max-width: 1100px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.4s forwards;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    perspective: 1000px;
    margin-left: -100px; /* Negative margin to overlap vertical text */
    position: relative;
    z-index: 2;
}

.api-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    perspective: 1000px;
    margin-left: -100px; /* Negative margin to overlap vertical text */
    position: relative;
    z-index: 2;
}

.feature-card {
    background: var(--card-bg);
    border-radius: 15px; /* Reduced from 20px */
    padding: 1.8rem; /* Reduced from 2.5rem */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px) rotateX(10deg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); */
    /* background: linear-gradient(135deg, #bc8d1b, #e2a944); */
    /* background: linear-gradient(135deg, #5ce1e6, #4fc3d4); */
    background: #D0FCFF;
   
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    border-radius: 20px;
}

.feature-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
}

.feature-card:hover::before {
    opacity: 0.1;
}

.tech-stack {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.5rem;
    flex-wrap: wrap;
}

.tech-badge {
    background: #f1f5f9;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    color: #475569;
    transition: all 0.3s ease;
}

.feature-card:hover .tech-badge {
    /* background: var(--primary-color); */
    /* background: linear-gradient(135deg, #5ce1e6, #4db8b2); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: white;
}

.feature-icon {
    width: 60px; /* Reduced from 80px */
    height: 60px; /* Reduced from 80px */
    /* background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); */
    /* background: linear-gradient(135deg, #5ce1e6, #2dbec4); */
    /* background: linear-gradient(135deg, #0A0F2C, #1E1E2E); */
    /* background: linear-gradient(90deg, #5caeb3, #37848c); */
    background: linear-gradient(135deg, #24908D, #2dbec4);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    position: relative;
    transform: rotate(0deg);
    transition: transform 0.4s ease;
}

.feature-card:hover .feature-icon {
    transform: rotate(360deg) scale(1.1);
}

.feature-icon i {
    /* font-size: 2rem; */
    font-size: 1.5rem;

    color: white;
}

.feature-content {
    position: relative;
    z-index: 2;
    flex-grow: 1;
}

.feature-content h3 {
    /* font-size: 1.5rem; */
    font-size: 1.3rem; /* Reduced from 1.5rem */
    margin-bottom: 0.8rem;
    /* color: #1e293b; */
    color:#37848c;
    /* margin-bottom: 1rem; */
    transition: color 0.3s ease;
    font-family: "Poppins", serif;
}

.feature-content p {
  font-size: 0.95rem;
    /* color: #64748b; */
    color:#2C2C2C;
    font-weight: bold;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-family: "Inter Tight", serif;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.feature-list li {
    color: #475569;
    /* color:#fff; */
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.feature-list li i {
    color: var(--accent-color);
    margin-right: 0.5rem;
    font-size: 0.875rem;
}

@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

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

@keyframes expandLine {
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}


@media (max-width: 1200px) {
    .vertical-text {
        font-size: 4rem;
    }

    .title {
        font-size: 2rem;
    }

    .description {
        font-size: 1rem;
    }

    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .main-wrapper {
        flex-direction: column;
    }

    .vertical-text {
        width: 100%;
        height: 80px;
        writing-mode: horizontal-tb;
        transform: none;
        position: static;
        font-size: 3rem;
        padding: 20px 0;
    }

    .content-wrapper_1 {
        margin-left: 0;
    }

    .feature-showcase {
        padding: 4rem 1rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .title {
        font-size: 2rem;
    }

    .description {
        font-size: 1rem;
        padding: 0 20px;
    }
}

/* Additional media query for very small screens (mobile-first optimization) */
@media (max-width: 480px) {
    .vertical-text {
        /* font-size: 2.5rem; */
        font-size: 1.5rem;

        padding: 15px 0;
    }

    .title {
        font-size: 1.5rem;
    }

    .description {
        font-size: 0.9rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature-card {
        padding: 1.2rem;
        margin-left: 90px;
    }
}



 /* main-wrapper  section css end */


 /* benefit section css start */

 .benefits-section {
    padding: 15px 40px;
    /* background: #ffffff; */
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
  }

  .container_5 {
    max-width: 1400px;
   
    margin: 0 auto;
    position: relative;
  }

  .section-header {
    text-align: center;
    margin-bottom: 20px;
  }

  .section-header h2 {
    /* font-size: 4rem; */
    font-family: "Poppins", serif;
    font-size: 50px;
    /* color: #111827; */
    color: #2C2C2C;
    margin-bottom: 20px;
    line-height: 1.2;
  }

  .section-header p {
    font-size: 1.25rem;
    font-family: "Poppins", serif;
    /* color: #6b7280; */
    /* color: #efecec; */
    color:#484747;
    max-width: 900px;
    margin: 0 auto;
    font-weight: bold;
  }

  .benefits-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .benefit-item {
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
  }

  .benefit-item:nth-child(even) {
    flex-direction: row-reverse;
  }

  .benefit-content {
    flex: 1;
  }

  .benefit-number {
    font-size: 1.2rem;
    /* color: #6366f1; */
    color: #37848c;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .benefit-number::after {
    content: '';
    height: 2px;
    width: 40px;
    /* background: #6366f1; */
    background:linear-gradient(90deg, #37848c, #2a646a);
  }

  .benefit-title {
    font-size: 2rem;
    /* color: #111827; */
    color: #37848c;
    margin-bottom: 25px;
    font-weight: 600;
    line-height: 1.2;
    font-family: "Poppins", serif;
  }

  .benefit-description {
    font-size: 1.1rem;
    /* color: #6b7280; */
    color: #2C2C2C;
    line-height: 1.7;
    margin-bottom: 30px;
    font-family: "Inter Tight", serif;
  }

  .metrics-list {
    display: flex;
    gap: 40px;
    margin-top: 30px;
  }

  .metric-item {
    position: relative;
  }

  .metric-value {
    font-size: 2.2rem;
    font-weight: 600;
    color: #111827;
    /* color: #fff; */
    margin-bottom: 5px;
    font-family: "Roboto Serif", serif;
  }

  .metric-label {
    color: #6b7280;
    /* color:#fff; */
    font-size: 1rem;
    font-family: "Inter Tight", serif;
  }

  .symbol-container {
    flex: 1;
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .symbol-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
  }

  .symbol-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
    /* background: linear-gradient(135deg, rgba(188, 141, 27, 0.1), rgba(188, 141, 27, 0.05)); */
   /* background:linear-gradient(135deg, rgb(255 181 0 / 25%), rgb(249 181 17 / 64%)); */
    animation: pulse 2s infinite;
  }

  .symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    /* color: #6366f1; */
    color: #bc8d1b;
    z-index: 2;
  }

  .floating-dots_1 {
    position: absolute;
    width: 300px;
    height: 300px;
    pointer-events: none;
  }

  .dot {
    position: absolute;
    width: 6px;
    height: 6px;
    /* background: #6366f1; */
    background: #bc8d1b;
    border-radius: 50%;
    opacity: 10;
  }

  @keyframes pulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.5; }
  }

  @media (max-width: 1024px) {
    .benefit-item {
      flex-direction: column;
      gap: 60px;
      text-align: center;
    }

    .benefit-item:nth-child(even) {
      flex-direction: column;
    }

    .benefit-number {
      justify-content: center;
    }

    .metrics-list {
      justify-content: center;
    }

    .section-header h2 {
      font-size: 2rem;
    }

    .benefit-title {
      font-size: 2rem;
    }
  }

  @media (max-width: 768px) {
    .benefits-section {
      padding: 80px 20px;
    }

    .section-header {
      margin-bottom: 60px;
    }

    .benefits-container {
      gap: 80px;
    }

    .metrics-list {
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }
  }

 /* benefit section css end */

 /* new api-section css start */

 .api-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 2rem;
  }

  .section-header_1 {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(30px);
  }

  .section-header_1 h2 {
    font-size: 2.5rem;
    font-family: "Poppins", serif;
    /* color: #2d3748; */
    color: #2C2C2C;
    margin-bottom: 1rem;
  }

  .section-header_1 p {
    /* color: #718096; */
    color:#484747;
    font-size: 1.2rem;
    font-family: "Inter Tight", serif;
    max-width: 800px;
    margin: 0 auto;
    font-weight: bold;
  }

  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
  }

  .benefit-card {
    /* background: white; */
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border:1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.3s ease;
  }

  .benefit-card:hover {
    transform: translateY(-5px);
  }

  .benefit-icon {
    width: 60px;
    height: 60px;
    /* background: linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background:linear-gradient(90deg, #5caeb3, #37848c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .benefit-icon svg {
    width: 30px;
    height: 30px;
    /* color: #3182ce; */
    color: #fff;
  }

  .benefit-card h3 {
    /* color: #2d3748; */
    color: #37848c;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-family: "Poppins", serif;
  }

  .benefit-card p {
    /* color: #718096; */
    color: #2C2C2C;
    line-height: 1.6;
    font-weight: bold;
    font-family: "Inter Tight", serif;
  }

  .metrics-container {
    /* background: #f7fafc; */
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(30px);
  }

  .metrics-container h3{
    color: #2C2C2C;
  }
  .chart-container {
    height: 300px;
    margin-top: 2rem;
  }

  .api-pipeline {
    margin-top: 4rem;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(30px);
  }

  .api-pipeline h3{
    color: #2C2C2C;
  }

  .pipeline-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    position: relative;
  }

  /* .pipeline-step {
    text-align: center;
    z-index: 1;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    width: 150px;
  } */

  .pipeline-line {
position: absolute;
height: 5px;

background: linear-gradient(90deg, #5ce1e6, #2dbec4);
background-size: 200% 100%;
top: 50%;
left: 10%;
right: 10%;
transform: translateY(-50%);
z-index: 0;
animation: glowing-line 3s infinite;
}

/* @keyframes glowing-line {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
} */

@keyframes glowing-line {
    0% { background: linear-gradient(90deg, rgba(92, 225, 230, 0.3) 0%, transparent 100%); background-position: 0% 50%; }
    50% { background: linear-gradient(90deg, rgba(92, 225, 230, 0.6) 50%, transparent 100%); background-position: 100% 50%; }
    100% { background: linear-gradient(90deg, rgba(92, 225, 230, 0.3) 100%, transparent 0%); background-position: 0% 50%; }
}


.pipeline-step {
text-align: center;
z-index: 1;
background: white;
padding: 1.5rem;
border-radius: 12px;
width: 150px;
transform: scale(0.9);
transition: transform 0.3s, box-shadow 0.3s;
}

.pipeline-step:hover {
transform: scale(1.1);
box-shadow: 0 8px 16px rgba(188, 141, 27, 0.3);
border: 2px solid #5ce1e6;
}

.pipeline-step h4 {
font-size: 1.2rem;
/* color: #2d3748; */
color: #37848c;
}

.pipeline-step p {
/* color: #718096; */
color:#2C2C2C;
font-weight:bold;
font-size: 0.9rem;
}

/* Responsive adjustments */
@media screen and (max-width: 1200px) {
    .api-section {
      padding: 2rem 1rem;
    }
  
    .section-header_1 h2 {
      font-size: 2rem;
    }
  
    .section-header_1 p {
      font-size: 1rem;
    }
  }
  
  @media screen and (max-width: 768px) {
    .benefits-grid {
      grid-template-columns: 1fr; /* Stack cards vertically on smaller screens */
      gap: 1rem;
    }
  
    .section-header_1 h2 {
      font-size: 1.8rem;
    }
  
    .pipeline-steps {
      flex-direction: column;
      align-items: center;
    }
  
    .pipeline-line {
      display: none; /* Remove horizontal line on mobile */
    }
  
    .pipeline-step {
      width: 100%;
      margin-bottom: 1rem;
      transform: scale(1);
    }
  
    .metrics-container {
      padding: 1rem;
    }
  
    .chart-container {
      height: 200px; /* Adjust chart height for mobile */
    }
  }
  
  @media screen and (max-width: 480px) {
    .api-section {
      padding: 1rem 0.5rem;
    }
  
    .benefit-card {
      padding: 1rem;
    }
  
    .benefit-icon {
      width: 50px;
      height: 50px;
    }
  
    .benefit-icon svg {
      width: 25px;
      height: 25px;
    }
  
    .section-header_1 h2 {
      font-size: 1.5rem;
    }
  
    .section-header_1 p {
      font-size: 0.9rem;
    }
  }

 /* new api-section css end */

 .mobile-services-section {
    text-align: center;
    margin-bottom: 2rem;
}

.mobile-services-section h1
{
    margin-bottom: 10px;  /* Adjust this value as needed */
    margin-top: 30px;
    color:#2C2C2C;
    font-size: 30px;
    font-family: "Poppins", serif;
}

.mobile-services-section h1::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.mobile-services-section h2
{
    margin-bottom: 10px;  /* Adjust this value as needed */
    font-family: "Poppins", serif;
    font-size: 18px;
    color:#484747;
}
 /* services slider for mobile app development start */
 /* .mobile-section-title {
    text-align: center;
    margin-bottom: 3rem;
} */

.mobile-services-slider {
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.mobile-slider-container {
    display: flex;
    transition: transform 0.5s ease;
    gap: 2rem;
    padding: 1rem;
    cursor: grab;
}

.mobile-slider-container:active {
    cursor: grabbing;
}

.mobile-service-card {
    min-width: 300px;
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    user-select: none;
}

.mobile-service-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    transition: transform 0.3s ease;
}

.mobile-service-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-service-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: center;
    color:  #37848c;
    font-family: "Poppins", serif;
}

.mobile-service-description {
    font-size: 0.9rem;
    /* color: #666; */
    color:#2C2C2C;
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.mobile-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 1;
}

.mobile-prev-btn {
    left: 10px;
}

.mobile-next-btn {
    right: 10px;
}

.mobile-service-card.react-native { --color: #61dafb; }
.mobile-service-card.flutter { --color: #02569b; }
.mobile-service-card.kotlin { --color: #7f52ff; }
.mobile-service-card.android { --color: #3ddc84; }
.mobile-service-card.ios { --color: #fff000; }

.mobile-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.mobile-service-card:hover::before {
    opacity: 0.1;
}

.mobile-service-card:hover {
    transform: translateY(-5px);
}

.mobile-service-card:hover .mobile-service-logo {
    transform: scale(1.1) rotate(5deg);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-service-card {
    animation: fadeIn 0.5s ease forwards;
}

.mobile-services-slider:hover .mobile-slider-container {
    transition: transform 0.5s ease;
}


 /* services slider end */

 /* slider on application development comapnay start */

  
.slider-titles {
    position: absolute;
    top: 20px;
    width: 100%;
    text-align: center;
    /* z-index: 10; */
    color: #fff;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

.slider-titles h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    color: #2C2C2C;
    font-family: "Poppins", serif;
}

/* .slider-titles h1::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;

    background: linear-gradient(90deg, #5ce1e6, #2dbec4);
    margin: 1rem auto;
    border-radius: 2px;
} */

.slider-titles h2 {
    font-size: 1.5rem;
    font-weight: normal;
    margin: 5px 0 0;
    color: #484747;
    font-family: "Poppins", serif;
}


        .slider-container_1 {
            width: 100%;
            height: 650px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background: #0f0f1e; */
            overflow: hidden;
            padding-top: 210px;
        }
       
        .background-effects {
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 20%, rgba(62, 84, 172, 0.2) 0%, transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(172, 62, 162, 0.2) 0%, transparent 40%);
        }

        /* .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at center, #fff 1px, transparent 1px),
                radial-gradient(circle at center, #fff 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
            opacity: 0.1;
            animation: particleMove 20s linear infinite;
        } */

        @keyframes particleMove {
            0% { transform: translateY(0); }
            100% { transform: translateY(-40px); }
        }

        .slider-track {
            display: flex;
            align-items: center;
            position: relative;
            transform-style: preserve-3d;
            perspective: 2500px;
        }

        .slide {
            position: absolute;
            width: 280px;
            height: 560px;
            transition: all 0.8s cubic-bezier(0.33, 1, 0.68, 1);
            opacity: 0;
            transform: scale(0.6) translateX(200%) translateZ(-500px);
        }

        .slide.previous {
            opacity: 0.5;
            transform: scale(0.8) translateX(-120%) translateZ(-200px) rotateY(10deg);
        }

        .slide.next {
            opacity: 0.5;
            transform: scale(0.8) translateX(120%) translateZ(-200px) rotateY(-10deg);
        }

        .slide.current {
            opacity: 1;
            transform: scale(1) translateX(0) translateZ(0) translateY(-40px);
        }

        .phone-frame {
            width: 100%;
            height: 100%;
            border-radius: 40px;
            padding: 12px;
            position: relative;
            background: linear-gradient(145deg, #2a2a3f, #1a1a2f);
            box-shadow: 
                0 20px 40px rgba(0,0,0,0.4),
                inset 0 2px 10px rgba(255,255,255,0.1),
                inset 0 -2px 10px rgba(0,0,0,0.3);
        }

        .slide.current .phone-frame {
            animation: floatDevice 4s ease-in-out infinite;
        }

        @keyframes floatDevice {
            0%, 100% { transform: translateY(0) rotateX(0deg); }
            50% { transform: translateY(-20px) rotateX(3deg); }
        }

        .phone-screen {
            width: 100%;
            height: 100%;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
            background: #fff;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        }

        .phone-screen img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .slide.current .phone-screen img {
            transform: scale(1.05);
        }

        .screen-reflection {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                135deg,
                transparent 0%,
                rgba(255,255,255,0) 40%,
                rgba(255,255,255,0.1) 45%,
                rgba(255,255,255,0.2) 50%,
                rgba(255,255,255,0.1) 55%,
                rgba(255,255,255,0) 60%,
                transparent 100%
            );
            animation: screenReflection 5s linear infinite;
        }

        @keyframes screenReflection {
            0% { transform: translateX(-100%) translateY(-100%); }
            100% { transform: translateX(100%) translateY(100%); }
        }

        .glow-effect {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 40px;
            z-index: -1;
            opacity: 0;
            background: radial-gradient(circle at center, 
                rgba(103, 232, 249, 0.6) 0%,
                rgba(103, 232, 249, 0) 70%);
            filter: blur(20px);
            transition: opacity 0.5s ease;
        }

        .slide.current .glow-effect {
            opacity: 0.5;
            animation: glowPulse 3s ease-in-out infinite;
        }

        @keyframes glowPulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 0.7; }
        }

        .notch {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 150px;
            height: 25px;
            background: #1a1a2f;
            border-radius: 0 0 20px 20px;
            z-index: 2;
        }

        .home-indicator {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 5px;
            background: #1a1a2f;
            border-radius: 3px;
            z-index: 2;
        }

        .slider-text {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    /* color: #fff; */
    /* z-index: 10; */
    font-family: Arial, sans-serif;
    max-width: 300px;
    text-align: left;
}

.slider-text h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    color: #fff;
    font-family: "Poppins", serif;
    position: relative;
    padding: 10px 20px;
    display: inline-block;
    overflow: hidden;
}

.slider-text h1::before {
    content: "";
    position: absolute;
    bottom: -100%;  /* Start from below */
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(90deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #52c2c8, #379ba2);
    transition: transform 0.8s ease-in-out, bottom 0.8s ease-in-out;
    transform: scaleY(0);
    transform-origin: bottom;
    z-index: -1;
}

.slider-text h1.animated::before {
    transform: scaleY(1);
    bottom: 0; /* Move to original position */
}

.slider-text p {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    color:#2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}



/* Responsive adjustment for smaller screens */
/* Responsive Media Queries */
@media (max-width: 1200px) {
    .slider-titles h1 {
        font-size: 1.8rem;
    }
    
    .slider-titles h2 {
        font-size: 1.3rem;
    }

    .slider-container_1 {
        height: 750px;
        padding-top: 10px;
    }

    .slider-text {
        left: 30px;
        max-width: 250px;
    }

    .slider-track {
        flex-direction: column;
    }

    .slide {
        width: 240px;
        height: 480px;
        transform: scale(0.5);
    }
}

@media (max-width: 992px) {
    .slider-titles h1 {
        font-size: 1.6rem;
    }

    .slider-titles h2 {
        font-size: 1.2rem;
    }

    .slider-container_1 {
        height: 750px;
        padding-top: 10px;
    }

    .slider-text {
        left: 20px;
        max-width: 200px;
    }

    .slider-track {
        flex-direction: column;
    }

    .slide {
        width: 220px;
        height: 440px;
        transform: scale(0.45);
    }
}

@media (max-width: 768px) {
    .slider-titles h1 {
        font-size: 1.4rem;
    }

    .slider-titles h2 {
        font-size: 1rem;
    }

    /* .slider-container_1 {
        height: 450px;
        padding-top: 120px;
    } */
    .slider-container_1 {
        height: 500px;  /* Adjust height for tablets and smaller screens */
        padding-top: 100px;  /* Reduce padding on smaller screens */
    }


    .slider-text {
        left: 15px;
        max-width: 180px;
    }

    .slider-track {
        flex-direction: column;
    }

    /* .slide {
        width: 200px;
        height: 400px;
        transform: scale(0.4);
    } */
    .slide {
        width: 250px;  /* Smaller width for slides */
        height: 500px;  /* Adjust height for slides */
    }
    .phone-frame {
        border-radius: 30px;  /* Adjust phone frame for smaller screens */
    }

    .phone-screen img {
        height: 90%;  /* Reduce image height to fit smaller screens */
    }

    .notch {
        width: 120px;  /* Smaller notch size */
    }

    .home-indicator {
        width: 100px;  /* Adjust home indicator */
    }
}

@media (max-width: 576px) {
    .slider-titles h1 {
        font-size: 1.2rem;
    }

    .slider-titles h2 {
        font-size: 1rem;
    }

    .slider-container_1 {
        height: 400px;
        padding-top: 90px;
    }

    .slider-text {
        left: 10px;
        max-width: 160px;
    }

    .slider-track {
        flex-direction: column;
    }

    .slide {
        width: 180px;
        height: 360px;
        transform: scale(0.35);
    }
}

@media (max-width: 400px) {
    .slider-titles h1 {
        font-size: 1rem;
    }

    .slider-titles h2 {
        font-size: 0.9rem;
    }

    .slider-container_1 {
        height: 350px;
        padding-top: 70px;
    }

    .slider-text {
        left: 5px;
        max-width: 120px;
    }

    .slider-track {
        flex-direction: column;
    }

    .slide {
        width: 160px;
        height: 320px;
        transform: scale(0.3);
    }
}
/* For very small screens (max-width: 480px) */
@media (max-width: 480px) {
    .slider-titles h1 {
        font-size: 1rem;
    }

    .slider-titles h2 {
        font-size: 0.8rem;
    }

    /* .slider-container_1 {
        height: 350px;
        padding-top: 100px;
    } */
    .slider-container_1 {
        height: 700px;  /* Further adjust height for mobile devices */
        padding-top: 50px;  /* Reduce padding */
    }

    .slider-text {
        left: 10px;
        max-width: 150px;
        bottom:20px;
    }

    .slider-track {
        flex-direction: column;
    }

    /* .slide {
        width: 180px;
        height: 360px;
        transform: scale(0.35);
    } */
    .slide {
        width: 200px;  /* Adjust slide size for mobile */
        height: 400px;  /* Smaller height for mobile */
    }

    .phone-frame {
        padding: 8px;
        border-radius: 20px;  /* More rounded edges for mobile */
    }

    /* .phone-screen img {
        object-fit: contain;
    } */


    .phone-screen img {
        height: 85%;  /* Ensure images fit better */
    }

    .notch {
        width: 100px;  /* Adjust notch for mobile */
    }

    .home-indicator {
        width: 80px;  /* Adjust home indicator for mobile */
    }
}

/* Fine-tuning for extra small screens (max-width: 375px) */
@media (max-width: 375px) {
    .slider-titles h1 {
        font-size: 0.9rem;
    }

    .slider-titles h2 {
        font-size: 0.7rem;
    }

    .slider-container_1 {
        height: 600px;
        padding-top: 80px;
    }

    .slider-text h1 {
        font-size: 1rem;
    }

    .slider-text p {
        font-size: 0.8rem;
    }

    .slide {
        width: 160px;
        height: 320px;
        transform: scale(0.3);
    }
}
 /* slider on application development company end */

 /* app process step start */
 
 #app-process {
    /* background: linear-gradient(135deg, #f0f0f0, #ffffff); */
    padding: 50px 20px;
    text-align: center;
  }
  
  .process-title h2 {
    font-size: 36px;
    /* color: #2c3e50; */
    color: #2C2C2C;
    font-weight: bold;
    margin-bottom: 40px;
    font-family: "Poppins", serif;
  }

    .process-title h2::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}
  
  
  .steps-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .step {
    width: 18%;
    /* background-color: #fff; */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
  }
  
  .step:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  }
  
  .step-icon {
    font-size: 40px;
    color: #3498db;
    margin-bottom: 15px;
  }
  
  .step-title {
    font-size: 24px;
    /* color: #37848c; */
    color: #24908D;
    /* color: #bc8d1b; */
    font-weight: 700;
    font-family: "Poppins", serif;
  }
  
  .step-description_1 {
    color: #2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
  }
  
  @media (max-width: 768px) {
    .steps-container {
      flex-direction: column;
      align-items: center;
    }
  
    .step {
      width: 80%;
    }
  }
  
  /* // Add animations when the step enters the view */
  .steps-container .step.animated {
    animation: stepAnimation 1s ease-out forwards;
  }
  
  @keyframes stepAnimation {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Add a glowing effect to the icons */
  .step-icon {
    position: relative;
    animation: glow 1.5s infinite alternate;
  }
/*   
  @keyframes glow {
    0% {
      text-shadow: 0 0 10px rgba(52, 152, 219, 0.8), 0 0 20px rgba(52, 152, 219, 0.6);
    }
    100% {
      text-shadow: 0 0 30px rgba(52, 152, 219, 1), 0 0 60px rgba(52, 152, 219, 0.8);
    }
  }
   */

   @keyframes glow {
    0% {
        text-shadow: 
        0 0 10px rgba(92, 225, 230, 0.8), 
        0 0 20px rgba(92, 225, 230, 0.6);
    }
    100% {
        text-shadow: 
        0 0 30px rgba(92, 225, 230, 1), 
        0 0 60px rgba(92, 225, 230, 0.8);
    }
  }
  
  @media (max-width: 768px) {
    .steps-container {
      flex-direction: column;
      align-items: center;
    }
  
    .step {
      width: 80%;
    }
  }
  

 /* app process step end */

 /* solution offering css start */


 .solutions-wrapper {
    /* background: #fff; */
    background: linear-gradient(to bottom, rgba(55, 132, 140, 0.05), rgba(55, 132, 140, 0.1));
    padding: 2rem 2rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  .solutions-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
  }

  .solutions-title {
    font-size: 2.5rem;
    font-family: "Poppins", serif;
    /* color: #2C2C2C; */
    color: #37848c;
    margin-bottom: 1rem;
    font-weight: 700;
  }

 

  .solutions-subtitle {
    color: #484747;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.6;
    font-family: "Inter Tight", serif;
  }

  .solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
  }

  .solution-card {
    /* background: white; */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* border: 1px solid #e5e7eb; */
    border: 1px solid rgba(55, 132, 140, 0.2);
    box-shadow: 0 4px 6px rgba(55, 132, 140, 0.1);
  }

  .solution-card:hover {
    transform: translateY(-5px);
    /* border-color: var(--primary-color); */
    border-color: #37848c;
    box-shadow: 0 8px 15px rgba(55, 132, 140, 0.15);
  }

  .solution-card:hover .solution-icon {
    transform: scale(1.1);
    /* background: linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(45deg, #37848c, #2dbec4);
    color: white;
  }

  .solution-card:hover .solution-title {
    color: #37848c;
  }

  .solution-icon {
    width: 60px;
    height: 60px;
    /* background: #f3f4f6; */
    background: rgba(55, 132, 140, 0.1);
    color: #37848c;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
  }

  .card-content {
    position: relative;
    z-index: 1;
  }

  .solution-title {
    font-size: 1.25rem;
    font-weight: 600;
    /* color: var(--text); */
    color: #2c3e50;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
  }

  .solution-description {
    color: #2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  .features-list_3 {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
  }

  .features-list_3 li {
    color: #484747;
    font-weight: bold;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    font-family: "Inter Tight", serif;
    position: relative;
  }

  .features-list_3 li::before {
    content: '•';
    /* color: var(--primary-color); */
    color: #37848c;
    position: absolute;
    left: 0;
    font-weight: bold;
  }

  .learn-more {
    display: inline-flex;
    align-items: center;
    /* color: var(--primary-color); */
    color:#37848c;
    text-decoration: none;
    font-family: "Montserrat", serif;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .learn-more svg {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
  }

  .learn-more:hover svg {
    transform: translateX(5px);
  }

  .learn-more:hover {
    color: var(#06b6d4);
    /* color: #2dbec4; */
  }

  @media (max-width: 768px) {
    .solutions-title {
      font-size: 2rem;
    }
    
    .solutions-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Simple fade-in animation */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-in {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
  }

 /* solution offering css end */


 /* functionality section start */
  
 .container_3 {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.section-header_3 {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.section-header_3 h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    position: relative;
}

.section-header_3 h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: #3498db;
}

.section-header_3 p {
    font-size: 1.2rem;
    color: #666;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tab-btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #3498db;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: #3498db;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.content-container {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.tab-content {
    display: none;
    min-height: 500px;
}

.tab-content.active {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.step-navigation {
    flex: 1;
}

.step-list {
    list-style: none;
    background: rgba(247, 249, 252, 0.9);
    padding: 1rem;
    border-radius: 10px;
}

.step-item {
    padding: 1rem;
    margin: 0.5rem 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.step-item.active {
    background: #3498db;
    color: white;
    transform: translateX(10px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}

.step-preview {
    flex: 2;
    position: relative;
}

.device-frame {
    position: relative;
    width: 100%;
    padding-bottom: 40%; /* Reduced height */
}

.mobile-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px; /* Reduced width */
    height: 450px; /* Reduced height */
    border: 16px solid #333;
    border-radius: 40px;
    overflow: hidden;
    background: white;
}

.laptop-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 0;
    padding-bottom: 45%;
    background: #333;
    border-radius: 10px 10px 0 0;
}

.screen-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
}

.laptop-frame .screen-content {
    top: 5%;
    left: 2%;
    width: 96%;
    height: 90%;
}

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0 1rem;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.nav-btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.nav-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
}

.nav-btn::before {
    content: '←';
    font-size: 1.2rem;
}

.nav-btn.next::before {
    content: none;
}

.nav-btn.next::after {
    content: '→';
    font-size: 1.2rem;
}

 /* functionality section end */

 /* case study solution start */

  /* General Styles */
  #case-studies {
    /* background: linear-gradient(135deg, #1d1d2c, #2b2b3f); */
    /* background: white; */
    background: var(--background);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
  }

  #case-studies h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    /* color: #00e6e6; */
    /* color: var(--primary-color); */
    color:#bc8d1b;
  }

  /* Timeline Styles */
  .timeline {
    position: relative;
    margin: 20px auto;
    padding: 20px 0;
    max-width: 800px;
  }

  .timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    /* background: #00e6e6; */
    /* background: #2d2e2e; */
    background: linear-gradient(90deg, #bc8d1b, #d4a832);

    transform: translateX(-50%);
  }

  .timeline-item {
    position: relative;
    margin: 30px 0;
    cursor: pointer;
  }

  .timeline-icon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    /* background: #00e6e6; */
    background:linear-gradient(90deg, #bc8d1b, #d4a832);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #bc8d1b;
  }

  .timeline-content {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    text-align: left;
    position: relative;
    width: 45%;
    color: #fff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgb(255 255 255 / 21%);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .timeline-content h3{
    display: block;
    font-size: 1.17em;
    color: #bc8d1b;
    font-weight: bold;
   
  }

  .timeline-content h4{
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color:#fff;
  }

  .timeline-content p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    color:#fff;
  }

  .timeline-item:nth-child(even) .timeline-content {
    left: calc(55%);
  }

  .timeline-item:nth-child(odd) .timeline-content {
    right: calc(5%);
  }

  .timeline-item:hover .timeline-content {
    transform: scale(1.05);
    opacity: 1;
  }

  /* Details Hidden by Default */
  .details {
    display: none;
    margin-top: 10px;
    color: #00e6e6;
    /* color: var(--primary-color); */
  }

  .timeline-item.active .details {
    display: block;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .timeline-content {
      width: 90%;
      left: 5%;
      right: 5%;
    }

    .timeline::before {
      left: 20px;
    }

    .timeline-item:nth-child(even) .timeline-content,
    .timeline-item:nth-child(odd) .timeline-content {
      right: 0;
      left: 40px;
    }
  }


 /* case study solution end */

 /* blog article start */


 .featured-section {
    /* max-width: 1400px; */
    width: 100%;
    position: relative;
    /* background: var(--white); */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.featured-header {
    padding: 2rem;
    background: #fff;
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.featured-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/img/project_overview.jpg') center/cover;
    opacity: 0.2;
    z-index: 0;
}

.featured-header h2 {
    font-size: 2.5rem;
    font-family: "Poppins", serif;
    margin-bottom: 1rem;
    position: relative;
    color:#2C2C2C;
    z-index: 1;
}

.featured-header p {
    font-size: 1.1rem;
    font-family: "Poppins", serif;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    color: #484747;
}

.carousel-container {
    position: relative;
    overflow: hidden;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.featured-post {
    min-width: 100%;
    display: flex;
    padding: 2rem;
    gap: 2rem;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s ease-in-out;
}

.featured-post.active {
    opacity: 1;
    transform: scale(1);
}

.post-image-container {
    flex: 1;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.post-image {
    width: 100%;
    height: 400px;
    background: url('assets/img/mobile_development.jpg') center/cover; /* Change this for each post */
    transition: transform 0.3s ease;
}

.post-image-container:hover .post-image {
    transform: scale(1.05);
}

.post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgb(255 255 255 / 21%);
}

.post-category {
    display: inline-block;
    padding: 0.5rem 1rem;
    /* background: linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: var(--white);
    border-radius: 20px;
    font-size: 0.9rem;
    font-family: "Montserrat", serif;
    margin-bottom: 1rem;
    align-self: flex-start;
}

.post-title {
    font-size: 2rem;
    font-family: "Poppins", serif;
    margin-bottom: 1rem;
    color: #37848c;
    line-height: 1.3;
}

.post-excerpt {
    font-size: 1.1rem;
    color: #2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    color: #6b7280;
}

.meta-item {
    display: flex;
    align-items: center;
    color:#484747;
    font-family: "Roboto Serif", serif;
    gap: 0.5rem;
}

.read-more-btn_1 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    /* background: linear-gradient(45deg, #5ce1e6, #89eff1); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: var(--white);
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-family: "Montserrat", serif;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow:0 4px 15px rgb(249 193 65 / 20%);
    margin: 0 auto;
    text-decoration: none;
}

.read-more-btn_1 a{
    text-decoration: none;
    font-family: "Montserrat", serif;
    color:white;
}

.read-more-btn_1:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 4px 15px rgb(92 225 230 / 46%); */
    box-shadow: 0 4px 15px rgb(55 132 140 / 46%);

}

.carousel-controls {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    /* z-index: 10; */
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    /* background: linear-gradient(45deg, #5ce1e6, #89eff1); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    transform: scale(1.2);
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-arrow:hover {
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: var(--white);
}

.carousel-arrow.prev {
    left: 2rem;
}

.carousel-arrow.next {
    right: 2rem;
}

@media (max-width: 1024px) {
    .featured-post {
        flex-direction: column;
    }

    .post-image {
        height: 300px;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 768px) {
    .featured-header h2 {
        font-size: 2rem;
    }

    .post-title {
        font-size: 1.5rem;
    }

    .post-meta {
        flex-direction: column;
        gap: 1rem;
    }

    .carousel-arrow {
        display: none;
    }
}
 /* blog article end */

 /* blog post css start */

 .blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
    margin-top: 50px;
}

.search-container {
    flex: 1;
    display: flex;
    /* gap: 10px; */
    gap:0;

}

#searchInput {
    width: 100%;
    padding: 12px;
    font-family: "Roboto Serif", serif;
    /* border: 2px solid #ddd; */
    border-right: none; /* Remove right border to merge with the button */
    border-radius: 4px 0 0 4px; /* Rounded corners on left side */
    transition: all 0.3s ease;
    height: 48px; /* Match height with button */
}

#searchInput:focus {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0,123,255,0.2);
}

/* .search-btn {
    padding: 12px 24px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
} */

.search-btn {
    /* background: linear-gradient(45deg, #5ce1e6, #89eff1); */
    background:linear-gradient(90deg, #5caeb3, #37848c);
    color: white;
    border: 2px solid #ddd; /* Match input border style */
    border-left: none; /* Remove left border to merge with input */
    border-radius: 0 4px 4px 0; /* Rounded corners on right side */
    cursor: pointer;
    font-family: "Montserrat", serif;
    transition: all 0.3s ease;
    height: 48px; /* Same height as input */
    padding: 0 24px; /* Adjust horizontal padding for size */
    margin:0;
}

.search-btn:hover {
    background:linear-gradient(90deg, #5caeb3, #37848c);
    transform: translateY(-2px);
}

.category-dropdown {
    min-width: 200px;
}

#categorySelect {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    font-family: "Roboto Serif", serif;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#categorySelect:focus {
    border-color: #37848c;
}

.blog-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start; /* Changed from stretch to start */
}

.blog-posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    height: auto; /* Let height be determined by content */
}

.blog-post {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid rgb(255 255 255 / 21%);
    transition: all 0.3s ease;
    animation: fadeIn 0.6s ease-out;
    height: fit-content; /* Let each post take only needed height */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blog-post:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.image-container {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.blog-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.blog-post:hover img {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    transition: all 0.3s ease;
}

.blog-post:hover .image-overlay {
    background: rgba(0,0,0,0.2);
}

.blog-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.blog-content small{
    font-family: "Roboto Serif", serif;
    font-size: 15px;
}
.blog-content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color:#2C2C2C;
    font-family: "Inter Tight", serif;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-content h3 {
    margin-bottom: 15px;
    color: #37848c;
    font-size: 1.4rem;
    font-family: "Poppins", serif;
}

.read-more-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.read-more-btn:hover {
    background: #0056b3;
    transform: translateX(5px);
}

.read-more-btn a{
    text-decoration: none;
    color: white;
}

/* .blog-sidebar {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
} */

.blog-sidebar {
    position: sticky;
    top: 20px; /* Adjust this value based on your needs */
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: fit-content; /* Let sidebar take only needed height */
    align-self: start; /* Keep sidebar at top */
}

.tags {
    margin-bottom: 30px;
}

.tags h3 {
    margin-bottom: 15px;
    color: #2C2C2C;
    font-size: 25px;
    font-family: "Poppins", serif;
}

.tag {
    display: inline-block;
    padding: 8px 15px;
    background: #e9ecef;
    border-radius: 20px;
    margin: 5px;
    font-size: 14px;
    font-family: "Montserrat", serif;
    color: #555;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tag:hover {
    /* background: linear-gradient(45deg, #5ce1e6, #2db0b3); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: white;
    transform: translateY(-2px);
}

.recent-articles {
    list-style: none;
    height: auto; /* Let it take natural height */
}

.recent-articles h3 {
    margin-bottom: 20px;
    color: #2C2C2C;
    font-size: 25px;
    font-family: "Poppins", serif;
}

.recent-article-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
}


.recent-article-item:last-child {
    border-bottom: none;
    padding-bottom: 0; /* Remove padding from last item */
}
.recent-article-item:hover {
    transform: translateX(10px);
}

.recent-article-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}

.recent-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.recent-article-item:hover img {
    transform: scale(1.1);
}

.recent-article-content {
    flex: 1;
}

.recent-article-content h4 {
    margin-bottom: 5px;
    font-size: 1rem;
    font-family: "Poppins", serif;
    color: #37848c;
}

.recent-article-content p {
    font-size: 0.9rem;
    font-family: "Roboto Serif", serif;
    color: #666;
}

@media (max-width: 768px) {
    .blog-container {
        grid-template-columns: 1fr;
    }
    
    .blog-posts {
        grid-template-columns: 1fr;
    }

    .blog-header {
        flex-direction: column;
    }

    .search-container {
        width: 100%;
    }

    .category-dropdown {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .blog-container {
        grid-template-columns: 2fr 1fr; /* Retain two-column layout for medium screens */
    }

    .blog-header {
        gap: 15px;
    }

    .blog-sidebar {
        position: relative; /* Make sidebar non-sticky on medium screens */
    }

    #searchInput, .search-btn, #categorySelect {
        padding: 10px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .blog-container {
        grid-template-columns: 1fr; /* Single-column layout */
    }

    .blog-posts {
        grid-template-columns: 1fr; /* Single blog post per row */
    }

    .blog-header {
        flex-direction: column; /* Stack search bar and dropdown */
        align-items: stretch;
    }

    .search-container,
    .category-dropdown {
        width: 100%; /* Full width */
    }

    .search-btn {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .blog-sidebar {
        margin-top: 20px; /* Move sidebar below main content */
    }

    .tags, .recent-articles {
        margin-bottom: 20px; /* Reduce gaps for smaller screens */
    }
}

@media (max-width: 480px) {
    .blog-header {
        gap: 10px;
    }

    #searchInput, .search-btn {
        font-size: 12px; /* Smaller font for narrow screens */
    }

    .blog-post h3 {
        font-size: 1.2rem; /* Adjust heading size */
    }

    .blog-content p {
        font-size: 0.9rem; /* Adjust paragraph size */
    }

    .read-more-btn {
        padding: 8px 16px; /* Smaller button for narrow screens */
    }
}

 /* blog post css end */

 /* about column css start */

 .three-column-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Ensures columns have the same height */
    gap: 20px;
    padding: 50px 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 20px;
}

.column {
    flex: 1; /* Makes all columns equal width */
    /* max-width: 300px;  */
    max-width: 400px; 
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    background:#fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.column .icon {
    font-size: 50px;
    color: #37848c; /* Icon color */
    margin-bottom: 15px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.column .icon:hover {
    transform: scale(1.2); /* Icon enlarges on hover */
    color: #37848c; /* Icon color changes on hover */
}

.column h2 {
    font-size: 1.7em;
    margin: 10px 0;
    color: #37848c;
    font-weight: bold;
    font-family: "Poppins", serif;
}

.column p {
    font-size: 1em;
    color: #2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
    font-size: 17px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .three-column-container {
        flex-direction: column;
    }
    .column {
        max-width: 100%; /* Ensures columns take full width in mobile view */
    }
}


 /* about column css end */

 /* mission-vision container css start */

 .mission-vision-wrapper {
    /* max-width: 1200px; */
    width:100%;
    margin: 0 auto;
    padding: 20px 20px;
    font-family: 'Arial', sans-serif;
    margin-bottom: 20px;
  }

  .title-section_2 {
    font-family: "Poppins", serif;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: #2C2C2C;
    position: relative;
  }

  .title-section_2:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #37848c, #2a646a);
  }

  .cards-wrapper {
    display: flex;
    gap: 100px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 50px;
  }

  .info-card {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    padding: 40px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgb(255 255 255 / 21%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .info-card:hover {
    transform: translateY(-10px);
    /* box-shadow: 0 20px 40px rgb(92 225 230 / 40%); */
    box-shadow: 0 20px 40px rgb(55 132 140 / 40%);

  }

  .info-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    /* background: linear-gradient(90deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #5ce1e6, #37848c);

  }

  .info-card-title {
    font-size: 1.8rem;
    font-family: "Poppins", serif;
    color: #37848c;
    margin-bottom: 20px;
    position: relative;
    padding-left: 45px;
  }

  .info-card-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background-size: contain;
    
    background-repeat: no-repeat;
  }

  .mission-card .info-card-title:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230984e3'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 3.516L20.297 19H3.703L12 5.516zm-1 5.484v5h2v-5h-2zm0 6v2h2v-2h-2z'/%3E%3C/svg%3E");
  }

  .vision-card .info-card-title:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230984e3'%3E%3Cpath d='M12 4C4 4 1 12 1 12s3 8 11 8 11-8 11-8-3-8-11-8zm0 14c-6.67 0-9.27-6-9.27-6S5.33 6 12 6s9.27 6 9.27 6-2.6 6-9.27 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E");
  }

  .info-card-content {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
  }

  .feature-list_3 {
    margin-top: 20px;
    padding-left: 20px;
  }

  .feature-item {
    margin: 10px 0;
    position: relative;
    padding-left: 25px;
  }

  .feature-item:before {
    content: '→';
    position: absolute;
    left: 0;
    color: #37848c;
  }

  @media (max-width: 768px) {
    .cards-wrapper {
      flex-direction: column;
    }
    
    .info-card {
      min-width: 100%;
    }
  }

  /* Animation classes */
  .fade-in {
    /* opacity: 0; */
    transform: translateY(20px);
    /* animation: fadeIn 0.8s ease forwards; */
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

 /* mision-vision container css end */

 /* about section css start */

 .about-section {
    /* max-width: 1200px; */
    max-width: 1400px;
    margin: 10px auto;
    padding: 0 20px;
    font-family: 'Arial', sans-serif;
    position: relative;
    overflow: hidden;
  }

  .about-container {
    display: flex;
    gap: 60px;
    align-items: center;
    position: relative;
  }

  /* Images Container Styles */
  .images-container {
    flex: 1;
    position: relative;
    min-height: 600px;
  }

  .image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    transition: transform 0.5s ease;
  }

  .image-wrapper:hover {
    transform: translateY(-10px);
  }

  .image-1 {
    width: 400px;
    height: 500px;
    position: relative;
    z-index: 2;
    background: #f0f0f0;
  }

  .image-2 {
    width: 300px;
    height: 400px;
    position: absolute;
    top: 200px;
    left: 250px;
    z-index: 1;
    background: #f0f0f0;
  }

  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(188, 141, 27, 0.1), rgba(255, 223, 128, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .image-wrapper:hover .image-overlay {
    opacity: 1;
  }

  /* Content Styles */
  .content-container_5 {
    flex: 1;
    padding: 40px;
    border: 1px solid rgb(255 255 255 / 21%);
    background: #fff;
  }

  .section-subtitle_5 {
    font-size: 1.2rem;
    /* color: #37848c; */
    color:#24908D;
    font-weight: bold;
    /* background: #E9F4F4; */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    font-family: "Poppins", serif;
  }

  /* .section-subtitle_5:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #5ce1e6, #2dbec4);
    background: linear-gradient(90deg, #37848c, #2a646a);
    transition: width 0.3s ease;
  } */

  .content-container:hover .section-subtitle_5:after {
    width: 60px;
  }

  .section-title_5 {
    font-size: 2.8rem;
    color: #2C2C2C;
    margin-bottom: 30px;
    line-height: 1.2;
    font-family: "Poppins", serif;
  }

  .highlight-text {
    color: #0984e3;
    position: relative;
    display: inline-block;
  }

  .highlight-text:after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(9, 132, 227, 0.2);
    z-index: -1;
  }

  .description_1 {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #484747;
    /* font-weight: bold; */
    margin-bottom: 30px;
    font-family: "Inter Tight", serif;

    
  }

  .stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
  }

  .stat-item {
    text-align: left;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
  }

  .stat-item:hover {
    transform: translateY(-5px);
  }

  .stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #0984e3;
    margin-bottom: 5px;
    display: inline-block;
  }

  .stat-label {
    font-size: 1rem;
    color: #636e72;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Decorative elements */
  .bg-shape {
    position: absolute;
    border-radius: 50%;
    /* background: linear-gradient(45deg, rgba(9, 132, 227, 0.1), rgba(0, 206, 201, 0.1)); */
    background: linear-gradient(45deg, rgba(55, 132, 140, 0.1), rgba(92, 225, 230, 0.1));

    /* background: linear-gradient(45deg, rgba(188, 141, 27, 0.1), rgba(188, 141, 27, 0.1)); */

    z-index: -1;
  }

  .shape-1 {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
  }

  .shape-2 {
    width: 200px;
    height: 200px;
    bottom: -100px;
    right: -100px;
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
    .about-container {
      flex-direction: column;
      align-items: center; /* Center content */
    }
  
    .images-container {
      width: 100%;
      margin-bottom: 40px;
    }
  
    .image-wrapper {
      width: 90%;
      margin: 0 auto;
    }
  
    .image-1 {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
    }
  
    .image-2 {
      width: 80%;
      max-width: 300px;
      left: auto;
      right: 0;
    }
  
    .content-container {
      padding: 20px;
      text-align: center; /* Center text on smaller screens */
    }
  }
  
  @media (max-width: 768px) {
    .stats-container {
      grid-template-columns: 1fr; /* Stack the stats vertically */
      gap: 20px;
    }
  
    .section-title_5 {
      font-size: 2.2rem;
    }
  
    .images-container {
      min-height: 400px;
    }
  
    .image-2 {
      top: 100px;
    }
  
    .description_1 {
      font-size: 1rem; /* Adjust text size */
      line-height: 1.6;
    }
  
    .about-container {
      gap: 40px;
    }
  
    /* Adjust margins and paddings for mobile */
    .about-section {
      margin: 40px 20px; 
    }
  }
  
  /* Extra Small Devices (Mobile Phones) */
  @media (max-width: 480px) {
    .section-title_5 {
      font-size: 1.8rem;
    }
  
    .image-1, .image-2 {
      width: 100%;
      max-width: none;
    }
  
    .images-container {
      min-height: 300px;
      margin-bottom: 20px;
    }
  
    .content-container {
      padding: 10px;
    }
  
    .stats-container {
      grid-template-columns: 1fr;
    }
  
    .stat-item {
      padding: 15px;
    }
  
    .description_1 {
      font-size: 0.9rem; /* Adjust for very small screens */
      line-height: 1.5;
    }
  }
  /* Animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
  }

  .delay-1 { animation-delay: 0.2s; }
  .delay-2 { animation-delay: 0.4s; }
  .delay-3 { animation-delay: 0.6s; }

  .experience-box {
    position: absolute;
    width: 150px;
    height: 150px;
    /* background-color: #24908D; */
    background-color: #0E38B1;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 3;
    right: -40px;  /* Changed from left to right positioning */
    bottom: -40px; /* Changed from top to bottom positioning */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    animation: float 3s ease-in-out infinite;
}

.experience-box .years {
    font-size: 2.5rem;
    font-weight: bold;
    font-family: "Poppins", serif;
    line-height: 1;
}

.experience-box .text {
    font-size: 1rem;
    text-align: center;
    margin-top: 5px;
    font-family: "Inter Tight", serif;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Update the responsive styles */
@media (max-width: 1024px) {
    .experience-box {
        right: 20px;
        bottom: -20px;
    }
}

@media (max-width: 480px) {
    .experience-box {
        width: 120px;
        height: 120px;
        right: 10px;
        bottom: -10px;
    }
    .experience-box .years {
        font-size: 2rem;
    }
    .experience-box .text {
        font-size: 0.9rem;
    }
}
 /* about section css end */

 /* swiper testimonial css start */


 .section-testmonials {
    font-family: Poppins;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
    min-height: 500px; /* Adjust this value to your desired height */
}

.column-testmonials {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 20%;
}

.section-details {
    /* border-left: 10px solid #FFCB00; */
    border-left: 10px solid #37848c;
    padding-left: 20px;
}


.name-section {
    font-weight: 800;
    font-family: "Poppins", serif;
    text-transform: uppercase;
    font-size: 32px;
    /* color: #650061 !important; */
    color: #2C2C2C;
    line-height: 1.2em;
    margin: 0;
    padding-bottom: 10px; /* Add spacing between title and slider */
}

.title-section b {
    /* color: #650061; */
    color: #bc8d1b;
}

.title-section {
    color: #fff;
    font-family: Poppins;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.navigation-testmonials {
    display: flex;
    gap: 10px;
}


.swiper-testmonials {
    width: 80%;
    overflow: hidden;
    position: relative;
}

@media (max-width: 768px) {
    .section-testmonials {
        flex-direction: column;
        align-items: flex-start;
    }

    .swiper-testmonials {
        width: 100%;
    }
}

.swiper-testmonials .swiper-slide {
    border-radius: 10px;
    /* background: linear-gradient(118deg, #7C1A78 10.88%, #43044A 83.88%); */
    /* background: linear-gradient(118deg, #5ce1e6 10.88%, #2db0b3 83.88%); */
    background: linear-gradient(118deg, #5ce1e6 10.88%, #37848c 83.88%);
    display: flex;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    transform: scale(0.9) !important;
    filter: blur(1px) grayscale(0.5);
    transition: 0.2s;
    min-height: 250px; /* Same as .card-slide to maintain uniformity */
}

.swiper-testmonials .swiper-slide * {
    margin: 0;
}

.swiper-testmonials .swiper-slide-active {
    filter: blur(0px) !important;
    transform: scale(1) !important;
}

.card-slide {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height:250px; /* Adjust this value to your desired card height */
}

.head-slide {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-slide {
    display: flex;
    align-items: center;
    gap: 20px
}

.title-slide h4 {
    color: #2C2C2C;
    font-size: 20px;
    font-weight: 700;
    font-family: "Poppins", serif;
}

.title-slide h6 {
    /* color: #FFCB00; */
    color: #3b82f6;
    font-size: 14px;
    font-weight: 500;
}

.text-slide {
    color: #484747;
    font-family: "Inter Tight", serif;
    font-size: 18px;
    /* font-style: italic; */
    font-weight: 400;
    line-height: normal;
}

.swiper-button-testmonials-next,
.swiper-button-testmonials-prev {
    cursor: pointer;
}


@media (max-width: 768px) {
    .header-slide svg {
        width: 50px;
    }

    .title-slide h4 {
        font-size: 14px;
    }

    .swiper-testmonials .swiper-slide {
        padding: 20px;
    }
}
 /* swiper testinomial css end */

 /* ai software development start */

 .ai-solutions-container {
    /* background: linear-gradient(to bottom right, #f8f9ff, #ffffff); */
    padding: 2rem 2rem;
    font-family: 'Arial', sans-serif;
}

.section-header-new {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.title-main {
    /* color: #2d3748; */
    color: #2C2C2C;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
    font-family: "Poppins", serif;
}

.title-main::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.subtitle-main {
    /* color: #718096; */
    color:#484747;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: bold;
    font-family: "Poppins", serif;
}

.services-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.service-card-custom {
    /* background: white; */
    background: #FFFFFF;
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border:1px solid rgb(255 255 255 / 21%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.service-card-custom:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.icon-container {
    width: 80px;
    height: 80px;
    /* background: linear-gradient(45deg, #6366f1, #8b5cf6); */
    /* background: linear-gradient(45deg, #2563eb,#3b82f6 ); */
    /* background: linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.service-card-custom:hover .icon-container {
    transform: scale(1.1) rotate(5deg);
}

.icon-main {
    font-size: 2.5rem;
    color: white;
}

.title-service {
    /* color: #2d3748; */
    color: #37848c;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-family: "Poppins", serif;
}

.description-service {
    /* color: #718096; */
    color:#2C2C2C;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
    font-family: "Inter Tight", serif;
   
}

.features-list .feature-item-new_1 {
    /* color: #4a5568; */
    color:#484747;
    
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.features-list .feature-item-new_2 {
    /* color: #4a5568; */
    color:#2C2C2C;
    
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.feature-item-new_1::before {
    content: '✓';
    /* color: #6366f1; */
    color: #2563eb;
    margin-right: 0.5rem;
    font-weight: bold;
}
.feature-item-new_2::before {
    content: '✓';
    /* color: #6366f1; */
    color: #2563eb;
    margin-right: 0.5rem;
    font-weight: bold;
}

.button-learn-more {
    /* background: linear-gradient(45deg, #6366f1, #8b5cf6); */
    /* background: linear-gradient(45deg, #2563eb,#3b82f6 ); */
    background: linear-gradient(45deg, #bc8d1b, #ffd700);

    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
    margin-top: auto;
    opacity: 0;
    transform: translateY(20px);
}

.service-card-custom:hover .button-learn-more {
    opacity: 1;
    transform: translateY(0);
}

.progress-bar-new {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0;
    /* background: linear-gradient(45deg, #6366f1, #8b5cf6); */
    /* background: linear-gradient(45deg, #2563eb,#3b82f6 ); */
    background: linear-gradient(45deg, #5ce1e6, #37b6ba);

    transition: width 0.3s ease;
}

.service-card-custom:hover .progress-bar-new {
    width: 100%;
}

@media (max-width: 768px) {
    .title-main {
        font-size: 2rem;
    }

    .services-layout {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}

/* Add smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Loading animation for cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 /* ai software development end */


 /* ai process step css start */

 .ai-section {
    /* background: #f8fafc; */
    padding: 2rem 2rem;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
}

.ai-container {
    max-width: 1400px;
    margin: 0 auto;
}

.ai-header {
    text-align: center;
    margin-bottom: 4rem;
}

.ai-title_1 {
    font-size: 2.5rem;
    /* color: #1e293b; */
    color: #2C2C2C;
    margin-bottom: 1rem;
    font-family: "Poppins", serif;
}

.ai-title_1::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.ai-subtitle_1 {
    /* color: #64748b; */
    color:#484747;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    font-weight: bold;
    font-family: "Poppins", serif;
}

.ai-flow {
    position: relative;
}

.flow-timeline {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e2e8f0;
    transform: translateX(-50%);
}

.progress-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    /* background: linear-gradient(to bottom, #3b82f6, #2563eb); */
    /* background: linear-gradient(to bottom, #5ce1e6, #4db8b2); */
    background: linear-gradient(to bottom, #52c2c8, #3a9fa5);

    transition: height 1s ease;
}

.ai-step {
    display: flex;
    margin-bottom: 6rem;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.ai-step.visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-step:nth-child(even) {
    flex-direction: row-reverse;
}

.step-details {
    width: 45%;
    padding: 2rem;
    /* background: white; */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgb(255 255 255 / 21%);
    position: relative;
}

.step-icon-wrapper {
    position: absolute;
    left: 50%;
    width: 60px;
    height: 60px;
    background: white;
    border: 4px solid #37848c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transform: translateX(-50%);
    z-index: 2;
    overflow: hidden;
}

.step-icon-wrapper i {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.step-connector {
    position: absolute;
    top: 30px;
    width: 60px;
    height: 2px;
    /* background: #5ce1e6; */
    background: #37848c;
}

.ai-step:nth-child(odd) .step-connector {
    right: 45%;
}

.ai-step:nth-child(even) .step-connector {
    left: 45%;
}

.step-status {
    position: absolute;
    top: -10px;
    padding: 0.25rem 1rem;
    /* background: linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: white;
    border-radius: 999px;
    font-size: 0.875rem;
    white-space: nowrap;
    font-family: "Montserrat", serif;
}

.ai-step:nth-child(odd) .step-status {
    right: calc(55% + 20px);
}

.ai-step:nth-child(even) .step-status {
    left: calc(55% + 20px);
}

.step-heading {
    font-size: 1.5rem;
    /* color: #1e293b; */
    color:#37848c;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
    font-family: "Poppins", serif;
}

.step-phase {
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
    /* background: linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: #fff;
    border-radius: 999px;
    font-family: "Montserrat", serif;
}

.step-description_2 {
    /* color: #64748b; */
    color:#2C2C2C;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.feature-list_2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.feature-item_2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* color: #475569; */
    color:#2C2C2C;
    font-weight: bold;
    font-size: 0.95rem;
    font-family: "Inter Tight", serif;
}

.feature-item_2::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    /* background: linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .ai-section {
        padding: 4rem 1rem;
    }

    .flow-timeline {
        left: 30px;
    }

    .ai-step,
    .ai-step:nth-child(even) {
        flex-direction: column;
        margin-left: 60px;
        margin-bottom: 4rem;
    }

    .step-details {
        width: 100%;
    }

    .step-icon-wrapper {
        left: 30px;
    }

    .step-connector,
    .step-status {
        display: none;
    }

    .feature-list_2 {
        grid-template-columns: 1fr;
    }
}
 /* ai process step css end */

 /* transform you business start */


 /* transform you business end */


 /* ai powered sales start */
  
 .sales-journey-container {
    width: 100%;
    /* max-width: 1400px; */
    padding: 20px 20px;
    position: relative;
}

.sales-journey {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-bottom: 50px;
}

.sales-stage {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sales-stage.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.stage-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); */
    /* background: linear-gradient(135deg, #5ce1e6, #3bbcc3); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: all 0.5s ease;
    cursor: pointer;
}

.stage-icon svg {
    width: 50px;
    height: 50px;
    fill: white;
    transition: transform 0.3s ease;
}

.stage-icon:hover {
    transform: rotate(360deg) scale(1.1);
}

.stage-icon::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, rgba(52,152,219,0.2), transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.stage-icon:hover::before {
    opacity: 1;
}

.sales-connector {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 4px;
    /* background: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); */
    /* background: linear-gradient(to right, #5ce1e6, #3bbcc3); */
    background: linear-gradient(to right, #52c2c8, #3aa2a8);
    z-index: 1;
}

.stage-details {
    margin-top: 20px;
    text-align: center;
    /* background: white; */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border: 1px solid rgb(255 255 255 / 21%);
    width: 300px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.7s ease;
}

.sales-stage.active .stage-details {
    transform: translateY(0);
    opacity: 1;
}

.stage-details h3 {
    /* color: var(--primary-color); */
    color:#37848c;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-family: "Poppins", serif;
}

.stage-details p {
    /* color: var(--text-color); */
    color:#2C2C2C;
    font-size: 0.9em;
    line-height: 1.6;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.sales-rocket {
    position: fixed;
    bottom: -100px;
    right: -100px;
    width: 200px;
    height: 200px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e74c3c"><path d="M2.81 12.21c-.35-.34-.53-.79-.53-1.24s.18-.9.53-1.24l8.21-8.01c.48-.47 1.13-.55 1.53-.21.39.34.42.96.03 1.35l-6.92 6.75H21c.55 0 1 .45 1 1s-.45 1-1 1H5.62l6.92 6.75c.39.39.36 1.01-.03 1.35-.4.34-1.05.26-1.53-.21l-8.17-7.97z"/></svg>') no-repeat center;
    background-size: 80%;
    opacity: 0;
    transition: all 1s ease;
    transform: rotate(-45deg);
    z-index: 10;
}

.sales-rocket.launch {
    bottom: 50%;
    right: 50%;
    opacity: 1;
    transform: rotate(0deg) translate(50%, 50%);
}

.sales-title {
text-align: center;
margin-bottom: 40px;
}

.sales-title h1 {
/* font-size: 2.5em; */
font-family: "Poppins", serif;
font-size: 50px;
/* color: var(--primary-color); */
color:#2C2C2C;
margin-bottom: 10px;
font-weight: 600;
}

.sales-title h1::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.sales-title p {
font-size: 1.1em;
/* color: var(--text-color); */
color: #484747;
font-weight: bold;
font-family: "Poppins", serif;
}

@media (max-width: 768px) {
    .sales-journey {
        flex-direction: column;
    }
    .sales-stage {
        margin-bottom: 40px;
    }
    .stage-icon {
        width: 80px;
        height: 80px;
    }

    .stage-icon svg {
        width: 40px;
        height: 40px;
    }
    .stage-details {
        width: 90%; /* Adjust width for better text wrapping */
    }
    .sales-rocket {
        bottom: -50px;
        right: -50px;
        width: 150px;
        height: 150px;
    }
}

 /* ai powered sales end */


 /* our featured card for ai sale start */
  
 /* General container */
.sales-container {
    /* max-width: 1200px; */
    width:100%;
    margin: 0 auto;
    padding: 1rem 1rem;
}

/* Text styles */
.title {
    font-size: 2.5rem;
    font-weight: bold;
    font-family: "Poppins", serif;
    color: #2C2C2C;
    /* color: #bc8d1b; */
    margin-bottom: 1rem;
}



.subtitle_3 {
    font-size: 1.25rem;
    font-family: "Poppins", serif;
    /* color: #718096; */
    color:#484747;
    font-weight: bold;
    max-width: 650px;
    margin: 20px auto;
    text-align: center;
}

/* Grid layout for feature boxes */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

/* Feature section */
.feature-section {
    perspective: 1000px;
}

/* Feature box styling */
.feature-box {
    /* background-color: white; */
    /* border: 2px solid #e2e8f0; */
    border:1px solid rgb(223 221 221);
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.6s ease;
    transform-style: preserve-3d;
    position: relative;
}

/* Feature icon styling */
.feature-icon_1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

/* Feature title */
.feature-title {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: "Poppins", serif;
    color: #37848c;
    margin-bottom: 1rem;
}

/* Feature description */
.feature-description {
    /* color: #4a5568; */
    color:#2C2C2C;
    font-size: 1rem;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

/* Bubble effects */
.feature-box::before,
.feature-box::after,
.feature-box .bubble-top {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(66, 153, 225, 0.5);
    /* background: rgba(188, 141, 27, 0.5); */
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* Bubble animation */
.feature-box::before {
    animation: bubble-up 3s infinite ease-in-out;
    left: 20%;
    top: 100%;
}

.feature-box::after {
    animation: bubble-up 4s infinite ease-in-out;
    left: 80%;
    top: 100%;
}

.feature-box .bubble-top {
    animation: bubble-down 3s infinite ease-in-out;
    left: 50%;
    top: -10%;
}

/* Hover effect for feature box */
.feature-box:hover {
    transform: rotateY(10deg) scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Hover effect for icon */
.feature-box:hover .feature-icon_1 {
    transform: translateY(-10px);
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.1));
}

/* Bubble hover effect */
.feature-box:hover .bubble-top {
    opacity: 1;
}

.feature-box:hover::before,
.feature-box:hover::after {
    opacity: 1;
}

/* Bubble animations */
@keyframes bubble-up {
    0% {
        opacity: 0.5;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-30px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(1);
    }
}

@keyframes bubble-down {
    0% {
        opacity: 0.5;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateY(30px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(60px) scale(1);
    }
}

/* Feature entry animation */
@keyframes fadeUpAnimation {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-feature {
    animation: fadeUpAnimation 0.8s ease-out forwards;
    opacity: 0;
}

 /* our feature card for ai sale end */


 /* how it works on chatbox sales css start */
  
 .workflow-section {
    text-align: center;
    padding: 30px 0;
    /* background: linear-gradient(to right, #f7f7f7, #e0f7fa); */
    position: relative;
}

.workflow-heading {
    /* font-size: 3rem; */
    font-size: 35px;
    font-family: "Poppins", serif;
    color: #2C2C2C;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.workflow-heading::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}


.workflow-steps {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    /* z-index: 2; */
}

.workflow-step {
    width: 30%;
    /* background: #fff; */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border:  1px solid rgb(255 255 255 / 21%);
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    position: relative;
    overflow: hidden;
}

.workflow-step i {
    font-size: 4rem;
    /* color: #3498db; */
    /* color:  #5ce1e6; */
    color: #37848c;
    margin-bottom: 20px;
    transition: transform 0.3s ease-in-out;
}

.workflow-step-title {
    font-size: 1.6rem;
    font-family: "Poppins", serif;
    /* color: #333; */
    color: #37848c;
    margin-bottom: 15px;
    position: relative;
    /* z-index: 1; */
}

.workflow-step-description {
    /* color: #555; */
    color:#2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
    font-size: 1rem;
}

.workflow-step.visible {
    opacity: 1;
    transform: translateY(0);
}

.workflow-step:hover {
    /* background-color: #3498db; */
    /* background-color: #def5f9; */
    /* background-color: #e6c46b; */
    /* background: linear-gradient(45deg, #5ce1e6, #a2f7fa); */
    background: linear-gradient(45deg, #52c2c8, #7edee2);

    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.workflow-step:hover i {
    transform: rotate(20deg);
    color: #37848c;
}

.workflow-step:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 200%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.1;
    transform: translateX(-50%) scaleX(0);
    transition: all 0.4s ease-in-out;
}

.workflow-step:hover:before {
    transform: translateX(-50%) scaleX(1);
}

/* Chatbot Animation */
.chatbot-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.chatbot-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in-out;
}

.chatbot-avatar img {
    width: 100%;
    height: 100%;
}

.chatbot-box {
    width: 200px;
    padding: 10px;
    /* background: #3498db; */
    background:#fff;
    color: white;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgb(255 255 255 / 21%);
}
.chatbot-box p{
    color:#2C2C2C;
    font-family: "Roboto Serif", serif;
}
.workflow-step:hover ~ .chatbot-container .chatbot-avatar {
    transform: translateY(-10px); /* Moves the chatbot face upwards when hovering over the step */
}

@media screen and (max-width: 768px) {
    .workflow-step {
        width: 45%;
    }
}

@media screen and (max-width: 480px) {
    .workflow-step {
        width: 90%;
    }
}
 /* how it works on chatbox sales css end */


 /* analytics section css start */
 .performance-section {
    color: black;
    padding: 30px 20px;
}

.performance-header {
    text-align: center;
    margin-bottom: 30px;
}

.performance-header h2 {
    font-size: 2.5rem;
    font-weight: bold;
    font-family: "Poppins", serif;
    margin-bottom: 10px;
    color: #2C2C2C;
}

.performance-header p {
    font-size: 1.2rem;
    line-height: 1.6;
    color:#484747;
    font-weight:bold;
    font-family: "Inter Tight", serif;
}

.performance-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.performance-features ul {
    list-style: none;
    padding: 0;
    font-size: 1.2rem;
    font-family: "Inter Tight", serif;
    line-height: 1.8;
    color:#2C2C2C;
}

.performance-features ul li::before {
    content: "✓";
    color: #37848c;
    margin-right: 10px;
}

.performance-visuals {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.chart-wrapper {
    width: 100%;
    max-width: 600px;
    height: 300px;
}

.data-bars-container {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bar-text {
    flex: 1;
    color:#2C2C2C;
    font-family: "Roboto Serif", serif;
}

.bar-fill {
    flex: 3;
    height: 10px;
    margin: 0 10px;
    /* background: rgba(255, 255, 255, 0.2); */
    background: rgb(211 209 209 / 98%);
    position: relative;
    overflow: hidden;
}

.bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--fill-percent, 0);
    background: #00ff88;
    transition: width 0.5s ease-in-out;
}

.bar-value-text {
    flex: 1;
    text-align: right;
    font-weight: bold;
    color:#fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .performance-header h2 {
        font-size: 2rem; /* Slightly smaller heading */
    }

    .performance-header p {
        font-size: 1rem; /* Smaller text for better readability */
    }

    .performance-content {
        flex-direction: column; /* Stack elements vertically on smaller screens */
        gap: 20px;
    }

    .performance-features {
        width: 100%; /* Full width for the features section */
        text-align: center;
    }

    .performance-visuals {
        width: 100%;
    }

    .chart-wrapper {
        max-width: 100%; /* Chart fills the full width */
        height: 250px; /* Reduce height to fit smaller screens */
    }

    .data-bars-container {
        max-width: 100%; /* Data bars fill the full width */
    }

    .bar-row {
        flex-direction: column; /* Stack bars vertically on small screens */
        align-items: flex-start;
    }

    .bar-fill {
        width: 100%; /* Full width for bar fills */
        height: 10px;
    }

    .bar-text, .bar-value-text {
        text-align: left; /* Left-align text for better spacing */
    }
}

@media (max-width: 480px) {
    .performance-header h2 {
        font-size: 1.8rem; /* Smaller font size for very small screens */
    }

    .performance-header p {
        font-size: 0.9rem; /* Adjust text size for readability */
    }

    .performance-content {
        gap: 15px;
    }

    .performance-features ul {
        font-size: 1rem; /* Smaller font size for features */
    }

    .chart-wrapper {
        height: 200px; /* Reduce height for mobile screens */
    }

    .data-bars-container {
        gap: 15px; /* Reduced gap between bar items */
    }
}


 /* analytics section css end */


 /* seo services start */
 .seo-services-container-new {
    /* max-width: 1300px; */
    width: 100%;
    text-align: center;
   
}

.section-title-new {
    /* color: #2c3e50; */
    /* color: #bc8d1b; */
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: bold;
    font-family: "Poppins", serif;
    /* background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
    background: #2C2C2C;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title-new::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}


.section-subtitle-new {
    /* color: #7a7a7a; */
    color:#484747;
    font-size: 1.2rem;
    margin-bottom: 40px;
    font-weight: bold;
    font-family: "Poppins", serif;
}

.services-grid-new {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 5px;
}

.service-card-new {
    /* background-color: white; */
   
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border: 1px solid rgb(255 255 255 / 21%);
    padding: 30px;
    width: 350px;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.service-card-new:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.service-card-new .icon-new {
    font-size: 3.5rem;
    /* background: linear-gradient(45deg, #2563eb, #3b82f6); */
    /* background:linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background:linear-gradient(90deg, #5caeb3, #37848c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.service-card-new h3 {
    /* color: #2c3e50; */
    color:#37848c;
    font-weight: bold;
    margin-bottom: 15px;
    font-family: "Poppins", serif;
   
}

.service-card-new p {
    /* color: #7a7a7a; */
    color:#2C2C2C;
    font-weight: bold;
    line-height: 1.6;
    font-family: "Inter Tight", serif;
}

.plus-icon-new {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    /* background: linear-gradient(45deg, #2563eb, #3b82f6); */
    /* background:linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    /* box-shadow: 0 10px 25px rgba(74,144,226,0.3); */
    box-shadow: 0 10px 25px rgba(188, 141, 27, 0.3);
    /* z-index: 10; */
}

.plus-icon-new:hover {
    transform: translateX(-50%) scale(1.1) rotate(180deg);
    background: linear-gradient(90deg, #5caeb3, #37848c);
}

.details-section-new {
    width: 100%;
    /* background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); */
    /* background: #5ce1e6; */
    background: #37848c;
    padding: 40px 0;
    display: none;
    opacity: 0;
    transition: all 0.5s ease;
    position: relative;
}

.details-content-new {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0 20px;
}

.service-detail-card-new {
    /* background-color: rgba(255,255,255,0.9); */
    background-color: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgb(255 255 255 / 21%);
    text-align: left;
    transition: all 0.3s ease;
    transform: scale(0.9);
    opacity: 0;
}

.service-detail-card-new.active {
    transform: scale(1);
    opacity: 1;
}

.service-detail-card-new .small-icon-new {
    font-size: 2.5rem;
    margin-bottom: 15px;
    /* background: linear-gradient(45deg, #2563eb, #3b82f6); */
    /* background: linear-gradient(45deg, #5ce1e6, #4db8b2); */
    background:linear-gradient(90deg, #5caeb3, #37848c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-detail-card-new h4 {
    color: #37848c;
    margin-bottom: 10px;
    font-size: 18px;
    font-family: "Poppins", serif;
}

.service-detail-card-new p {
    /* color: #7a7a7a; */
    color:#2C2C2C;
    line-height: 1.6;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

@media (max-width: 768px) {
    .services-grid-new {
        flex-direction: column;
        align-items: center;
    }

    .details-content-new {
        grid-template-columns: 1fr;
    }
}
 /* seo services end */

 /* seo service card css start */

 .seo-services-container {
    /* max-width: 1400px; */
    width: 100%;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.section-title_6 {
    /* color: #2c3e50; */
   
    font-size: 2.8rem;
    font-family: "Poppins", serif;
    margin-bottom: 20px;
    font-weight: 700;
    /* background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
    /* background:black; */
    background: #2C2C2C;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title_6::after {
    content: '';
    display: block;
    width: 150px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.section-subtitle_1 {
    /* color: #7a7a7a; */
    color:#484747;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    font-family: "Poppins", serif;
}

.services-grid_1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card_3 {
    /* background-color: white; */
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border:1px solid rgb(255 255 255 / 21%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.service-card_3:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    /* background-color: #e6f2ff;  */
    /* background-color: #f2d991;  */
    /* background: linear-gradient(45deg, #5ce1e6, #a2f7fa); */
    background: linear-gradient(45deg, #52c2c8, #7edee2);
}

.service-card_3 .icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    /* color: #6a11cb; */
    /* color: #1d4ed8; */
    color: #37848c;
    transition: color 0.3s ease;
}

.service-card_3:hover .icon {
    /* color: #2575fc; */
    color: #37848c ;
}

.service-card_3 h3 {
    /* color: #2c3e50; */
    color:#37848c;
    margin-bottom: 15px;
    transition: color 0.3s ease;
    font-family: "Poppins", serif;
}

.service-card_3:hover h3 {
    color: #37848c;
}

.service-card_3 p {
    /* color: #7a7a7a; */
    color:#2C2C2C;
    line-height: 1.6;
    font-weight: bold;
    font-family: "Inter Tight", serif;
    transition: color 0.3s ease;
}

.service-card_3:hover p {
    color: #fff;
}

@media (max-width: 1200px) {
    .services-grid_1 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-grid_1 {
        grid-template-columns: 1fr;
    }
}
 /* seo service card css end */

 /* content marketing css start */

 .content-marketing-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    /* background-color: #f0f8ff;  */
  }
  
  .content-wrapper_2 {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1400px;
    width: 100%;
  }
  
  /* Left Side Styling */
  .content-info {
    flex: 1 1 20%;
    text-align: left;
    padding: 20px;
  }
  
  .content-info h2 {
    font-size: 30px;
    /* color: #333; */
    color: #2C2C2C;
    margin-bottom: 20px;
    font-family: "Poppins", serif;
  }
  
  .content-info p {
    font-size: 1.2rem;
    font-family: "Inter Tight", serif;
    /* color: #555; */
    color:#484747;
    font-weight: bold;
    line-height: 1.6;
  }
  
  /* Right Side: Cards Styling */
  .cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* gap: 20px; */
    gap: 40px;
    /* flex: 1 1 60%; */
    flex:1 1 70%;
  }
  
  .card_1 {
    /* background: #e0f7fa;  */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border: 1px solid rgb(255 255 255 / 21%);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .card_1:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  }
  
  .card-logo {
    font-size: 2rem;
    /* color: #00796b;  */
    /* color: #5ce1e6; */
    color: #37848c;
    margin-bottom: 10px;
  }
  
  .card_1 h3 {
    font-size: 1.5rem;
    color:  #37848c;
    margin-bottom: 10px;
    font-family: "Poppins", serif;
  }
  
  .card_1 p {
    font-size: 1rem;
    /* color: #555; */
    color:#2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
    line-height: 1.6; /* Adjusted for readability */
    text-align: justify; /* Align paragraphs for a cleaner look */
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .content-wrapper_2 {
      flex-direction: column;
    }
  
    .cards-container {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media (max-width: 480px) {
    .cards-container {
      grid-template-columns: 1fr;
    }
  }
 /* content marketing css end */

 /* content marketing process step start */

/* General container styles */
.customer-container {
    /* max-width: 1200px; */
    width:100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* Main section styles */
#customer-engagement-process {
    padding: 20px 20px;
    /* background-color: #f9f9f9; */
    text-align: center;
}

/* Heading styles */
#customer-engagement-process h2 {
    font-size: 2.5em;
    font-family: "Poppins", serif;
    margin-bottom: 20px;
    /* color: #333; */
    color:#2C2C2C;
    text-align: center;
    font-weight: bold;
}

#customer-engagement-process h2::after {
    content: '';
    display: block;
    width: 250px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

/* Paragraph styles */
#customer-engagement-process p {
    font-size: 1em;
    color: #484747;
    font-weight: bold;
    font-family: "Inter Tight", serif;
    max-width: 1400px;
    margin: 0 auto 20px;
    text-align: justify;
    line-height: 1.6;
}

/* Flexbox for steps */
.steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative;
    flex-wrap: nowrap;
}

/* Step wrapper styles */
.step-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* Step styles */
.step_1 {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    max-width: 250px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    text-align: center;
}

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

/* Step icon styles */
.step-icon {
    font-size: 2em;
    color: #fff;
    /* background: #0073e6; */
    /* background: linear-gradient(90deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.step_1 h3{
    color: #37848c;
    font-family: "Poppins", serif;
}

/* Media Queries for Responsiveness */

/* Tablet and smaller screens */
@media (max-width: 768px) {
    /* Adjust heading size */
    #customer-engagement-process h2 {
        font-size: 2em;
    }

    /* Adjust paragraph size */
    #customer-engagement-process p {
        font-size: 1.1em;
        max-width: 90%;
    }

    /* Stack steps vertically */
    .steps {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Adjust step card width */
    .step_1 {
        max-width: 100%;
        margin-bottom: 20px;
    }

    /* Adjust icon size */
    .step-icon {
        font-size: 1.5em;
    }
}

/* Mobile screens */
@media (max-width: 480px) {
    /* Adjust heading size */
    #customer-engagement-process h2 {
        font-size: 1.8em;
    }

    /* Adjust paragraph size */
    #customer-engagement-process p {
        font-size: 1em;
        max-width: 100%;
    }

    /* Stack steps vertically with larger gap */
    .steps {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* Adjust step card width and margins */
    .step_1 {
        max-width: 100%;
        padding: 15px;
        margin-bottom: 20px;
    }

    /* Adjust icon size */
    .step-icon {
        font-size: 1.2em;
        width: 50px;
        height: 50px;
    }
}

 /* content marketing process step end */

 /* benefit content_marketing css start */

 .marketing-area {
    /* max-width: 1200px; */
    margin: 1rem auto;
    padding: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* background: white; */
    overflow: hidden;
    width: 100%;
}

.header-title {
    text-align: center;
    position: relative;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.header-title h2 {
    /* color: #2c3e50; */
    /* color:black; */
    font-size: 2.5rem;
    margin-bottom: 1rem;
    /* background: linear-gradient(45deg, #2563eb, #3b82f6); */
    /* background: black; */
    background:#2C2C2C;
    font-weight: bold;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    font-family: "Poppins", serif;
}


.header-title h2::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.header-title p {
    color: #484747;
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 1rem;
    font-family: "Inter Tight", serif;
}

.floating-graphics {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}

.graphic-shape {
    position: absolute;
    opacity: 0.1;
    animation: float 15s infinite linear;
}

.graphic-shape:nth-child(1) { top: 20%; left: 10%; }
.graphic-shape:nth-child(2) { top: 60%; left: 80%; animation-delay: -5s; }
.graphic-shape:nth-child(3) { top: 40%; left: 40%; animation-delay: -8s; }

.stats-box_1 {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    padding: 3rem;
    border-radius: 20px;
    margin: 3rem 0;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease 0.3s forwards;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.stats-box_1:hover {
    transform: translateY(-5px);
}

.highlight-stat_1 {
    font-size: 2.2rem;
    background: linear-gradient(45deg, #3498db, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    margin-bottom: 1rem;
    display: inline-block;
    position: relative;
}

.benefit-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
    perspective: 1000px;
}

.benefits-item {
    background: #fff;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgb(255 255 255 / 21%);
    text-align: center;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(20px) rotateX(10deg);
    position: relative;
    overflow: hidden;
}

.benefits-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1)); */
    /* background: linear-gradient(45deg, rgba(92, 225, 230, 0.1), rgba(128, 235, 240, 0.1)); */
    background:linear-gradient(135deg, rgba(55, 132, 140, 0.05), rgba(55, 132, 140, 0.1));

    opacity: 0;
    transition: opacity 0.3s ease;
}

.benefits-item:hover {
    transform: translateY(-15px) rotateX(0deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.benefits-item:hover::before {
    opacity: 1;
}

.benefits-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    /* background: linear-gradient(135deg, #f0f7ff, #e3f2fd); */
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    transition: all 0.4s ease;
}

.benefits-item:hover .benefits-icon {
    transform: scale(1.1) rotate(360deg);
    /* background: linear-gradient(135deg, #3498db, #2ecc71); */
    /* background: linear-gradient(135deg, #3b82f6, #2563eb); */
    /* background: linear-gradient(135deg, #5ce1e6, #4fc3d4); */
    background: linear-gradient(135deg, #5caeb3, #37848c);
    color: white;
}

.benefits-title-text {
    color: #37848c;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    transition: transform 0.3s ease;
    font-family: "Poppins", serif;
}

.benefits-item:hover .benefits-title-text {
    transform: scale(1.05);
}

.benefits-description-text {
    color: #2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
    font-size: 1rem;
    line-height: 1.8;
    transition: all 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(20px, 20px) rotate(180deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s linear;
    background: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.stat-value_1 {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: countUp 2s ease forwards;
    animation-delay: 1s;
}

@keyframes countUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 /* benefit content_marketing css end */

 /* impact section css start */

 
 .impact-section {
    /* max-width: 1200px; */
    width:100%;
    margin: 0 auto;
    padding: 2rem 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    overflow: hidden;
    /* background: linear-gradient(135deg, #e6f3ff, #f0f8ff);  */
    background: linear-gradient(135deg, rgba(55, 132, 140, 0.05), rgba(55, 132, 140, 0.1));
    border-radius: 20px;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); */
    box-shadow: 0 10px 30px rgba(55, 132, 140, 0.08);
    margin-bottom: 30px;
    margin-top: 30px;
    position: relative;
}

.impact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(55, 132, 140, 0.03) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(55, 132, 140, 0.03) 0%, transparent 20%),
        radial-gradient(circle at 50% 50%, rgba(55, 132, 140, 0.02) 0%, transparent 40%);
    pointer-events: none;
}

.content-left {
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 1rem;
}

.title-wrapper {
    position: relative;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.title_2 {
    font-size: clamp(2rem, 4vw, 2.8rem); /* Responsive font size */
    font-family: "Poppins", serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    /* background: linear-gradient(45deg, #1a5f7a, #2193b0); */
    
    background: #2C2C2C;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.title_2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 4px;
    /* background: linear-gradient(90deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #37848c, #5caeb3);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    animation: scaleIn 0.8s ease forwards 0.5s;
}

.description_2 {
    /* color: #456; */
    color:#484747;
    font-size: clamp(1rem, 2vw, 1.1rem); /* Responsive font size */
    font-family: "Inter Tight", serif;
    line-height: 1.8;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards 0.3s;
}

.points-container {
    margin-top: 2rem;
    display: grid;
    gap: 1rem;
}

.point-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.9);
    /* background: #fff; */
    border-radius: 12px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */
    box-shadow: 0 4px 15px rgba(55, 132, 140, 0.08);
    /* border: 1px solid rgb(255 255 255 / 21%); */
    border: 1px solid rgba(55, 132, 140, 0.1);
    transform: translateX(-50px);
    opacity: 0;
    animation: slideIn 0.6s ease forwards;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.point-item:hover {
    transform: translateX(10px);
    /* background: linear-gradient(45deg, rgba(92, 225, 230, 0.1), rgba(128, 240, 245, 0.1)); */
    background: linear-gradient(45deg, rgba(55, 132, 140, 0.05), rgba(92, 174, 179, 0.08));
    /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); */
    border: 1px solid rgba(55, 132, 140, 0.2);
    box-shadow: 0 6px 20px rgba(55, 132, 140, 0.12);
}

.point-icon {
    width: 40px;
    height: 40px;
    /* background: linear-gradient(45deg, #1a5f7a, #2193b0); */
    /* background: linear-gradient(45deg, #5ce1e6, #2dbec4); */
    /* background:linear-gradient(90deg, #5caeb3, #37848c); */
    background: linear-gradient(45deg, #37848c, #5caeb3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(55, 132, 140, 0.2);
}

.point-text {
    /* color: #345; */
    color:#2C2C2C;
    font-size: clamp(0.9rem, 1.5vw, 1rem); /* Responsive font size */
    line-height: 1.6;
    font-family: "Inter Tight", serif;
}

.image-right {
    flex: 1;
    position: relative;
    height: clamp(300px, 50vw, 600px); /* Responsive height */
    perspective: 1000px;
    padding: 2rem;
}

.trapezoid-container {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: float 6s ease-in-out infinite;
}

.trapezoid {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    /* background: linear-gradient(135deg, #1a5f7a, #2193b0); */
    background: linear-gradient(135deg, #37848c, #5caeb3);
    overflow: hidden;
    transform: translateZ(-50px);
    /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); */
    background: linear-gradient(135deg, #37848c, #5caeb3);
    border-radius: 10px;
}

.trapezoid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.floating-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(26, 95, 122, 0.2);
    animation: floatDot 4s infinite ease-in-out;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotateY(0deg);
    }
    50% {
        transform: translateY(-20px) rotateY(5deg);
    }
}

@keyframes floatDot {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(20px, -20px);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .impact-section {
        padding: 3rem 1.5rem;
        gap: 2rem;
    }
}

@media (max-width: 968px) {
    .impact-section {
        flex-direction: column;
        text-align: center;
    }

    .content-left {
        padding: 1rem;
    }
    .title_2 {
        font-size: clamp(1.8rem, 3vw, 2.5rem); /* Responsive title */
    }

    .title_2::after {
        left: 50%;
        transform: translateX(-50%) scaleX(0);
    }

    .point-item {
        text-align: left;
    }

    .image-right {
        width: 100%;
        height: 400px;
        margin-top: 2rem;
    }
}

@media (max-width: 480px) {
    .impact-section {
        padding: 2rem 1rem;
    }

    .point-item {
        padding: 0.8rem;
    }

    .point-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .image-right {
        height: 300px;
    }
}

 /* impact section css end */

 /* benefit fo social media marketing css start */
 
 .smm-section {
    /* background-color: #e3f2fd; */
    padding: 30px 20px;
    min-height: 100vh;
}

.smm-title {
    text-align: center;
    margin-bottom: 20px;
    color: #2C2C2C;
    font-size: 2.5rem;
    font-family: "Poppins", serif;
}

.smm-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.smm-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px;
}

.smm-card {
   
    background: #fff;;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgb(255 255 255 / 21%);
}

.smm-card:hover {
    transform: translateY(-10px);
}

.smm-icon-box {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.smm-icon-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    /* background: linear-gradient(45deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    border-radius: 20px;
    transform: rotate(45deg);
    z-index: 1;
}

.smm-icon {
    position: relative;
    z-index: 2;
    font-size: 2rem;
    color: white;
    line-height: 80px;
    margin-top: 20px;
}

.smm-card-title {
    color: #37848c;
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-family: "Poppins", serif;
}

.smm-card-text {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

 /* benefit of social media marketing css end */


 /* contact us css start */

 .contact-section {
    background-color: #fff;
    padding: 50px 20px;
    text-align: center;
  }

  .contact-container {
    max-width: 1400px;
    margin: 0 auto;
  }

  .contact-container h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #2C2C2C;
    font-family: "Poppins", serif;
  }


  .contact-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Added gap between cards */
    flex-wrap: wrap; /* Ensures responsiveness */
  }

  .contact-card {
    width: 48%; /* Adjust width as needed */
    height: 500px; /* Set a fixed height for the card */
    padding: 0; /* Remove padding to let the map take the full space */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid #ddd;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    color: #fff;
    background: #fff;
    display: flex; /* Use flex to align map properly */
    justify-content: center; /* Center the map horizontally */
    align-items: center; /* Center the map vertically */
}

  .contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  .card-content h3 {
    font-size: 1.8rem;
    /* color: #fff; */
    /* color:#fff; */
    color: #37848c;
    font-family: "Poppins", serif;
    margin-bottom: 20px;
    font-family: "Poppins", serif;
  }

  .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-left: 50px;
    
  }

  .card-icon {
    font-size: 2rem;
    /* color: #fff; */
    color:#37848c;
    margin-right: 20px;
  }

  .card-details {
    text-align: left; /* Ensure text starts from the same line */
}
  .card-details h4 {
    font-size: 1.2rem;
    font-family: "Poppins", serif;
    /* color: #fff; */
    color: #2C2C2C;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .card-details p {
    font-size: 1rem;
    font-family: "Inter Tight", serif;
    /* color: #ecf0f1; */
    color: #484747;
    font-weight: 700;
  }

  .card-details h4,
.card-details p {
    margin: 0; /* Remove default margin for consistent alignment */
    line-height: 1.5; /* Adjust line height for better readability */
}

 /* Responsive Design */
@media (max-width: 1024px) {
    .contact-container h2 {
        font-size: 2rem; /* Smaller heading on medium screens */
    }

    .contact-card {
        width: 48%; /* Cards remain side by side with smaller gaps */
    }

    .contact-cards {
        gap: 15px; /* Reduce gap on medium screens */
    }
}

@media (max-width: 768px) {
    .contact-card {
        width: 100%; /* One card per row on tablets */
        margin-bottom: 20px; /* Add spacing between cards */
    }

    .contact-container h2 {
        font-size: 1.8rem; /* Adjust heading size */
    }

    .card-content h3 {
        font-size: 1.5rem; /* Adjust subheading size */
    }

    .card-details h4 {
        font-size: 1rem; /* Adjust font size */
    }

    .card-details p {
        font-size: 0.9rem; /* Adjust font size */
    }
}

@media (max-width: 480px) {
    .contact-section {
        padding: 30px 15px; /* Reduced padding for smaller devices */
    }

    .contact-container h2 {
        font-size: 1.6rem; /* Smaller heading for mobile */
    }

    .contact-card {
        padding: 20px; /* Reduce padding */
    }

    .card-icon {
        font-size: 1.5rem; /* Smaller icons for mobile */
        margin-right: 15px;
    }

    .card-content h3 {
        font-size: 1.3rem; /* Adjust subheading size */
    }

    .card-details h4 {
        font-size: 1rem;
    }

    .card-details p {
        font-size: 0.8rem;
    }
}

 /* contact us css end */


 /* blog details css start */

  .digital-container {
            display: flex;
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
            gap: 50px;
        }

        .digital-nav {
            width: 300px;
            position: sticky;
            top: 20px;
            height: fit-content;
            padding: 25px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            border:1px solid rgb(255 255 255 / 21%);
        }

        .digital-menu {
            list-style: none;
        }

        .digital-menu li {
            padding: 12px 15px;
            margin: 8px 0;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.3s ease;
            color:#37848c;
            font-weight: bold;
            font-family: "Roboto Serif", serif;
            font-size: 18px;
            border-left: 3px solid transparent;
        }

        .digital-menu li:hover {
            background: linear-gradient(45deg, rgba(92, 225, 230, 0.1), rgba(92, 225, 230, 0.1));      
            border-left-color: #37848c;
        }

        .digital-menu li.digital-current {
            /* background-color: #e6f2ff; */
            background: linear-gradient(45deg, rgba(92, 225, 230, 0.1), rgba(92, 225, 230, 0.1));
            color:#37848c;
            border-left-color: #37848c;
            font-weight: bold;
        }

        .digital-workspace {
            flex: 1;
            background-color: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid rgb(255 255 255 / 40%);
        }

        .digital-panel {
            margin-bottom: 60px;
            opacity: 0;
            transform: translateY(20px);
            animation: digital-slide 0.5s forwards;
        }

        @keyframes digital-slide {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .digital-panel h2 {
            margin-bottom: 25px;
            color: #2C2C2C;
            font-size: 28px;
            font-family: "Poppins", serif;
            border-bottom: 2px solid #e6e6e6;
            padding-bottom: 15px;
        }

        .digital-panel h3 {
            color:#37848c;
            margin: 20px 0 15px;
            font-size: 20px;
            font-family: "Poppins", serif;
        }

        .digital-panel p {
            color:#484747;
            margin-bottom: 20px;
            font-size: 20px;
            font-family: "Inter Tight", serif;
            line-height: 1.8;
            font-weight: bold;
        }

        .digital-panel ul {
            margin: 20px 0;
            padding-left: 20px;
        }

        .digital-panel ul li {
            margin-bottom: 10px;
            color: #484747;
            font-weight: bold;
            font-family: "Inter Tight", serif;
            font-size: 20px;
        }

        .digital-panel ul li strong{
            color:#2C2C2C;
            font-family: "Poppins", serif;
            
        }

        .digital-toolkit {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
        }

        .digital-chip {
            /* background:linear-gradient(45deg, #5ce1e6, #2db0b3); */
            background:linear-gradient(90deg, #5caeb3, #37848c);
            color: #fff;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-family: "Montserrat", serif;
        }

        code {
            background-color: #f5f5f5;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;
        }

        .digital-highlight {
            background:linear-gradient(45deg, rgba(92, 225, 230, 0.1), rgba(92, 225, 230, 0.1));
            
            border-left: 4px solid  #37848c;
            padding: 20px;
            margin: 20px 0;
            border-radius: 0 6px 6px 0;
        }
        
        .digital-highlight h4{
            color: #37848c;
            font-family: "Poppins", serif;
        }
        @media (max-width: 1200px) {
            .digital-container {
                flex-direction: column; /* Stack the sidebar and content vertically */
            }
        
            .digital-nav {
                width: 100%; /* Sidebar spans the full width */
                margin-bottom: 20px;
            }
        
            .digital-workspace {
                width: 100%; /* Content also spans the full width */
                padding: 20px;
            }
        }
        
        @media (max-width: 768px) {
            .digital-nav {
                padding: 15px; /* Reduce padding for smaller devices */
                box-shadow: none; /* Optional: Remove shadow for a flat look */
            }
        
            .digital-menu li {
                font-size: 14px; /* Adjust font size for better readability */
                padding: 10px 12px;
            }
        
            .digital-workspace {
                padding: 15px;
            }
        
            .digital-panel h2 {
                font-size: 24px; /* Scale down headings */
            }
        
            .digital-panel p, .digital-panel ul li {
                font-size: 14px; /* Adjust paragraph font size */
            }
        }
        
        @media (max-width: 576px) {
            .digital-nav {
                display: none; /* Optional: Hide the sidebar on extra small screens */
            }
        
            .digital-container {
                padding: 10px; /* Reduce container padding */
            }
        
            .digital-panel h2 {
                font-size: 20px; /* Further reduce heading size */
            }
        
            .digital-panel p, .digital-panel ul li {
                font-size: 13px;
                line-height: 1.6;
            }
        
            .digital-highlight {
                padding: 15px;
                border-left-width: 3px; /* Adjust highlight border width */
            }
        
            .digital-toolkit span {
                font-size: 12px;
                padding: 6px 10px;
            }
        }
        
 /* blog details css end */

 /* Ai section Add new css start */

 .cursor-follower {
    position: fixed;
    width: 30px;
    height: 30px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 9999;
    transition: transform 0.1s ease-out;
}

/* .ai-section_1 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4rem 2rem;
    overflow: hidden;
    perspective: 2000px;
    background: #fff;
} */

/* Base Styles for Desktop */
.ai-section_1 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem 2rem;
    overflow: hidden;
    perspective: 2000px;
    background: #fff;
    flex-direction: column;
}


.background-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* .ai-content {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    display: flex;
    align-items: center;
    gap: 4rem;
    transform-style: preserve-3d;
} */

.ai-content {
    position: relative;
    z-index: 10;
    /* max-width: 1400px; */
    display: flex;
    align-items: center;
    gap: 4rem;
    transform-style: preserve-3d;
    flex-wrap: wrap;
    width: 100%; /* Ensures content takes full available width */
}
.content-wrapper {
    flex: 1;
    /* transform: translateZ(50px); */
}

.ai-subtitle {
    /* font-family: 'Orbitron', sans-serif; */
    font-family: "Poppins", serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    /* color: var(--primary-color); */
    /* color: #37848c; */
    color:rgb(36, 144, 141);
    /* background: rgb(233, 244, 244); */
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards 0.5s;
}

.ai-title {
    /* font-family: 'Orbitron', sans-serif; */
    font-family: "Poppins", serif;
    font-size: 3.5rem;
    /* background: var(--gradient-primary); */
    /* background: linear-gradient(45deg, #bc8d1b, #ffd700); */
    background: #2C2C2C;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.2s forwards 0.7s;
}

.ai-description {
    /* color: #a0a0ff; */
    color:#2C2C2C;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 1.2s forwards 0.9s;
    font-family: "Inter Tight", serif;
}

.ai-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    /* margin-bottom: 3rem; */
    
}

.feature {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgb(249 247 247);
    padding: 2rem;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translateY(50px);
}

.feature:nth-child(1) { animation: fadeInUp 1.2s forwards 1.1s; }
.feature:nth-child(2) { animation: fadeInUp 1.2s forwards 1.3s; }
.feature:nth-child(3) { animation: fadeInUp 1.2s forwards 1.5s; }

.feature::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* background: radial-gradient(
        circle at center,
        rgba(0,255,255,0.1) 0%,
        transparent 70%
    ); */
    /* background: radial-gradient(
        circle at center,
        rgba(0, 255, 255, 0.1) 0%,
        transparent 70%
    );  */
    opacity: 0;
    transition: opacity 0.5s ease;
    transform: rotate(0deg);
}

.feature:hover {
    transform: scale(1.05) translateZ(30px);
    /* box-shadow: 0 0 50px rgba(0,255,255,0.3); */
    box-shadow: 0 0 50px rgba(188, 141, 27, 0.3);
}

.feature:hover::before {
    opacity: 1;
    animation: rotate 5s linear infinite;
}

.feature-icon_1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    /* background: var(--gradient-primary); */
    /* background: linear-gradient(45deg, #5ce1e6, #2dcdd2); */
    /* background: linear-gradient(90deg, #5caeb3, #37848c); */
    background: linear-gradient(135deg, #24908D, #2dbec4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.feature-title_1 {
    /* font-family: 'Orbitron', sans-serif; */
    font-family: "Poppins", serif;
    /* color: var(--primary-color); */
    /* color: #37848c; */
    color: #24908D;
    font-weight: bold;
    margin-bottom: 1rem;
    font-weight: 500;
}

.feature-description_1 {
    /* color: #a0a0ff; */
    color:#2C2C2C;
    font-size: 0.9rem;
    font-family: "Inter Tight", serif;
}

/* .ai-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
} */

.ai-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 600px;
    transition: transform 0.3s ease; /* Smooth transition for scaling */
    opacity: 1;
    transform: translateZ(-100px) scale(1); /* Default size */
}


.ai-brain {
    max-width: 600px;
    /* filter: drop-shadow(0 0 80px rgba(0,255,255,0.4)); */
    /* filter: drop-shadow(0 0 80px rgba(92, 225, 230, 0.3)); */
    /* filter: drop-shadow(0 0 80px rgba(80, 200, 210, 0.4)); */
    animation: 
        brain-pulse 4s infinite,
        float 3s ease-in-out infinite alternate;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateZ(-100px) scale(0.8);
    animation: 
        brain-appear 1.5s forwards 1.7s,
        brain-pulse 4s infinite,
        float 3s ease-in-out infinite alternate;
    height:470px;
    border-radius:30px;
}

.cta-button {
    display: inline-block;
    /* background: var(--gradient-primary); */
    /* background: linear-gradient(90deg, #5ce1e6, #89eff1); */
    /* background: linear-gradient(90deg, #5caeb3, #37848c); */
    background:rgb(37, 158, 166);
    color: #fff;
    padding: 1.2rem 2.5rem;
    border-radius: 10px;
    text-decoration: none;
    /* font-family: 'Orbitron', sans-serif; */
    font-family: "Montserrat", serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 1.2s forwards 1.7s;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    transition: all 0.5s ease;
}

.cta-button:hover {
    transform: scale(1.1) translateZ(50px);
}

.cta-button:hover::before {
    left: 100%;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes brain-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.05) rotate(2deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes brain-appear {
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}


/* Medium Screens (Tablets, 768px and up) */
@media (max-width: 1024px) {
    /* .ai-section_1 {
        flex-direction: column-reverse;
    } */

    .ai-visual {
        order: -1; /* Move image above content */
        max-width: 80%; /* Reduce the image width */
        transform: translateZ(0) scale(1.2); /* Scale up image for tablets */
    }
    

    .ai-content {
        flex-direction: column-reverse;
        gap: 2rem;
    }
    .ai-title {
        font-size: 3rem;
    }

    .ai-description {
        font-size: 1rem;
    }

    .cta-button {
        padding: 1rem 2rem;
    }
    .ai-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small Screens (Mobile devices, 480px and up) */
@media (max-width: 768px) {
    .ai-title {
        font-size: 2.5rem; /* Smaller title for mobiles */
    }

    .ai-description {
        font-size: 0.9rem; /* Smaller text for description */
    }

    .ai-features {
        grid-template-columns: 1fr; /* Stack features vertically */
        gap: 1rem;
        margin-top:70px;
    }

    .feature {
        padding: 1.5rem;
    }

    .ai-visual {
        max-width: 90%; /* Adjust image size */
        transform: translateZ(0) scale(1.4); /* Increase image size */
    }

    .ai-content {
        padding: 0 1rem; /* Add horizontal padding to prevent content from being cut off */
    }
    .ai-brain{
        height: 250px;
    width: 250px;
    object-fit: cover;
    }
}

/* Extra Small Screens (Portrait Mobile Devices, 480px and below) */
@media (max-width: 480px) {
    .ai-title {
        font-size: 2rem; /* Even smaller title for very small screens */
    }

    .ai-description {
        font-size: 0.85rem; /* Even smaller description text */
    }

    .cta-button {
        padding: 0.8rem 1.8rem; /* Smaller button padding */
    }

    .ai-visual {
        max-width: 100%; /* Ensure the image takes up the full screen */
        transform: translateZ(0) scale(1.5); /* Make image even bigger */
    }

    .ai-content {
        padding: 0 0.5rem; /* Add padding to prevent clipping */
    }
}

/* Additional Small Screen Adjustments for Very Narrow Devices (e.g., Portrait Phones) */
@media (max-width: 360px) {
    .ai-title {
        font-size: 1.8rem; /* Reduce title size further */
    }

    .ai-description {
        font-size: 0.8rem; /* Reduce description size further */
    }

    .cta-button {
        padding: 0.6rem 1.5rem; /* Adjust button padding for small screens */
    }

    .ai-visual {
        max-width: 100%; /* Keep image at full screen width */
        transform: translateZ(0) scale(1.6); /* Increase image size for very small screens */
    }

    .ai-content {
        padding: 0 0.5rem; /* Add padding to prevent clipping */
    }
}
 /* Ai section Add new end */


 /* Ai assisant programming language css start*/

 #code-companion-container {
    width: 500px;
    height: 450px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: none;
}

#code-companion-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    /* background: linear-gradient(135deg, #5ce1e6 0%, #4db8b2 100%); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

#code-companion-icon:hover {
    transform: scale(1.1);
}

#code-companion-icon i {
    color: white;
    font-size: 30px;
}

#companion-header {
    /* background: linear-gradient(135deg, #5ce1e6 0%, #4db8b2 100%); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#companion-threads {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #f9f9f9;
}

.conversation-message {
    margin-bottom: 15px;
    max-width: 90%;
    clear: both;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

.conversation-message.user-dialogue {
    float: right;
    text-align: right;
}

.conversation-message.ai-dialogue {
    float: left;
}

.dialogue-content {
    padding: 15px;
    border-radius: 10px;
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
}

.conversation-message.user-dialogue .dialogue-content {
    background-color: var(--secondary-color);
    /* color: white; */
    color:#2C2C2C;
}

.conversation-message.ai-dialogue .dialogue-content {
    background-color: #e6e6e6;
    color: var(--text-color);
}

.snippet-block {
    background-color: var(--code-bg-color);
    border-radius: 5px;
    padding: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
    overflow-x: auto;
}

#companion-input-section {
    display: flex;
    padding: 15px;
    background-color: white;
    border-top: 1px solid #eee;
}

#language-picker {
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#text-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 10px;
}

#dispatch-btn {
    /* background: linear-gradient(135deg, #5ce1e6 0%, #4db8b2 100%); */
    background:linear-gradient(90deg, #5caeb3, #37848c);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#dispatch-btn:hover {
    background-color: var(--secondary-color);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#close-btn:hover {
    color: var(--secondary-color);
}


@media (max-width: 768px) {
    #code-companion-container {
        width: 90%; /* Adjust width to fit smaller screens */
        height: auto; /* Allow the height to expand naturally */
        top: 10%;
        transform: translate(-50%, 0); /* Shift to top for smaller screens */
    }

    #companion-header {
        font-size: 1rem; /* Reduce header font size */
        padding: 10px; /* Adjust padding */
    }

    #companion-threads {
        padding: 10px; /* Adjust padding for better fit */
    }

    #companion-input-section {
        flex-direction: column; /* Stack the input section items */
        gap: 10px; /* Add space between stacked items */
    }

    #language-picker,
    #text-input,
    #dispatch-btn {
        width: 100%; /* Make each input section take full width */
        padding: 8px;
    }
}

@media (max-width: 480px) {
    #code-companion-icon {
        width: 50px; /* Smaller button size */
        height: 50px;
    }

    #code-companion-icon i {
        font-size: 20px; /* Adjust icon size */
    }

    #companion-header h2 {
        font-size: 1rem; /* Reduce header text size */
    }
}
@media (max-width: 320px) {
    #companion-header {
        font-size: 0.9rem; /* Further reduce font size */
    }

    #dispatch-btn {
        padding: 5px; /* Compact button size */
    }
}

@media (orientation: landscape) and (max-height: 400px) {
    #code-companion-container {
        top: 5%;
        transform: translate(-50%, 0); /* Adjust for landscape mode */
    }

    #companion-threads {
        max-height: 50vh; /* Restrict height for threads */
    }
}

 /* Ai assisant programming language end */


 /* ecommerce section start */

/* General Styling */
/* General Styling */

.ecommerce-section {
    padding: 20px 20px;
    background: #fff;
    color: #fff;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
  }
  
  .container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    gap: 40px;
    align-items: center;
    position: relative;
  }
  
  .left-side {
    flex: 1;
    position: relative;
  }
  
  .right-side {
    flex: 1;
    padding: 20px;
  }
  
  .image-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 400px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }
  
  .ecommerce-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .main-heading {
    font-size: 32px;
    font-weight: bold;
    font-family: "Poppins", serif;
    color: #2C2C2C;
    margin-bottom: 15px;
  }
  
  .description_3 {
    font-size: 18px;
    font-family: "Inter Tight", serif;
    color: #484747;
    line-height: 1.8;
  }
  
  /* Media Queries */
  @media (max-width: 1024px) {
    .container {
      max-width: 960px;
      gap: 30px;
    }
  
    .image-container {
      height: 350px;
    }
  
    .main-heading {
      font-size: 28px;
    }
  }
  
  @media (max-width: 768px) {
    .ecommerce-section {
      min-height: auto;
      padding: 30px 15px;
    }
  
    .container {
      flex-direction: column;
      gap: 30px;
    }
  
    .left-side, .right-side {
      flex: none;
      width: 100%;
    }
  
    .image-container {
      max-width: 100%;
      height: 300px;
    }
  
    .main-heading {
      font-size: 24px;
    }
  
    .description_3 {
      font-size: 16px;
    }
  }
  
  @media (max-width: 480px) {
    .image-container {
      height: 250px;
    }
  
    .main-heading {
      font-size: 22px;
    }
  }
  
 /* ecommerce section end */


 /* ecommerce solution app development start */

 .wrapper-container {
    /* max-width: 1200px; */
    width:100%;
    margin: 0 auto;
    padding: 20px 15px;
}

.features-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.feature-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 30%;
}

.device-section {
    width: 40%;
    display: flex;
    justify-content: center;
}

.device-mockup {
    background-color: #333;
    width: 320px;
    padding: 15px;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: height 0.5s ease;
}

.device-screen {
    background-color: white;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    transition: height 0.5s ease;
}

.device-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.device-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 25px;
    background-color: #ddd;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.feature-item_1 {
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    opacity: 0.8;
    transform-origin: center left;
}

.feature-item_1.left {
    animation: float-left 3s ease-in-out infinite alternate;
}

.feature-item_1.right {
    animation: float-right 3s ease-in-out infinite alternate;
    flex-direction: row-reverse;
    text-align: right;
}

@keyframes float-left {
    0% { transform: translateX(0) rotate(-2deg) scale(1); }
    100% { transform: translateX(15px) rotate(2deg) scale(1.03); }
}

@keyframes float-right {
    0% { transform: translateX(0) rotate(2deg) scale(1); }
    100% { transform: translateX(-15px) rotate(-2deg) scale(1.03); }
}

.feature-item_1:hover {
    opacity: 1;
    transform: scale(1.05);
    z-index: 10;
}

.feature-icon_2 {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.feature-item_1:hover .feature-icon_2 {
    transform: rotate(360deg);
}

.section-heading {
    text-align: center;
    margin-bottom: 50px;
    color: #2C2C2C;
    font-weight: bold;
    font-family: "Poppins", serif;
    font-size: 2rem;
}

.section-heading span {
    color:#37848c;
    display: block;
    margin-bottom: 10px;
    font-family: "Poppins", serif;
}

.features-description h3{
    color: #37848c;
    font-family: "Poppins", serif;
}

.features-description p{
    color:#2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}


@media (max-width: 768px) {
    .features-section {
        flex-direction: column;
    }

    .feature-column,
    .device-section {
        width: 100%;
    }
}

 /* ecommerce solution app development end */



 /* custom benefit section  ecoomerce solution start  */

 .custom-benefits-section {
    /* max-width: 1200px; */
    width:100%;
    margin: 0 auto;
    padding: 2rem 2rem;
}

.custom-benefits-header {
    text-align: center;
    margin-bottom: 2rem;
}

.custom-benefits-header h2 {
    color: #37848c;
    font-size: 1.5rem;
    font-family: "Poppins", serif;
    /* text-transform: uppercase; */
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.custom-benefits-header .custom-main-heading {
    font-size: 2.5rem;
    font-family: "Poppins", serif;
    color: #2C2C2C;
    font-weight: bold;
    margin: 0 auto 1.5rem;
}

.custom-benefits-header p {
    /* max-width: 800px; */
    margin: 0 auto;
    color: #484747;
    font-weight: bold;
    font-size: 18px;
    font-family: "Inter Tight", serif;
}

.custom-benefits-timeline {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    gap: 2rem;
    margin-top: 3rem;
}

.custom-benefit-item {
    position: relative;
    width: calc(33.33% - 2rem);
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(50px);
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.custom-benefit-item.show {
    opacity: 1;
    transform: translateY(0);
}

.custom-benefit-number {
    position: absolute;
    font-size: 3rem;
    color: #37848c;
    font-weight: bold;
    top: -15px;
    left: -25px;
    z-index: 1;
}

.custom-benefit-content h5 {
    color: #37848c;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-family: "Poppins", serif;
}

.custom-benefit-content p {
    color: #2C2C2C;
    font-size: 1rem;
    font-family: "Roboto Serif", serif;
}

/* Media Query for Tablets (768px and below) */
@media (max-width: 768px) {
    .custom-benefits-header .custom-main-heading {
        font-size: 2rem;
    }

    .custom-benefit-item {
        width: 100%;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .custom-benefit-number {
        font-size: 2.5rem;
        left: -20px;
    }

    .custom-benefit-content h5 {
        font-size: 1.3rem;
    }

    .custom-benefit-content p {
        font-size: 0.9rem;
    }
}

/* Media Query for Mobile Devices (480px and below) */
@media (max-width: 480px) {
    .custom-benefits-header h2 {
        font-size: 1rem;
    }

    .custom-benefits-header .custom-main-heading {
        font-size: 1.8rem;
    }

    .custom-benefits-header p {
        font-size: 0.9rem;
    }

    .custom-benefit-item {
        padding: 1rem;
    }

    .custom-benefit-number {
        font-size: 2rem;
        left: -15px;
    }

    .custom-benefit-content h5 {
        font-size: 1.2rem;
    }

    .custom-benefit-content p {
        font-size: 0.8rem;
    }
}

 
 /* custom benefit section ecommerce solution end */

/* ecommerce solution tapped layout start */

.ft-container {
    /* max-width: 1200px; */
    width:100%;
    margin: 2rem auto;
    padding: 0 1rem;
    background: linear-gradient(to bottom right, #f8fafc, #edf7f8);
}

.ft-section-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
    /* background: #fff; */
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 15px;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
    box-shadow: 0 4px 20px rgba(55, 132, 140, 0.1);
    border: 1px solid rgba(55, 132, 140, 0.05);
}

.ft-section-header h2 {
    font-size: 2.5rem;
    font-family: "Poppins", serif;
    color: #2C2C2C;
    /* color: #37848c; */
    margin-bottom: 1rem;
    position: relative;
}

.ft-section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    /* background: linear-gradient(90deg, #5ce1e6, #2dbec4); */
    background: linear-gradient(90deg, #37848c, #5ce1e6);
    border-radius: 3px;
}

.ft-section-header p {
    font-size: 1.2rem;
    color: #484747;
    /* color: #37848c; */
    font-weight: bold;
    font-family: "Roboto Serif", serif;
    opacity: 0.9;
}

.ft-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(55, 132, 140, 0.08);
}

.ft-tab-btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-family: "Montserrat", serif;
    background: #fff;
    border: 2px solid #37848c;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    color:#37848c;
    position: relative;
    overflow: hidden;
}

.ft-tab-btn:hover {
    background: rgba(55, 132, 140, 0.05);
    transform: translateY(-2px);
}

.ft-tab-btn.ft-active {
    /* background: linear-gradient(45deg, #5ce1e6, #3bbcc3); */
    background: linear-gradient(90deg, #5caeb3, #37848c);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.ft-content-container {
    /* background: #fff; */
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    padding: 1rem;
    border-radius: 15px;
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: 1px solid rgb(255 255 255 / 21%); */
    box-shadow: 0 8px 30px rgba(55, 132, 140, 0.1);
    border: 1px solid rgba(55, 132, 140, 0.08);
    
}

.ft-tab-content {
    display: none;
    min-height: 500px;
}

.ft-tab-content.ft-active {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.ft-step-navigation {
    flex: 1;
}

.ft-step-list {
    list-style: none;
    /* background: rgba(247, 249, 252, 0.9); */
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(55, 132, 140, 0.08);
}

.ft-step-item {
    padding: 1rem;
    margin: 0.5rem 0;
    /* border: 1px solid #ddd; */
    border: 1px solid rgba(55, 132, 140, 0.1);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: #37848c;
    font-family: "Poppins", serif;
}

.ft-step-item:hover {
    transform: translateX(5px);
    background: rgba(55, 132, 140, 0.02);
}

.ft-step-item.ft-active {
    /* background: linear-gradient(45deg, #5ce1e6, #3bbcc3); */
    background: linear-gradient(45deg, #37848c, #5ce1e6);
    color: white;
    transform: translateX(10px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
    border: none;
}

.ft-step-description {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    font-family: "Inter Tight", serif;
}

.ft-step-description.ft-show {
    max-height: 100px;
    opacity: 1;
}

.ft-step-preview {
    flex: 2;
    position: relative;
}

.ft-device-frame {
    position: relative;
    width: 100%;
    padding-bottom: 40%;
}

.ft-mobile-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 450px;
    /* border: 16px solid #333; */
    border: 16px solid #37848c;
    box-shadow: 0 8px 30px rgba(55, 132, 140, 0.2);
    border-radius: 40px;
    overflow: hidden;
    background: white;
}

.ft-laptop-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 0;
    padding-bottom: 45%;
    /* background: #333; */
    border-radius: 10px 10px 0 0;
    background: #37848c;
    box-shadow: 0 8px 30px rgba(55, 132, 140, 0.2);
}

.ft-screen-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
}
.ft-screen-content img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image adapts proportionally */
}

.ft-laptop-frame .ft-screen-content {
    top: 5%;
    left: 2%;
    width: 96%;
    height: 90%;
}

.ft-navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0 1rem;
}

.ft-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    /* background: linear-gradient(45deg, #5ce1e6, #3bbcc3); */
    background: linear-gradient(45deg, #37848c, #5ce1e6);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-family: "Montserrat", serif;
}

.ft-nav-btn:hover {
    background: linear-gradient(45deg, #5ce1e6, #3bbcc3);
    transform: translateY(-2px);
}

.ft-nav-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(55, 132, 140, 0.3);
}

.ft-nav-btn:disabled {
    /* background: #bdc3c7; */
    background: linear-gradient(45deg, #cbd5d5, #d1e0e0);
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

.ft-nav-btn::before {
    content: '←';
    font-size: 1.2rem;
}

.ft-nav-btn.ft-next::before {
    content: none;
}

.ft-nav-btn.ft-next::after {
    content: '→';
    font-size: 1.2rem;
}

.ft-screen-content img {
    transition: opacity 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ft-fade-in {
    animation: ft-fadeIn 0.3s ease-in;
}

@keyframes ft-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .ft-section-header h2 {
        font-size: 1.5rem;
    }

    .ft-section-header p {
        font-size: 0.9rem;
    }

    .ft-tabs {
        gap: 0.3rem;
    }

    .ft-tab-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .ft-content-container {
        padding: 1rem;
    }

    .ft-tab-content.ft-active {
        flex-direction: column;
    }

    .ft-step-navigation,
    .ft-step-preview {
        flex: 1 0 100%;
    }

    .ft-mobile-frame {
        width: 150px;
        height: 270px;
        border: 10px solid #333;
        box-shadow: 0 6px 20px rgba(55, 132, 140, 0.15);
    }

    .ft-laptop-frame {
        width: 350px; /* Or a percentage-based width */
        padding-bottom: 60%; /* Maintains the aspect ratio */
        height: 250px; /* Ensure height is determined by padding-bottom */
        margin-top: 70px;
    }
    
}

@media (max-width: 480px) {
    .ft-section-header h2 {
        font-size: 1.2rem;
    }

    .ft-section-header p {
        font-size: 0.8rem;
    }

    .ft-tab-btn {
        padding: 0.3rem 0.8rem;
        font-size: 0.7rem;
    }

    .ft-step-description {
        font-size: 0.8rem;
    }

    .ft-mobile-frame {
        width: 120px;
        height: 220px;
        margin-top: 50px;
    }
}


/* ecommerce solution tapped layout end */


/* hrm solution start */
.hrm-container {
    display: flex;
    width: 100%;
    margin: 20px auto;
    padding: 30px;
    /* background-color: #fff; */
    background: linear-gradient(145deg, #ffffff, #f8fdfd);
    border-radius: 15px;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 15px 35px rgba(55, 132, 140, 0.1);
    gap: 40px;
    flex-wrap: wrap; /* Ensure that on smaller screens, elements wrap */
}

.hrm-left-section {
    flex: 1;
    padding: 25px;
    /* background-color: #fff; */
    background: linear-gradient(145deg, #37848c, #2d6a70);
    border-radius: 10px;
    border-left: 5px solid #37848c;
    box-shadow: 0 10px 30px rgba(55, 132, 140, 0.15);
    position: relative;
    overflow: hidden;
}


.hrm-left-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(92, 225, 230, 0.1), transparent);
    pointer-events: none;
}

.hrm-right-section{
    flex: 1;
    padding: 25px;
    /* background-color: #fff; */
    background: linear-gradient(145deg, #ffffff, #f5fcfd);
    border-radius: 10px;
    border-left: 5px solid #37848c; 
    box-shadow: 0 10px 30px rgba(55, 132, 140, 0.08);
    position: relative;
    overflow: hidden;
}

.hrm-solution-title {
    font-size: 5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    position: relative;
    margin-bottom: 20px;
    font-family: lato, sans-serif;
    -webkit-text-stroke: 2px #545353;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.hrm-solution-subtitle {
    font-size: 2rem;
    font-family: "Poppins", serif;
    font-weight: bold;
    /* color: #2C2C2C; */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    border-bottom: 2px solid #5ce1e6;
    padding-bottom: 10px;
    position: relative;
}

.hrm-left-section p {
    /* color: #484747; */
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
    font-family: "Inter Tight", serif;
    font-size: 1.2rem;
    line-height: 1.6;
    position: relative;
}

.hrm-right-section {
    position: relative;
    overflow: hidden;
}

.service-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 500px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 20px;
    scroll-behavior: smooth;
}

.service-cards-wrapper::-webkit-scrollbar {
    display: none;
}


.service-cards-wrapper::-webkit-scrollbar-track {
    background: rgba(55, 132, 140, 0.05);
    border-radius: 4px;
}

.service-cards-wrapper::-webkit-scrollbar-thumb {
    background: rgba(55, 132, 140, 0.2);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.service-cards-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(55, 132, 140, 0.3);
}


.service-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.service-card_1 {
    /* background-color: #ffffff; */
    background: linear-gradient(145deg, #ffffff, #f8fdfd);
    border-radius: 12px;
    padding: 25px;
    /* box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); */
    box-shadow: 0 8px 20px rgba(55, 132, 140, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* border: 1px solid transparent; */
    border: 1px solid rgba(55, 132, 140, 0.1);
}

.service-card_1::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* background: linear-gradient(45deg, rgba(92, 225, 230, 0.1), rgba(128, 240, 245, 0.1)); */
    background: linear-gradient(45deg, rgba(92, 225, 230, 0.08), rgba(55, 132, 140, 0.08));
    transform: rotate(-45deg);
    transition: all 0.3s ease;
    opacity: 0;
}

.service-card_1:hover {
    transform: translateY(-10px);
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); */
    /* border-color: #37848c; */
    box-shadow: 0 15px 30px rgba(55, 132, 140, 0.12);
    border-color: rgba(55, 132, 140, 0.25);
}

.service-card_1:hover::before {
    opacity: 1;
}

.service-card_1 h3 {
    color: #37848c;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-family: "Poppins", serif;
    font-weight: 600;
    position: relative;
}

.service-card_1 p {
    /* color: #7f8c8d; */
    color: #5a6a6c;
    font-size: 1rem;
    font-family: "Inter Tight", serif;
    line-height: 1.5;
    position: relative;
}

.scroll-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 6px;
    /* background-color: #bdc3c7; */
    background-color: rgba(55, 132, 140, 0.2);
    border-radius: 3px;
    animation: pulses 1.5s infinite;
}

@keyframes pulses {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
    }
}

.next-section-btn {
    display: block;
    width: 250px;
    margin: 20px auto;
    padding: 12px 25px;
    background-color: #3498db;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.next-section-btn:hover {
    background-color: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(52, 152, 219, 0.5);
}

/* Media Queries for Responsiveness */

@media (max-width: 1024px) {
    .hrm-container {
        flex-direction: column;
        gap: 20px;
    }

    .hrm-left-section, .hrm-right-section {
        flex: none;
        width: 100%;
        padding: 15px;
    }

    .hrm-solution-title {
        font-size: 3rem;
    }

    .hrm-solution-subtitle {
        font-size: 1.5rem;
    }

    .service-cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .hrm-container {
        padding: 20px;
    }

    .hrm-solution-title {
        font-size: 2.5rem;
    }

    .hrm-solution-subtitle {
        font-size: 1.2rem;
    }

    .service-cards {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .hrm-solution-title {
        font-size: 2rem;
    }

    .hrm-solution-subtitle {
        font-size: 1rem;
    }

    .service-card h3 {
        font-size: 1rem;
    }

    .service-card p {
        font-size: 0.8rem;
    }
}

/* hrm solution end */

/* hrm solution hr Modules container start */

.hr-modules-container {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    /* width: 1100px; */
    width:100%;
    padding: 20px;
}

.hr-title {
    text-align: center;
    margin-bottom: 30px;
}

.hr-title h1 {
    color: #2C2C2C;
    font-size: 28px;
    font-weight: bold;
    font-family: "Poppins", serif;
}

.hr-title h1::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}


.modules-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.modules-tabs {
    display: flex;
    /* background-color: #fff; */
    border-radius: 12px;
    padding: 10px;
    gap: 10px;
}

.tab-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: none;
    /* background-color: transparent; */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-family: "Montserrat", serif;
    color: #37848c;
}

.tab-button:hover, .tab-button.active {
    /* background: linear-gradient(45deg, #5ce1e6, #3bbcc3); */
    background:linear-gradient(90deg, #5caeb3, #37848c);
    color: white;
}

.tab-button img {
    width: 24px;
    height: 24px;
}

.module-content {
    display: none;
    animation: fadeIn 0.5s ease;
    flex-direction: row;
}

.module-content.active {
    display: flex;
    align-items: center;
}

.module-details {
    width: 60%;
    padding-right: 30px;
}

.module-image {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.module-image img {
    max-width: 350px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.module-details h2 {
    color:#37848c;
    margin-bottom: 15px;
    font-size: 25px;
    font-family: "Poppins", serif;
}

.module-details p{
    color:#2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.feature-list_1 {
    list-style-type: none;
    margin-top: 15px;
}

.feature-list_1 li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color:#484747;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.feature-list_1 li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #37848c ;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

@media (max-width: 1200px) {
.hr-modules-container {
width: 95%;
padding: 15px;
}
}

@media (max-width: 768px) {
.modules-tabs {
flex-wrap: wrap;
justify-content: space-evenly;
gap: 5px;
}

.tab-button {
flex: 1 1 45%;
text-align: center;
}

.module-content {
flex-direction: column;
}

.module-details {
width: 100%;
padding-right: 0;
text-align: center;
}

.module-image {
width: 100%;
margin-top: 15px;
}

.module-image img {
max-width: 100%;
height: auto;
}
}

@media (max-width: 480px) {
.hr-title h1 {
font-size: 22px;
}

.tab-button {
font-size: 14px;
padding: 10px 8px;
}

.module-details h2 {
font-size: 18px;
}

.feature-list_1 li {
font-size: 14px;
}
}


/* hrm solution hr Modules container end */

/* hrm solution journey container start */

.benefits-wrapper {
    width: 100%;
    /* background-color: #fff; */
    background: linear-gradient(145deg, #ffffff, #f8fdfd);
    border-radius: 20px;
    /* box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08); */
    box-shadow: 0 20px 50px rgba(55, 132, 140, 0.08);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(55, 132, 140, 0.05);
}

.benefits-header-section {
    /* background: #fff; */
    background: linear-gradient(145deg, #37848c, #2d6a70);
    color: white;
    text-align: center;
    padding: 20px 20px;
    position: relative;
    overflow: hidden;
}

.benefits-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(92, 225, 230, 0.1), transparent);
    pointer-events: none;
}

.benefits-header-title {
    font-size: 2.5rem;
    font-family: "Poppins", serif;
    margin-bottom: 15px;
    font-weight: bold;
    /* color: #2C2C2C; */
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.benefits-header-description {
   
    margin: 0 auto;
    opacity: 1;
    color:#484747;
    /* color: #ffffff; */
    font-weight: bold;
    font-family: "Poppins", serif;
    line-height: 1.6;
    font-size: 1.1rem;
    position: relative;
}

.journey-container {
    position: relative;
    padding: 60px 40px;
    /* background-color: var(--background); */
    background: linear-gradient(145deg, #ffffff, #f8fdfd);
}

.journey-line-decorator {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    /* background: linear-gradient(to bottom, #5ce1e6, #3bbcc3); */
    background: linear-gradient(to bottom, #5ce1e6, #37848c);
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.7;
}

.journey-item {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    position: relative;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.journey-item.active {
    opacity: 1;
    transform: translateX(0);
}

.journey-item:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
}

.journey-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* background-color: #5ce1e6 ; */
    background: linear-gradient(145deg, #5ce1e6, #37848c);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: white;
    font-weight: bold;
    /* box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.2); */
    /* box-shadow: 0 0 0 5px rgba(188, 141, 27, 0.2); */
    box-shadow: 0 0 0 6px rgba(55, 132, 140, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.journey-content-box {
    width: 45%;
    /* background-color: #fff; */
    background: linear-gradient(145deg, #ffffff, #f8fdfd);
    padding: 30px;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid rgb(255 255 255 / 21%); 
    /* box-shadow: 0 15px 35px rgba(55, 132, 140, 0.08); */
    /* border: 1px solid rgba(55, 132, 140, 0.08); */
    transition: transform 0.3s ease;
}

.journey-content-box:hover {
    transform: scale(1.03);
    /* box-shadow: 0 20px 40px rgba(55, 132, 140, 0.12);
    border-color: rgba(55, 132, 140, 0.15); */
}

.journey-icon {
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 3rem;
    opacity: 0.5;
    transform: rotate(10deg);
    transition: all 0.3s ease;
}

.journey-content-box h3{
   color:  #37848c;
   font-family: "Poppins", serif;
   font-size: 22px;
   font-size: 1.4rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.journey-content-box p{
  /* color:#2C2C2C; */
  color: #4a5568;
  font-weight: 500;
  font-family: "Inter Tight", serif;
  line-height: 1.6;
    font-size: 1.05rem;
}
.interactive-decorator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    /* background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(59, 130, 246, 0.05) 0%, 
        transparent 60%
    ); */
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(55, 132, 140, 0.03) 0%, 
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.benefits-wrapper:hover .interactive-decorator {
    opacity: 1;
}

@media (max-width: 1024px) {
    .journey-item {
        flex-direction: column !important;
        text-align: center !important;
        margin-bottom: 30px;
    }

    .journey-content-box {
        width: 100%;
        margin-top: 20px;
    }

    .journey-line-decorator {
        display: none;
    }

    .journey-marker {
        position: relative;
        transform: none;
        margin-bottom: 15px;
    }
}


@media (max-width: 768px) {
.benefits-wrapper {
width: 90%;
margin: 0 auto;
}

.benefits-header-section {
padding: 20px 10px;
}

.benefits-header-title {
font-size: 1.8rem;
}

.journey-container {
padding: 20px;
}

.journey-item {
margin-bottom: 20px;
}

.journey-content-box {
padding: 20px;
}

.journey-marker {
width: 30px;
height: 30px;
font-size: 0.9rem;
}
.journey-line-decorator {
display: none;
}
}

@media (max-width: 480px) {
.benefits-header-title {
font-size: 1.5rem;
}

.journey-content-box {
padding: 15px;
}

.journey-marker {
width: 25px;
height: 25px;
font-size: 0.8rem;
}
}


/* hrm solution journey container end */


/* crm process step start */

.crm-process-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem;
}

.process-title {
    text-align: center;
    font-size: 2.5rem;
    font-family: "Poppins", serif;
    margin-bottom: 1rem;
    background: #2C2C2C;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.process-steps-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.process-description {
font-size: 1.1rem;
font-family: "Inter Tight", serif;
color: #484747;
margin: 1rem 0;
text-align: center;
}


.process-step-card {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 3rem;
    transition: transform 0.3s ease;
}

.process-step-card:hover {
    transform: scale(1.02);
}

.process-step-content {
    flex-grow: 1;
    z-index: 2;
    position: relative;
}

.process-step-number {
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(255,255,255,0.1);
    z-index: 1;
}

.process-step-text-wrapper {
    max-width: 70%;
}

.process-step-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2rem;
    z-index: 2;
}

.process-step-icon {
    font-size: 5rem;
    opacity: 0.8;
    color:#fff;
}

.process-step-title {
    font-size: 2rem;
    font-family: "Poppins", serif;
    margin-bottom: 1rem;
    font-weight: 700;
    /* color:#37848c; */
    color:#fff
}

.process-step-description {
    color: #2C2C2C;
    font-weight: bold;
    font-size: 1rem;
    font-family: "Inter Tight", serif;
}

@media (max-width: 768px) {
    .process-step-card {
        flex-direction: column;
        text-align: center;
    }

    .process-step-text-wrapper {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .process-step-icon-wrapper {
        margin-left: 0;
    }
}
/* crm process step end */
 

/* erp solution module-conatiner start */

.erp-module-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1rem;
    text-align: center;
}

.erp-module-heading {
    font-size: 2.5rem;
    font-family: "Poppins", serif;
    margin-bottom: 1rem;
    color: #2C2C2C;
}

.erp-module-heading::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.erp-module-intro {
    /* max-width: 800px; */
    margin: 0 auto 3rem;
    color: #484747;
    line-height: 1.6;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.erp-module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.erp-module-card {
    /* background-color: #1a1a1a; */
    /* background: linear-gradient(135deg, #5ce1e6 0%, #4db8b2 100%); */
    background:linear-gradient(45deg, #52c2c8, #7edee2);
    padding: 1rem;
    border-radius: 10px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.erp-module-card:hover {
    transform: scale(1.05);
}

.erp-module-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    transition: fill 0.3s ease;
}

.erp-module-card:hover .erp-module-icon,
.erp-module-card:hover .erp-module-title {
    /* fill: url(#goldGradient); */
    fill: #37848c;
    color: transparent;
    background: #37848c;
    background-clip: text;
    -webkit-background-clip: text;
}

.erp-module-title {
    font-size: 1.5rem;
    font-family: "Poppins", serif;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
    color: #37848c;
}

.erp-module-description {
    color: #fff;
    line-height: 1.5;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

@media (max-width: 1200px) {
    .erp-module-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .erp-module-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .erp-module-grid {
        grid-template-columns: 1fr;
    }
}

/* SVG Gradient for icons */
.erp-gradient-svg {
    position: absolute;
    width: 0;
    height: 0;
}

/* erp solution module-container end */


/* custom wrapper LMS Solution start */

.section-header_2 {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 20px;
}

.section-header_2 h1 {
    font-size: 2.5em;
    font-weight: bold;
    font-family: "Poppins", serif;
    color: #2C2C2C;
    margin-bottom: 10px;
}

.section-header_2 h1::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    /* background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); */
    background: linear-gradient(90deg, #37848c, #2a646a);
    margin: 1rem auto;
    border-radius: 2px;
}

.section-header_2 p {
    font-size: 1.2em;
    color: #484747;
    line-height: 1.5;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

.custom-wrapper {
    position: relative;
    width: 100%;
    /* max-width: 1200px; */
    padding: 20px;
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.custom-card {
    position: relative;
    width: 325px;
    height: 450px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.custom-poster {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.custom-poster img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.custom-card:hover .custom-poster img {
    transform: scale(1.1);
}

.custom-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1em;
    background: rgba(0, 0, 0, 0.6);
    color: #37848c;
    font-size: 1.5em;
    font-family: "Poppins", serif;
    font-weight: bold;
    text-align: center;
    z-index: 2;
    transition: all 0.3s;
}

.custom-details {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: auto;
    padding: 1.5em;
    background: rgba(0, 0, 0, 0.7);
    
    transition: bottom 0.3s;
    z-index: 3;
}

.custom-card:hover .custom-details {
    bottom: 0;
}

.custom-card:hover .custom-title {
    bottom: -100%;
}

.custom-details h1 {
    font-size: 1.5em;
    font-weight: 700;
    font-family: "Poppins", serif;
    margin: 0;
    color: #37848c;
}

.custom-details p {
    margin-top: 1em;
    font-size: 1em;
    font-family: "Inter Tight", serif;
    opacity: 0.8;
    color: #fff;
    font-weight: bold;
}

/* custom wrapper LMS Solution end */


/* ai powered chatbot industry-tab start */

.use-case-container {
    width: 100%;
    /* max-width: 1000px; */
    /* background-color: var(--card-dark); */
    border-radius: 20px;
    box-shadow: 
        0 15px 35px rgba(0,0,0,0.4),
        0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden;
    position: relative;
    margin-top: 50px;
    margin-bottom: 50px;
}

.industry-tabs {
    display: flex;
    background-color: rgba(30,30,30,0.7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.industry-tab {
    flex: 1;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    opacity: 0.6;
    color:#fff;

}

.industry-tab:hover {
    opacity: 0.8;
}

.industry-tab.active {
    opacity: 1;
    color: #bc8d1b;
    position: relative;
}

.industry-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #f5b10b, #dfb955);
}

.use-case-content {
    display: none;
    padding: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.use-case-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.use-case-description {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 20px;
}

.use-case-description h2{
    font-family: "Poppins", serif;
}

.use-case-description p{
    font-family: "Poppins", serif;
}

.use-case-icon {
    width: 120px;
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    box-shadow: 
        0 10px 25px rgba(0,0,0,0.3),
        0 5px 15px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

.use-case-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at center,
        rgba(92, 225, 230, 0.2),
        transparent 50%
      );
      

    animation: pulse 3s infinite alternate;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.mini-chatbot {
    /* background-color: rgba(92, 225, 230, 0.5); */
    background-color: rgba(55, 132, 140, 0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.mini-chatbot::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at center, 
        rgba(33, 150, 243, 0.1), 
        transparent 50%
    );
}

.mini-chatbot .user-msg, 
.mini-chatbot .bot-msg {
    margin-bottom: 10px;
    position: relative;
}

.mini-chatbot .user-msg {
    text-align: right;
    color: #37848c;
    font-weight: bold;
    font-family: "Poppins", serif;
}

.mini-chatbot .bot-msg {
    color: #2C2C2C;
    font-weight: bold;
    font-family: "Inter Tight", serif;
}

@media (max-width: 768px) {
    .use-case-description {
        flex-direction: column;
        text-align: center;
    }

    .industry-tabs {
        flex-wrap: wrap;
    }

    .industry-tab {
        flex-basis: 50%;
    }
}

/* ai powered chatbot industry-tab end */


/* ai powered chatbot customization contatiner start */

.customization-container {
    width: 100%;
    /* max-width: 1400px; */
    /* Increased width */
    /* background-color: var(--card-dark); */
    background: linear-gradient(145deg, #ffffff, #f8fdfd);
    border-radius: 20px;
    /* box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.3); */
        box-shadow: 0 20px 40px rgba(55, 132, 140, 0.1);
    display: flex;
    overflow: hidden;
    margin-bottom: 50px;
    border: 1px solid rgba(55, 132, 140, 0.08);
}

.customization-options {
    width: 40%;
    /* Adjusted width */
    padding: 30px;
    /* background-color: rgba(92, 225, 230, 0.7); */
    background: linear-gradient(145deg, rgba(92, 225, 230, 0.08), rgba(55, 132, 140, 0.05));
    backdrop-filter: blur(10px);
    /* border-right: 1px solid var(--border-color); */
    border-right: 1px solid rgba(55, 132, 140, 0.1);
    position: relative;
    /* overflow-y: auto; */
    /* Add scrolling */
}



.preview-section_1 {
    width: 60%;
    /* Adjusted width */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
}

.customization-title {
    color: #37848c;
    margin-bottom: 20px;
    font-size: 1.5rem;
    border-bottom: 2px solid #37848c;
    padding-bottom: 10px;
    font-family: "Poppins", serif;
}

.customization-group {
    margin-bottom: 25px;
}

.color-palette,
.avatar-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.color-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.3s ease;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.selected {
    border-color: var(--primary-glow);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.avatar-option {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.3s ease;
}

.avatar-option:hover {
    transform: scale(1.05);
}

.avatar-option.selected {
    border-color: #37848c;
    box-shadow: 0 0 10px rgba(92, 225, 230, 0.5);

}

.input-container {
    margin-bottom: 15px;
}

.input-label {
    display: block;
    margin-bottom: 5px;
    color: #37848c;
    font-family: "Roboto Serif", serif;
}

.welcome-message-input,
.question-input,
.answer-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    font-family: "Roboto Serif", serif;
    border: 1px solid var(--border-color);
    color: #2C2C2C;
    padding: 10px;
    border-radius: 8px;
    margin-top: 5px;
}

.chatbot-preview {
    width: 350px;
    height: 600px;
    background-color: white;
    border-radius: 20px;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 5px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.chatbot-header {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.chatbot-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

.chatbot-welcome {
    flex-grow: 1;
    font-size: 0.9rem;
    color: #e5e1e1;
    font-weight: bold;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #f4f4f4;
}

.message {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    max-width: 80%;
}

/* .user-message {
    background-color: #4CAF50;
    color: white;
    align-self: flex-end;
    margin-left: auto;
} */

.user-message {
    background-color: var(--user-message-bg-color, #4CAF50); /* Default color */
    color: white;
    align-self: flex-end;
    margin-left: auto;
}

.bot-message {
    background-color: #e0e0e0;
    color: black;
    align-self: flex-start;
}

.example-questions {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.example-question-tag {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.example-question-tag:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.save-button {
    background: linear-gradient(135deg, #37848c, #2a6f73);
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    width: 100%;
}

.save-button:hover {
    background-color: var(--secondary-glow);
}

.add-example-button {
    background-color: rgba(255, 255, 255, 0.1);
    color: #2C2C2C;
    border: 1px dashed var(--border-color);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.add-example-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Styling for the new title and paragraph */

 /* Responsive Design */
 @media (max-width: 1200px) {
    .customization-container {
        flex-direction: column;
    }

    .customization-options,
    .preview-section {
        width: 100%;
    }

    .color-palette {
        justify-content: space-evenly;
    }

    .avatar-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .chatbot-preview {
        width: 300px;
        height: 500px;
    }
}

@media (max-width: 768px) {
    .customization-options {
        padding: 15px;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .chatbot-preview {
        width: 100%;
        height: 400px;
    }

    .chatbot-header {
        padding: 10px;
    }

    .chatbot-avatar {
        width: 40px;
        height: 40px;
    }

    .save-button,
    .add-example-button {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .customization-options {
        padding: 10px;
    }

    .chatbot-preview {
        width: 100%;
        height: 350px;
    }

    .avatar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ai powered chatbot customization container end */


/* map css start */

#map {
    width: 100%;  /* Fill the width of the container */
    height: 100%; /* Fill the height of the container */
    border-radius: 10px; /* Optional: Match the card's rounded corners */
}

/* map css end */


.cta-section {
    position: relative;
    padding: 103px 0px 114px 0px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
  }
  
  /* Fix for mobile devices */
  @media (max-width: 768px) {
    .cta-section {
      background-attachment: scroll;
    }
  }


  .responsive-cards-container {
    width: 90%;
    min-height: 100vh;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .responsive-cards-header {
    text-align: center;
  }
  
  .responsive-cards-header h1 {
    font-weight: 300;
    font-size: 2em;
    line-height: 1.3;
    padding: 40px 20px 0 20px;
  }
  
  .responsive-cards-header p a {
    color: #2e2e2e;
    text-decoration: none;
    border-bottom: 1px solid #2e2e2e;
    transition: border .3s;
  }
  
  .responsive-cards-header p a:hover {
    border-bottom: 1px solid rgba(255,255,255,0);
  }
  
  .responsive-cards-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 40px 0;
  }
  
  .responsive-card {
    width: 30.3333333333%;
    margin: 1%;
    padding: 30px;
    border-radius: 8px;
    position: relative;
    transition: .3s all;
    box-shadow: 0 2px 5px 0 rgba(3,6,26,0.15);
  }
  
  .responsive-card:hover {
    transform: scale(1.05);
  }
  
  .responsive-card h3 {
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  
  .responsive-card p {
    margin-bottom: 60px;
  }
  
  .responsive-card .responsive-button {
    position: absolute;
    left: 30px;
    bottom: 30px;
    font-size: 14px;
    color: white;
    background: rgba(0,0,0,.2);
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 10000px;
    transition: .3s all;
  }
  
  .responsive-card .responsive-button:hover {
    background: rgba(255,255,255,.8);
    color: #2e2e2e;
  }
  
  .responsive-pad-top {
    padding-top: 20px;
  }
  
  .responsive-card-blue-light {
    background: #87CEEB; /* Sky Blue */
    color: #2C2C2C; /* Black text */
  }
  
  .responsive-card-yellow {
    background: #2C2C2C; /* Black */
    color: white; /* White text for contrast */
  }
  
  .responsive-card-blue-dark {
    background: #87CEEB; /* Sky Blue */
    color: #2C2C2C; /* Black text */
  }
  
  .responsive-card-red {
    background: #2C2C2C; /* Black */
    color: white; /* White text for contrast */
  }
  
  .responsive-card-purple {
    background: #87CEEB; /* Sky Blue */
    color: #2C2C2C; /* Black text */
  }
  
  .responsive-card-orange {
    background: #2C2C2C; /* Black */
    color: white; /* White text for contrast */
  }
  
  @media screen and (max-width: 1240px) {
    .responsive-card {
      width: 48%;
    }
  }
  
  @media screen and (max-width: 820px) {
    .responsive-cards-container {
      flex-direction: column;
    }
    .responsive-card {
      width: 98%;
      margin-top: 2%;
      margin-bottom: 2%;
    }
    .responsive-cards-header h1 {
      font-size: 1.5em;
    }
    .responsive-cards-header p a {
      font-size: 14px;
    }
  }
  


  .flex-container {
    position: absolute;
    height: 100vh;
    width: 100%;
    display: -webkit-flex;
    /* Safari */
    display: flex;
    overflow: hidden;
  }
  
  @media screen and (max-width: 768px) {
  
  .flex-container { flex-direction: column; }
  }
  
  .flex-title {
    color: #f1f1f1;
    position: relative;
    font-size: 6vw;
    margin: auto;
    text-align: center;
    transform: rotate(90deg);
    top: 15%;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
  }
  
  @media screen and (max-width: 768px) {
  
  .flex-title { transform: rotate(0deg) !important; }
  }
  
  .flex-about {
    opacity: 0;
    color: #f1f1f1;
    position: relative;
    width: 70%;
    font-size: 2vw;
    padding: 5%;
    top: 20%;
    border: 2px solid #f1f1f1;
    border-radius: 10px;
    line-height: 1.3;
    margin: auto;
    text-align: left;
    transform: rotate(0deg);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
  }
  
  @media screen and (max-width: 768px) {
  
  .flex-about {
    padding: 0%;
    border: 0px solid #f1f1f1;
  }
  }
  
  .flex-slide {
    -webkit-flex: 1;
    /* Safari 6.1+ */
    -ms-flex: 1;
    /* IE 10 */
    flex: 1;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
  }
  
  @media screen and (max-width: 768px) {
  
  .flex-slide {
    overflow: auto;
    overflow-x: hidden;
  }
  }
  
  @media screen and (max-width: 768px) {
  
  .flex-slide p { font-size: 2em; }
  }
  
  @media screen and (max-width: 768px) {
  
  .flex-slide ul li { font-size: 2em; }
  }
  
  .flex-slide:hover {
    -webkit-flex-grow: 3;
    flex-grow: 3;
  }
  
  .home {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
  }
  
  @media screen and (min-width: 768px) {
  
  .home {
    -moz-animation: aboutFlexSlide;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: aboutFlexSlide;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: aboutFlexSlide;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
  }
  
  @keyframes 
  aboutFlexSlide {  0% {
   -webkit-flex-grow: 1;
   flex-grow: 1;
  }
   50% {
   -webkit-flex-grow: 3;
   flex-grow: 3;
  }
   100% {
   -webkit-flex-grow: 1;
   flex-grow: 1;
  }
  }
  
  @media screen and (min-width: 768px) {
  
  .flex-title-home {
    transform: rotate(90deg);
    top: 15%;
    -moz-animation: homeFlextitle;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: homeFlextitle;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: homeFlextitle;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
  }
  
  @keyframes 
  homeFlextitle {  0% {
   transform: rotate(90deg);
   top: 15%;
  }
   50% {
   transform: rotate(0deg);
   top: 15%;
  }
   100% {
   transform: rotate(90deg);
   top: 15%;
  }
  }
  
  .flex-about-home { opacity: 0; }
  
  @media screen and (min-width: 768px) {
  
  .flex-about-home {
    -moz-animation: flexAboutHome;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: flexAboutHome;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: flexAboutHome;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
  }
  
  @keyframes 
  flexAboutHome {  0% {
   opacity: 0;
  }
   50% {
   opacity: 1;
  }
   100% {
   opacity: 0;
  }
  }
  
  .about {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/beach-2089959_1280.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
  }


  .options {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* align-items: center; */
    overflow: hidden;
    min-width: 600px;
    max-width: 900px;
    width: calc(100% - 100px);
    height: 400px;
}

@media screen and (max-width: 718px) {
    .options {
        min-width: 520px;
    }

    .options .option:nth-child(5) {
        display: none;
    }
}

@media screen and (max-width: 638px) {
    .options {
        min-width: 440px;
    }

    .options .option:nth-child(4) {
        display: none;
    }
}

@media screen and (max-width: 558px) {
    .options {
        min-width: 360px;
    }

    .options .option:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 478px) {
    .options {
        min-width: 280px;
    }

    .options .option:nth-child(2) {
        display: none;
    }
}

.options .option {
    position: relative;
    overflow: hidden;
    min-width: 60px;
    margin: 10px;
    background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
    background-size: auto 120%;
    background-position: center;
    cursor: pointer;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.options .option:nth-child(1) {
    --defaultBackground: #ED5565;
}

.options .option:nth-child(2) {
    --defaultBackground: #FC6E51;
}

.options .option:nth-child(3) {
    --defaultBackground: #FFCE54;
}

.options .option:nth-child(4) {
    --defaultBackground: #2ECC71;
}

.options .option:nth-child(5) {
    --defaultBackground: #5D9CEC;
}

.options .option:nth-child(6) {
    --defaultBackground: #AC92EC;
}

.options .option.active {
    flex-grow: 10000;
    transform: scale(1);
    max-width: 600px;
    margin: 0px;
    border-radius: 40px;
    background-size: auto 100%;
}

.options .option.active .shadow {
    box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
}

.options .option.active .label {
    bottom: 20px;
    left: 20px;
}

.options .option.active .label .info>div {
    left: 0px;
    opacity: 1;
}

.options .option:not(.active) {
    flex-grow: 1;
    border-radius: 30px;
}

.options .option:not(.active) .shadow {
    bottom: -40px;
    box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}

.options .option:not(.active) .label {
    bottom: 10px;
    left: 10px;
}

.options .option:not(.active) .label .info>div {
    left: 20px;
    opacity: 0;
}

.options .option .shadow {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 120px;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.options .option .label {
    display: flex;
    position: absolute;
    right: 0px;
    height: 40px;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.options .option .label .icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: white;
    color: var(--defaultBackground);
}

.options .option .label .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    color: white;
    white-space: pre;
}

.options .option .label .info>div {
    position: relative;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}

.options .option .label .info .main {
    font-weight: bold;
    font-size: 1.2rem;
}

.options .option .label .info .sub {
    transition-delay: 0.1s;
}


 /* Custom Slider Start */

.slider-container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .slider-wrapper .slider-item {
    position: relative;
    width: 100%;
    height: 75vh;
    display: flex;
    align-items: center;
  }
  .slider-wrapper .slider-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(20%);
    background-image: url("https://media.licdn.com/dms/image/v2/C4E1BAQHB47OXQ5Fi3g/company-background_10000/company-background_10000/0/1584509711592/markdesoft_cover?e=2147483647&v=beta&t=NNDwofQnu34KQYvsloXTdiildSzN7HFgYm2Q2S_O5yg");
    background-size: cover;
    background-position: center;
  }
  .slider-wrapper .slider-item:nth-child(2):before {
    background-image: url("https://codilime.com/img/header-backend-tools.png");
  }
  .slider-wrapper .slider-item:nth-child(3):before {
    background-image: url("https://technotricksystems.com/images/allpage_banner.jpg");
  }
  .slider-wrapper .slider-item:nth-child(4):before {
    filter: grayscale(25%) brightness(80%);
    background-image: url("https://appinventiv.com/wp-content/uploads/2019/09/social-media-banner.png");
  }
  .slider-wrapper .slider-item:nth-child(5):before {
    background-image: url("https://www.deinfinity.com/images/hosting_banner.jpg");
  }
  .slider-wrapper .slider-item .slide-content {
    position: relative;
    z-index: 10;
    color: #fff;
    width: 100%;
    opacity: 0;
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 20px 10px;
  }
  .slider-item.swiper-slide-active .slide-content {
    animation: animate_opacity 0.8s 0.6s linear forwards;
  }
  @keyframes animate_opacity {
    100% {
      opacity: 1;
    }
  }
  .slider-wrapper .slider-item .slide-content > * {
    max-width: 35%;
  }
  .slider-item .slide-content .slide-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 5px;
    opacity: 0;
    text-transform: uppercase;
    transform: translateY(60%);
  }
  .slider-item .slide-content .slide-subtitle {
    font-size: 1rem;
    font-weight: normal;
    opacity: 0;
    transform: translateY(60%);
  }
  .slider-item.swiper-slide-active :where(.slide-title, .slide-subtitle) {
    animation: animate_text 0.6s 0.6s linear forwards;
  }
  @keyframes animate_text {
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .slider-item .slide-content .slide-description {
    margin-top: 25px;
    line-height: 25px;
    opacity: 0;
    transform: translateY(60%);
  }
  .slider-item.swiper-slide-active .slide-description {
    animation: animate_text 0.6s 1s linear forwards;
  }
  .slider-item .slide-content .slide-button {
    display: block;
    margin-top: 45px;
    color: #fff;
    width: 0;
    padding: 13px 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border: 2px solid #fff;
    transition: 0.5s ease;
    opacity: 0;
    white-space: nowrap;
  }
  .slider-item.swiper-slide-active .slide-button {
    animation: animate_button 0.5s 1.3s linear forwards;
  }
  @keyframes animate_button {
    100% {
      width: 250px;
      opacity: 1;
    }
  }
  .slider-item .slide-content .slide-button span {
    opacity: 0;
  }
  .slider-item.swiper-slide-active .slide-button span {
    animation: animate_opacity 0.5s 1.5s linear forwards;
  }
  .slider-item .slide-content .slide-button:hover {
    color: #000;
    background: #fff;
  }
  .slider-container .slider-controls {
    position: absolute;
    bottom: 45px;
    z-index: 30;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .slider-controls .slider-pagination {
    display: flex;
    list-style: none;
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 20px;
    position: relative;
    justify-content: space-between;
  }
  .slider-pagination .slider-indicator {
    position: absolute;
    bottom: 0;
    border-bottom: 2px solid #fff;
    transition: 0.4s ease-in-out;
  }
  .slider-pagination .slider-tab {
    color: #DBDADA;
    padding: 20px 30px;
    cursor: pointer;
    text-align: center;
    font-size: 0.85rem;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  .slider-controls .slider-tab.current {
    color: #fff;
  }
  .slider-navigations button {
    position: absolute;
    top: 50%;
    color: #fff;
    z-index: 20;
    border: none;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #202022;
    transform: translateY(-50%);
    transition: 0.4s ease;
  }
  .slider-navigations button:hover {
    background: #323235;
  }
  .slider-navigations button.swiper-button-disabled {
    display: none;
  }
  .slider-navigations button#slide-prev {
    left: 20px;
  }
  .slider-navigations button#slide-next {
    right: 20px;
  }
  @media (max-width: 1536px) {
    .slider-wrapper .slider-item .slide-content,
    .slider-controls .slider-pagination {
      width: 85%;
    }
  }
  @media (max-width: 1024px) {
    .slider-wrapper .slider-item .slide-content,
    .slider-controls .slider-pagination {
      width: 100%;
    }
    .slider-wrapper .slider-item .slide-content > * {
      max-width: 66%;
    }
    .slider-container .slider-controls {
      bottom: 50px;
    }
    @keyframes animate_button {
      100% {
        width: 100%;
        opacity: 1;
      }
    }
    .slider-navigations button {
      top: unset;
      bottom: -15px;
      background: none;
    }
    .slider-navigations button:hover {
      background: none;
    }
  }
  @media (max-width: 768px) {
    .slider-wrapper .slider-item .slide-content > * {
      max-width: 100%;
    }
  }

   /* Custom Slider End */
   

   .hero-banner {
    /* position: relative; */
    width: 100%;
    height: 400px; /* Not too large height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: 0;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://img.freepik.com/premium-vector/modern-blue-hexagon-banner-background-suit-medical-futuristic-technology-digital-banner_181182-20279.jpg') center/cover no-repeat;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Black transparent overlay */
    z-index: -1;
}

.hero-content {
    padding: 0 20px;
    max-width: 800px;
    z-index: 1;
}

.hero-main-heading {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-tagline {
    font-size: 1.1rem;
    color: #e0e0e0;
    margin-bottom: 25px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-cta-button {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: transform 0.3s, box-shadow 0.3s;
}

.hero-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Responsive design */
@media screen and (max-width: 768px) {
    .hero-banner {
        height: 350px;
    }
    
    .hero-main-heading {
        font-size: 2.2rem;
    }
    
    .hero-tagline {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 480px) {
    .hero-banner {
        height: 400px;
        padding: 20px 10px;
    }
    
    .hero-main-heading {
        font-size: 1.8rem;
    }
    
    .hero-tagline {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .hero-cta-button {
        padding: 10px 25px;
    }
}
#no-line{
    text-decoration: none;
}