@media (min-width: 1025px) and (max-width: 1500px) {
.body{
    height: 100%;
    width: 75%;
    position: relative;
    left: 24%;
    top: 85px;
  
}



/* ++++++++++++++++++++++++++++++++++++++++++ Banner  +++++++++++++++++++++++++++++++++++++++++++ */
 

.mbanner{
    width: 77%;
    height: 20rem;
    position: relative;
    left: 22.8%;
    top: 52px;
    background-image: linear-gradient(to bottom right, #ec6bb0, #3b82f6);
    padding-bottom: 1rem;
   }

.banner-container {
            position: relative;
             top: 10px;
            overflow: hidden;
            height: 18rem; 
            width: 100%;
            
        }

   .banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%); /* start off-screen right */
  opacity: 0;
  transition: transform 0.7s ease-in-out, opacity 0.5s ease-in-out;
  border-radius: 12px;
}

.banner-slide.active {
  transform: translateX(0);
  opacity: 1;
  z-index: 10;
}

.banner-slide.outgoing-left {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 5;
}

.banner-slide.outgoing-right {
  transform: translateX(100%);
  opacity: 0;
  z-index: 5;
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Define a subtle hover animation for the CTA button */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        /* ========================================
        CSS STYLES WITH GRADIENTS AND ANIMATION
        ========================================
        */
        
        /* --- Base Styling --- */
        #fitness-software-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
            color: #333;
        }
        
        /* --- Hero Section (The Gradient) --- */
        .hero-section {
            text-align: center;
            padding: 40px 0 60px 0;
            /* Dynamic Gradient Background */
           
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .hero-section h1 {
            font-size: 2.8em;
           
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .hero-section h2 {
            font-size: 1.5rem;
            color: #0056b3; /* Primary accent color */
            font-weight: 400;
            margin-bottom: 30px;
        }
        
        /* --- Core Solutions Section --- */
        .solutions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            padding-top: 20px;
        }

        .solution-card {
            background: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            /* Adding a subtle gradient border top for design */
            border-top: 5px solid; 
            border-image: linear-gradient(to right, rgb(236, 107, 176), rgb(55, 55, 165)) 1; 
            height: 100%;
        }
        
        /* Hover Animation: Lift and Shadow */
        .solution-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }

        .solution-card h3 {
            font-size: 1.4em;
            color: #0056b3;
            margin-top: 0;
            margin-bottom: 15px;
        }

        .solution-card ul {
            list-style: none;
            padding-left: 0;
        }

        .solution-card ul li {
            margin-bottom: 10px;
            position: relative;
            padding-left: 25px;
            font-size: 0.95em;
        }

        .solution-card ul li::before {
            content: '→';
            color: #28a745; 
            position: absolute;
            left: 0;
            font-weight: bold;
        }

        /* --- Advantage Table Section --- */
        .advantage-section {
            padding: 60px 0;
            text-align: center;
        }

        .advantage-section h2 {
            margin-bottom: 40px;
            font-size: 1.5rem;
            color: #0056b3;
        }

        .advantage-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 10px;
            text-align: left;
        }

        .advantage-table th, .advantage-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        
        .advantage-table th {
            background-color: #e9ecef;
            color: #0056b3;
            width: 30%;
        }

        .advantage-table tr:nth-child(even) td {
            background-color: #fcfcfc;
        }

        /* --- CTA Section (Background Gradient) --- */
        .cta-section {
            text-align: center;
            /* CTA Background Gradient */
            background: linear-gradient(90deg, #0056b3, #00c6ff);
            padding: 70px 20px;
            border-radius: 8px;
            margin-top: 40px;
            color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .cta-section h2 {
            color: white;
            font-size: 2.2em;
            margin-bottom: 20px;
        }

        .cta-button {
            display: inline-block;
            background-color: #ffc107; /* High-contrast yellow */
            color: #333;
            padding: 15px 35px;
            margin-top: 15px;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            letter-spacing: 1px;
            transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
        }

        .cta-button:hover {
            background-color: #e0a800;
            transform: translateY(-2px);
            /* Add animation on hover */
            animation: pulse 0.8s infinite alternate; 
}

.solutions-grid {
grid-template-columns: 1fr;
}
.advantage-table th, .advantage-table td {
 display: block;
 width: 100%;
 text-align: left;
}
.advantage-table thead {
 display: none;
}


        .ecomd{
            height: 20rem;
            width: 100%;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            
        }
        
/* Outer wrapper */
.ecomd {
  height: 27rem;
  max-width: 800px;
  overflow: hidden;
  border: 2px solid #ccc;
  border-radius: 12px;
  background: white;

  left: 6%;
}

/* Track that moves */
.scroll-track {
  display: flex;
  width: max-content;
  animation: scrollLeft 12s linear infinite;
}

/* Each element */
.sequential-item {
  min-width: 200px;
  height: 150px;
  margin: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: bold;
  color: white;
}

/* Example colors */
.imge1 { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsm176OWNe0kU1TZXQvZ8e4KfaK260kOaUYI8Xj5Yf5ZzWB_8wu0LfyqLl4xnHSfemEbE2xHxHxfygBQE_DWDznMQG9xoCRT2vbqU3q7LEdL3nHkaC0-1_dt13TMIcyuq8aIqcbDDMob33RMB1w74r9V6T6bEPztsAuha2lkMaOOHnB_-cUqRdmDWcGlN/s1280/layout1.jpeg); 
background-size: cover; 
height: 22rem; 
width: 22rem;}

.imge2 { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyKLGPmVZCezwFd19deyxAk8bRtLybnu8aUfvXkZ9ndjuXDNmbWuWHJJWfHcxF2LVk-I46IgAGGW0K5M0MEjUeHtvDlb5dgOgfo5yVaJ7npD0O2zTolGCwdBo1Jz7hG-kbnVpjTZF_L-LBRgrouxuejw-Snpak7vzxbZegGqnfcAkC4jZ8AXaN9EUShpN/s1600/layout2.jpeg); 
background-size: cover; 
height: 22rem; 
width: 22rem;}

