/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }
   
   /* Define tran3s for transitions */
   .tran3s {
    transition: all 0.3s ease;
   }
   
   /* Animation Classes */
   .svc-animate[data-svc-animate=" fade-up"] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   .svc-animate[data-svc-animate="fade-up"].svc-animate {
    opacity: 1;
    transform: translateY(0);
   }
   
   .svc-animate[data-svc-animate="zoom-in"] {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   .svc-animate[data-svc-animate="zoom-in"].svc-animate {
    opacity: 1;
    transform: scale(1);
   }
   
   .svc-animate[data-svc-animate="slide-up"] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   .svc-animate[data-svc-animate="slide-up"].svc-animate {
    opacity: 1;
    transform: translateY(0);
   }
   
   .svc-animate[data-svc-animate="slide-in"] {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   .svc-animate[data-svc-animate="slide-in"].svc-animate {
    opacity: 1;
    transform: translateX(0);
   }
   
   .svc-animate[data-svc-animate="slide-right"] {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   .svc-animate[data-svc-animate="slide-right"].svc-animate {
    opacity: 1;
    transform: translateX(0);
   }
   
   .svc-animate[data-svc-animate="fade-in"] {
    opacity: 0;
    transition: opacity 0.5s ease;
   }
   
   .svc-animate[data-svc-animate="fade-in"].svc-animate {
    opacity: 1;
   }
   
   /* Custom Grid Classes */
   .svc-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
   }
   
   .svc-m-auto {
    margin-left: auto;
    margin-right: auto;
   }
   
   /* General Styles for Services Section */
   .svc-section {
    font-family: Arial, sans-serif;
    padding: 50px 0;
    position: relative;
    background: #f8f9fa;
   }
   
   .svc-title {
    position: relative;
   }
   
   .svc-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
   }
   
   .svc-main-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.3;
   }
   
   .svc-main-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
   }
   
   /* Common Card Styles */
   .svc-card, .svc-tile, .svc-circle-card, .svc-stacked-card, .svc-minimal-card, .svc-horizontal-card, .svc-gradient-card, .svc-flip-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    width: 100%;
    position: relative;
   }
   
   .svc-icon, .svc-tile-icon, .svc-circle-icon, .svc-stacked-icon, .svc-minimal-icon, .svc-horizontal-icon, .svc-gradient-icon, .svc-flip-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
   }
   
   .svc-icon img, .svc-tile-icon img, .svc-circle-icon img, .svc-stacked-icon img, .svc-minimal-icon img, .svc-horizontal-icon img, .svc-gradient-icon img, .svc-flip-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
   }
   
   .svc-card h6, .svc-tile h6, .svc-circle-card h6, .svc-stacked-card h6, .svc-minimal-card h6, .svc-horizontal-card h6, .svc-gradient-card h6, .svc-flip-card h6 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
   }
   
   .svc-card h6 a, .svc-tile h6 a, .svc-circle-card h6 a, .svc-stacked-card h6 a, .svc-minimal-card h6 a, .svc-horizontal-card h6 a, .svc-gradient-card h6 a, .svc-flip-card h6 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
   }
   
   .svc-card p, .svc-tile p, .svc-circle-card p, .svc-stacked-card p, .svc-minimal-card p, .svc-horizontal-card p, .svc-gradient-card p, .svc-flip-card p {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 15px;
   }
   
   .svc-read-btn {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
   }
   
   .svc-read-btn i {
    margin-left: 5px;
    transition: transform 0.3s ease;
   }
   
   .svc-read-btn:hover i {
    transform: translateX(5px);
   }
   
   /* Shapes */
   .svc-section .shapes {
    position: absolute;
    width: 100px;
    height: auto;
    opacity: 0.5;
    transition: all 0.5s ease;
   }
   
   .svc-layout-1 .shape-one {
    top: 20px;
    left: 20px;
    animation: rotateShape 10s linear infinite;
   }
   
   .svc-layout-2 .shape-two {
    bottom: 20px;
    right: 20px;
    animation: fadeShape 5s ease-in-out infinite;
   }
   
   .svc-layout-3 .shape-three {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: scaleShape 6s ease-in-out infinite;
   }
   
   .svc-layout-4 .shape-four {
    top: 0;
    left: 0;
    animation: slideShape 8s ease-in-out infinite;
   }
   
   .svc-layout-5 .shape-five {
    top: 20px;
    right: 20px;
    animation: rotateShape 12s linear infinite;
   }
   
   .svc-layout-6 .shape-six {
    bottom: 20px;
    left: 20px;
    animation: pulseShape 4s ease-in-out infinite;
   }
   
   .svc-layout-7 .shape-seven {
    top: 0;
    right: 0;
    animation: fadeShape 7s ease-in-out infinite;
   }
   
   .svc-layout-8 .shape-eight {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotateShape 10s linear infinite;
   }
   
   @keyframes rotateShape {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
   }
   
   @keyframes fadeShape {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.2; }
   }
   
   @keyframes scaleShape {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
   }
   
   @keyframes slideShape {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(50px); }
   }
   
   @keyframes pulseShape {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
   }
   
   /* Layout 1: Original Grid Cards with Icon Pulse */
   .svc-layout-1 {
    padding-left: 25px;
    padding-right: 25px;
   }
   
   .svc-layout-1 .svc-subtitle-1 {
    color: var(--prime-three);
    letter-spacing: 1px;
   }
   
   .svc-layout-1 .svc-main-title-1::after {
    background: var(--prime-three);
   }
   
   .svc-layout-1 .svc-card {
    border: 1px solid #e0e0e0;
   }
   
   .svc-layout-1 .svc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
   }
   
   .svc-layout-1 .svc-icon:hover {
    animation: pulseIcon 1s ease-in-out infinite;
   }
   
   .svc-layout-1 .svc-read-btn {
    color: var(--prime-three);
   }
   
   .svc-layout-1 .svc-read-btn:hover,
   .svc-layout-1 h6 a:hover {
    color: var(--prime-two);
   }
   
   @keyframes pulseIcon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
   }
   
   /* Layout 2: Horizontal Tiles with Zoom-In */
   .svc-layout-2 {
    padding-left: 25px;
    padding-right: 25px;
   }
   
   .svc-layout-2 .svc-subtitle-2 {
    color: var(--prime-one);
    font-style: italic;
   }
   
   .svc-layout-2 .svc-main-title-2::after {
    background: var(--prime-one);
   }
   
   .svc-layout-2 .svc-tile {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
   }
   
   .svc-layout-2 .svc-tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background: color-mix(in srgb, var(--prime-three) 20%, transparent);
    transform: scaleX(0);
    z-index: -1; /* Places the pseudo-element behind its parent */
    transform-origin: left;
    transition: transform 0.3s ease;
   }
   
   .svc-layout-2 .svc-tile:hover::after {
    transform: scaleX(1);
   }
   
   .svc-layout-2 .svc-tile:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   }
   
   .svc-layout-2 .svc-read-btn {
    color: var(--prime-one);
   }
   
   .svc-layout-2 .svc-read-btn:hover,
   .svc-layout-2 h6 a:hover {
    color: var(--prime-three);
   }
   
   /* Layout 3: Circular Icons with Slide-Up and Tilt */
   .svc-layout-3 {
    padding-left: 25px;
    padding-right: 25px;
   }
   
   .svc-layout-3 .svc-subtitle-3 {
    color: var(--prime-three);
    font-weight: 600;
   }
   
   .svc-layout-3 .svc-main-title-3::after {
    background: var(--prime-three);
    border-radius: 2px;
   }
   
   .svc-layout-3 .svc-circle-card {
    text-align: center;
    background: #fff;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
   }
   
   .svc-layout-3 .svc-circle-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #f0f8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
   }
   
   .svc-layout-3 .svc-circle-card:hover .svc-circle-icon {
    transform: rotate(360deg);
   }
   
   .svc-layout-3 .svc-read-btn {
    color: var(--prime-three);
   }
   
   .svc-layout-3 .svc-read-btn:hover,
   .svc-layout-3 h6 a:hover {
    color: var(--prime-two);
   }
   
   /* Layout 4: Stacked Cards with Slide-In */
   .svc-layout-4 {
    padding-left: 25px;
    padding-right: 25px;
   }
   
   .svc-layout-4 .svc-subtitle-4 {
    color: var(--prime-three);
    text-transform: none;
   }
   
   .svc-layout-4 .svc-main-title-4::after {
    background: var(--prime-three);
    width: 60px;
   }
   
   .svc-layout-4 .svc-stacked-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
   }
   
   .svc-layout-4 .svc-stacked-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 2px solid transparent;
   }
   
   .svc-layout-4 .svc-stacked-card:hover {
    border-color: var(--prime-three);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
   }
   
   .svc-layout-4 .svc-stacked-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
   }
   
   .svc-layout-4 .svc-stacked-content {
    flex: 1;
    transition: transform 0.3s ease;
   }
   
   .svc-layout-4 .svc-stacked-card:hover .svc-stacked-content {
    transform: translateX(10px);
   }
   
   .svc-layout-4 .svc-read-btn {
    color: var(--prime-three);
   }
   
   .svc-layout-4 .svc-read-btn:hover,
   .svc-layout-4 h6 a:hover {
    color: var(--prime-two);
   }
   
   /* Layout 5: Minimal Cards with Fade-In and Bounce */
   .svc-layout-5 {
    padding-left: 25px;
    padding-right: 25px;
   }
   
   .svc-layout-5 .svc-subtitle-5 {
    color: var(--prime-three);
    font-weight: 700;
   }
   
   .svc-layout-5 .svc-main-title-5::after {
    background: var(--prime-three);
   }
   
   .svc-layout-5 .svc-minimal-card {
    border: 2px solid transparent;
    text-align: center;
   }
   
   .svc-layout-5 .svc-minimal-card:hover {
    border-color: var(--prime-three);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   }
   
   .svc-layout-5 .svc-minimal-icon:hover {
    animation: bounceIcon 0.5s ease-in-out;
   }
   
   .svc-layout-5 .svc-read-btn {
    color: var(--prime-three);
   }
   
   .svc-layout-5 .svc-read-btn:hover,
   .svc-layout-5 h6 a:hover {
    color: var(--prime-two);
   }
   
   @keyframes bounceIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
   }
   
   /* Layout 6: Horizontal Cards with Slide-Right */
   .svc-layout-6 {
    padding-left: 25px;
    padding-right: 25px;
   }
   
   .svc-layout-6 .svc-subtitle-6 {
    color: var(--prime-three); 
    letter-spacing: 2px;
   }
   
   .svc-layout-6 .svc-main-title-6::after {
    background: linear-gradient(90deg, var(--prime-three), var(--prime-four));
   }
   
   .svc-layout-6 .svc-horizontal-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 0px solid transparent;
    border-image: linear-gradient(90deg, var(--prime-three), var(--prime-four)) 1;
   }
   
   .svc-layout-6 .svc-horizontal-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
   }
   
   .svc-layout-6 .svc-horizontal-card:hover .svc-horizontal-icon {
    transform: translateX(10px);
   }
   
   .svc-layout-6 .svc-horizontal-content {
    flex: 1;
   }
   
   .svc-layout-6 .svc-horizontal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
   }
   
   .svc-layout-6 .svc-read-btn {
    color: var(--prime-three);
   }
   
   .svc-layout-6 .svc-read-btn:hover,
   .svc-layout-6 h6 a:hover {
    color: var(--prime-two);
   }
   
   /* Layout 7: Gradient Cards with Zoom-In and Tilt */
   .svc-layout-7 {
    padding-left: 25px;
    padding-right: 25px;
   }
   
   .svc-layout-7 .svc-subtitle-7 {
    color: var(--prime-three);
    font-weight: 600;
   }
   
   .svc-layout-7 .svc-main-title-7::after {
    background: linear-gradient(90deg, var(--prime-three), var(--prime-five));
   }
   
   .svc-layout-7 .svc-gradient-card {
    text-align: center;
    background: linear-gradient(135deg, #f9f9f9, #fff);
    position: relative;
    overflow: hidden;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
   }
   
   .svc-layout-7 .svc-gradient-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(182, 182, 182, 0.2), rgba(196, 196, 196, 0.2));
    opacity: 0;
    transition: opacity 0.3s ease;
   }
   
   .svc-layout-7 .svc-gradient-card:hover::before {
    opacity: 1;
   }
   
   .svc-layout-7 .svc-gradient-icon {
    transition: transform 0.3s ease;
   }
   
   .svc-layout-7 .svc-gradient-card:hover .svc-gradient-icon {
    transform: scale(1.1);
   }
   
   .svc-layout-7 .svc-read-btn {
    color: var(--prime-three);
   }
   
   .svc-layout-7 .svc-read-btn:hover,
   .svc-layout-7 h6 a:hover {
    color: var(--prime-two);
   }
   
   /* Layout 8: Flip Cards */
   .svc-layout-8 {
    padding-left: 25px;
    padding-right: 25px;
   }
   
   .svc-layout-8 .svc-subtitle-8 {
    color: var(--prime-three);
    font-style: italic;
   }
   
   .svc-layout-8 .svc-main-title-8::after {
    background: var(--prime-three);
   }
   
   .svc-layout-8 .svc-flip-card {
    perspective: 1000px;
    height: 350px;
   }
   
   .svc-layout-8 .svc-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
   }
   
   .svc-layout-8 .svc-flip-card:hover .svc-flip-inner {
    transform: rotateY(180deg);
   }
   
   .svc-layout-8 .svc-flip-front,
   .svc-layout-8 .svc-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   }
   
   .svc-layout-8 .svc-flip-front {
    background: #fff;
   }
   
   .svc-layout-8 .svc-flip-back {
    background: var(--prime-three);
    color: #fff;
    transform: rotateY(180deg);
   }
   
   .svc-layout-8 .svc-flip-back h6 a,
   .svc-layout-8 .svc-flip-back p,
   .svc-layout-8 .svc-flip-back .svc-read-btn {
    color: #fff;
   }
   
   .svc-layout-8 .svc-read-btn {
    color: var(--prime-three);
   }
   
   .svc-layout-8 .svc-read-btn:hover,
   .svc-layout-8 h6 a:hover {
    color: var(--prime-two);
   }
   
   .svc-layout-8 .svc-flip-back .svc-read-btn:hover {
    color: #f5f5f5;
   }
   
   /* Responsive Adjustments */
   @media (max-width: 991px) {
    .svc-layout-4 .svc-stacked-wrapper {
    gap: 0px;
    }
   }
   
   @media (max-width: 767px) {
    .svc-section {
    padding: 30px 0;
    }
   
    .svc-layout-1, .svc-layout-2, .svc-layout-3, .svc-layout-4, .svc-layout-5, .svc-layout-6, .svc-layout-7, .svc-layout-8 {
    padding-left: 15px;
    padding-right: 15px;
    }
   
    .svc-main-title {
    font-size: 24px;
    }
   
    .svc-subtitle {
    font-size: 14px;
    }
   
    .svc-card, .svc-tile, .svc-circle-card, .svc-stacked-card, .svc-minimal-card, .svc-horizontal-card, .svc-gradient-card, .svc-flip-card {
    padding: 15px;
    }
   
    .svc-icon, .svc-tile-icon, .svc-circle-icon, .svc-stacked-icon, .svc-minimal-icon, .svc-horizontal-icon, .svc-gradient-icon, .svc-flip-icon {
    width: 40px;
    height: 40px;
    }
   
    .svc-layout-3 .svc-circle-icon,
    .svc-layout-4 .svc-stacked-icon {
    width: 50px;
    height: 50px;
    }
   
    .svc-layout-8 .svc-flip-card {
    height: 220px;
    }
   
    .svc-section .shapes {
    width: 80px;
    }
   
    .svc-grid {
    margin: -10px;
    display: grid;
    }
   }