.imge3 { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9MTFnwQO8lIpYh1LlvwS0c-bpnPgAjPTImTh9FQ2DhW0RoENJP-GObdYMEBnPdVioS_cifR0pYevrQqkBNdGNr8mhwUHKZT5a2fjDx3i2234qjeNnTdvG66ZG7I72QpsYuMnmN9BpwyG_5bd5gLAEl8qvYiDg-XyQLKTB-0obuVAXAKfHdP1moUXZzb_/s1280/layout3.jpeg); 
background-size: cover; 
height: 22rem; 
width: 22rem; }

.imge4 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzRFn_aeqwI1ShgUIyyI9CI6UXoRwoGJjmXhvJsHMDOG965opb6i-IX4MtD9hWkHDa_9UqOUIhYS69myee808vBKxXsNI7cQpI9zVeFJXWIB__gBRHJ2CXqvyv0ulsUIOlP6cM_I07m_fgOPNoAJ_wyhyZn63oc5xphNVc9psLHa1gZJiEM1rWIXiOn9xg/s1280/layout4.jpeg); 
background-size: cover; 
height: 22rem; 
width: 22rem;}




/* Outer wrapper */
.ecomd {
 
  overflow: hidden;
  border-radius: 15px;
  position: relative;
  background: rgba(255,255,255,0.05);
  box-shadow: 0px 0px 20px rgba(0,0,0,0.6);

  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f2027; /* gradient bg */
  background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
  font-family: Arial, sans-serif;
}

/* Track that moves */
.scroll-track {
  display: flex;
  width: max-content;
  animation: scrollLeft 12s linear infinite;
}



.sequential-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255,255,255,0.6);
}


/* Keyframes for scrolling right to left */
@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ecomdm{
    display: none;
}
.scroll-trackm{
    display: none;
}

.ecomdm{
    display: none;
}
.scroll-trackm{
    display: none;
}

    
}


/* ============================================================================================================================================ */



    
@media (min-width: 766px) and (max-width: 1024px){

    .body{
    height: 100%;
    width: 90%;
    position: relative;
    left: 5%;
    top: 55px;

    }

    /* +++++++++++++++++++++++++++++++++++++++++ Banner ++++++++++++++++++++++++++++++++++++++++++++ */


.mbanner{
    width: 100%;
    height: 18rem;
    position: relative;
    top: 52px;
    background-image: linear-gradient(to bottom right, #ec6bb0, #3b82f6);
    padding-bottom: 1rem;
   }

.banner-container {
            position: relative;
             top: 10px;
            overflow: hidden;
            height: 16rem; 
            width: 100%;
            
        }

   .banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%); /* start off-screen right */
  opacity: 0;
  transition: transform 0.7s ease-in-out, opacity 0.5s ease-in-out;
  border-radius: 12px;
}

.banner-slide.active {
  transform: translateX(0);
  opacity: 1;
  z-index: 10;
}

.banner-slide.outgoing-left {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 5;
}

.banner-slide.outgoing-right {
  transform: translateX(100%);
  opacity: 0;
  z-index: 5;
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

    /* Define a background animation for the Hero section */
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Define a subtle hover animation for the CTA button */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        /* ========================================
        CSS STYLES WITH GRADIENTS AND ANIMATION
        ========================================
        */
        
        /* --- Base Styling --- */
        #fitness-software-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
            color: #333;
        }
        
        /* --- Hero Section (The Gradient) --- */
        .hero-section {
            text-align: center;
            padding: 40px 0 60px 0;
            /* Dynamic Gradient Background */
           
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .hero-section h1 {
            font-size: 2.8em;
           
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .hero-section h2 {
            font-size: 1.5rem;
            color: #0056b3; /* Primary accent color */
            font-weight: 400;
            margin-bottom: 30px;
        }
        
        /* --- Core Solutions Section --- */
        .solutions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            padding-top: 20px;
        }

        .solution-card {
            background: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            /* Adding a subtle gradient border top for design */
            border-top: 5px solid; 
            border-image: linear-gradient(to right, rgb(236, 107, 176), rgb(55, 55, 165)) 1; 
            height: 100%;
        }
        
        /* Hover Animation: Lift and Shadow */
        .solution-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }

        .solution-card h3 {
            font-size: 1.4em;
            color: #0056b3;
            margin-top: 0;
            margin-bottom: 15px;
        }

        .solution-card ul {
            list-style: none;
            padding-left: 0;
        }

        .solution-card ul li {
            margin-bottom: 10px;
            position: relative;
            padding-left: 25px;
            font-size: 0.95em;
        }

        .solution-card ul li::before {
            content: '→';
            color: #28a745; 
            position: absolute;
            left: 0;
            font-weight: bold;
        }

        /* --- Advantage Table Section --- */
        .advantage-section {
            padding: 60px 0;
            text-align: center;
        }

        .advantage-section h2 {
            margin-bottom: 40px;
            font-size: 1.5rem;
            color: #0056b3;
        }

        .advantage-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 10px;
            text-align: left;
        }

        .advantage-table th, .advantage-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        
        .advantage-table th {
            background-color: #e9ecef;
            color: #0056b3;
            width: 30%;
        }

        .advantage-table tr:nth-child(even) td {
            background-color: #fcfcfc;
        }

        /* --- CTA Section (Background Gradient) --- */
        .cta-section {
            text-align: center;
            /* CTA Background Gradient */
            background: linear-gradient(90deg, #0056b3, #00c6ff);
            padding: 70px 20px;
            border-radius: 8px;
            margin-top: 40px;
            color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .cta-section h2 {
            color: white;
            font-size: 2.2em;
            margin-bottom: 20px;
        }

        .cta-button {
            display: inline-block;
            background-color: #ffc107; /* High-contrast yellow */
            color: #333;
            padding: 15px 35px;
            margin-top: 15px;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            letter-spacing: 1px;
            transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
        }

        .cta-button:hover {
            background-color: #e0a800;
            transform: translateY(-2px);
            /* Add animation on hover */
            animation: pulse 0.8s infinite alternate; 
}

.solutions-grid {
grid-template-columns: 1fr;
}
.advantage-table th, .advantage-table td {
 display: block;
 width: 100%;
 text-align: left;
}
.advantage-table thead {
 display: none;
}


        .ecomd{
            height: 20rem;
            width: 100%;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            
        }
        
/* Outer wrapper */
.ecomd {
  height: 27rem;
  max-width: 800px;
  overflow: hidden;
  border: 2px solid #ccc;
  border-radius: 12px;
  background: white;
}

/* Track that moves */
.scroll-track {
  display: flex;
  width: max-content;
  animation: scrollLeft 12s linear infinite;
}

/* Each element */
.sequential-item {
  min-width: 200px;
  height: 150px;
  margin: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: bold;
  color: white;
}

/* Example colors */
.imge1 { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsm176OWNe0kU1TZXQvZ8e4KfaK260kOaUYI8Xj5Yf5ZzWB_8wu0LfyqLl4xnHSfemEbE2xHxHxfygBQE_DWDznMQG9xoCRT2vbqU3q7LEdL3nHkaC0-1_dt13TMIcyuq8aIqcbDDMob33RMB1w74r9V6T6bEPztsAuha2lkMaOOHnB_-cUqRdmDWcGlN/s1280/layout1.jpeg); 
background-size: cover; 
height: 22rem; 
width: 22rem;}

.imge2 { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyKLGPmVZCezwFd19deyxAk8bRtLybnu8aUfvXkZ9ndjuXDNmbWuWHJJWfHcxF2LVk-I46IgAGGW0K5M0MEjUeHtvDlb5dgOgfo5yVaJ7npD0O2zTolGCwdBo1Jz7hG-kbnVpjTZF_L-LBRgrouxuejw-Snpak7vzxbZegGqnfcAkC4jZ8AXaN9EUShpN/s1600/layout2.jpeg); 
background-size: cover; 
height: 22rem; 
width: 22rem;}

.imge3 { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9MTFnwQO8lIpYh1LlvwS0c-bpnPgAjPTImTh9FQ2DhW0RoENJP-GObdYMEBnPdVioS_cifR0pYevrQqkBNdGNr8mhwUHKZT5a2fjDx3i2234qjeNnTdvG66ZG7I72QpsYuMnmN9BpwyG_5bd5gLAEl8qvYiDg-XyQLKTB-0obuVAXAKfHdP1moUXZzb_/s1280/layout3.jpeg); 
background-size: cover; 
height: 22rem; 
width: 22rem; }

.imge4 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzRFn_aeqwI1ShgUIyyI9CI6UXoRwoGJjmXhvJsHMDOG965opb6i-IX4MtD9hWkHDa_9UqOUIhYS69myee808vBKxXsNI7cQpI9zVeFJXWIB__gBRHJ2CXqvyv0ulsUIOlP6cM_I07m_fgOPNoAJ_wyhyZn63oc5xphNVc9psLHa1gZJiEM1rWIXiOn9xg/s1280/layout4.jpeg); 
background-size: cover; 
height: 22rem; 
width: 22rem;}




/* Outer wrapper */
.ecomd {
 
  overflow: hidden;
  border-radius: 15px;
  position: relative;
  background: rgba(255,255,255,0.05);
  box-shadow: 0px 0px 20px rgba(0,0,0,0.6);

  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f2027; /* gradient bg */
  background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
  font-family: Arial, sans-serif;
}

/* Track that moves */
.scroll-track {
  display: flex;
  width: max-content;
  animation: scrollLeft 12s linear infinite;
}



.sequential-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255,255,255,0.6);
}


/* Keyframes for scrolling right to left */
@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ecomdm{
    display: none;
}
.scroll-trackm{
    display: none;
}

.ecomdm{
    display: none;
}
.scroll-trackm{
    display: none;
}

}




/* ============================================================================================================================================ */









@media (min-width: 320px) and (max-width: 765px) {
    .body{
    height: 100%;
    width: 90%;
    position: relative;
    left: 5%;
    top: 55px;
  
}



/* ++++++++++++++++++++++++++++++++++++++++ Banner +++++++++++++++++++++++++++++++++++++++++++++ */
.mbanner{
    width: 100%;
    height: 8rem;
    position: relative;
    top: 52px;
    background-image: linear-gradient(to bottom right, #ec6bb0, #3b82f6);
    padding-bottom: 1rem;
   }

.banner-container {
            position: relative;
             top: 10px;
            overflow: hidden;
            height: 6rem; 
            width: 100%;
            
        }

   .banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%); /* start off-screen right */
  opacity: 0;
  transition: transform 0.7s ease-in-out, opacity 0.5s ease-in-out;
}

.banner-slide.active {
  transform: translateX(0);
  opacity: 1;
  z-index: 10;
}

.banner-slide.outgoing-left {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 5;
}

.banner-slide.outgoing-right {
  transform: translateX(100%);
  opacity: 0;
  z-index: 5;
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



   /* Define a background animation for the Hero section */
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Define a subtle hover animation for the CTA button */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        /* ========================================
        CSS STYLES WITH GRADIENTS AND ANIMATION
        ========================================
        */
        
        /* --- Base Styling --- */
        #fitness-software-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
            color: #333;
        }
        
        /* --- Hero Section (The Gradient) --- */
        .hero-section {
            text-align: center;
            padding: 40px 0 60px 0;
            /* Dynamic Gradient Background */
           
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .hero-section h1 {
            font-size: 2rem;
           
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .hero-section h2 {
            font-size: 1.5rem;
            color: #0056b3; /* Primary accent color */
            font-weight: 400;
            margin-bottom: 30px;
        }
        
        /* --- Core Solutions Section --- */
        .solutions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            padding-top: 20px;
        }

        .solution-card {
            background: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            /* Adding a subtle gradient border top for design */
            border-top: 5px solid; 
            border-image: linear-gradient(to right, rgb(236, 107, 176), rgb(55, 55, 165)) 1; 
            height: 100%;
        }
        
        /* Hover Animation: Lift and Shadow */
        .solution-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }

        .solution-card h3 {
            font-size: 1rem;
            color: #0056b3;
            margin-top: 0;
            margin-bottom: 15px;
        }

        .solution-card ul {
            list-style: none;
            padding-left: 0;
        }

        .solution-card ul li {
            margin-bottom: 10px;
            position: relative;
            padding-left: 25px;
            font-size: 0.95em;
        }

        .solution-card ul li::before {
            content: '→';
            color: #28a745; 
            position: absolute;
            left: 0;
            font-weight: bold;
        }

        /* --- Advantage Table Section --- */
        .advantage-section {
            padding: 60px 0;
            text-align: center;
        }

        .advantage-section h2 {
            margin-bottom: 40px;
            font-size: 1.5rem;
            color: #0056b3;
        }

        .advantage-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 10px;
            text-align: left;
        }

        .advantage-table th, .advantage-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        
        .advantage-table th {
            background-color: #e9ecef;
            color: #0056b3;
            width: 30%;
        }

        .advantage-table tr:nth-child(even) td {
            background-color: #fcfcfc;
        }

        /* --- CTA Section (Background Gradient) --- */
        .cta-section {
            text-align: center;
            /* CTA Background Gradient */
            background: linear-gradient(90deg, #0056b3, #00c6ff);
            padding: 70px 20px;
            border-radius: 8px;
            margin-top: 40px;
            color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .cta-section h2 {
            color: white;
            font-size: 2.2em;
            margin-bottom: 20px;
        }

        .cta-button {
            display: inline-block;
            background-color: #ffc107; /* High-contrast yellow */
            color: #333;
            padding: 15px 35px;
            margin-top: 15px;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            letter-spacing: 1px;
            transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
        }

        .cta-button:hover {
            background-color: #e0a800;
            transform: translateY(-2px);
            /* Add animation on hover */
            animation: pulse 0.8s infinite alternate;
        }


            .solutions-grid {
                grid-template-columns: 1fr;
            }
            .advantage-table th, .advantage-table td {
                display: block;
                width: 100%;
                text-align: left;
            }
            .advantage-table thead {
                display: none;
            }

            
.ecomd{
    display: none;
}
.scroll-track{
    display: none;
}

/* Wrapper */
.ecomdm {
  width: 300px;   /* adjust size */
  height: 300px;
  margin: auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
}

/* Items (all hidden initially) */
.sequential-itemm {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  border-radius: 12px;
}

/* Show active one */
.sequential-itemm.active {
  opacity: 1;
  z-index: 1;
}

/* Example colors */


.scroll-trackm {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* Individual image item (Sequential Item) */
        .sequential-itemm {
            position: absolute; /* Stack all items on top of each other */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* Hidden by default */
            transition: opacity 0.6s ease-in-out; /* Smooth transition for fade effect */
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Active item (Only one shown at a time) */
        .sequential-itemm.active {
            opacity: 1;
        }
        
        /* Ensure images fit nicely */
        .sequential-itemm img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Use cover for clean fills, or 'contain' if aspect ratio is important */
            border-radius: 12px;
        }

        /* Navigation Button Styling */
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px 15px;
            border-radius: 50%;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .nav-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

            
        }