@import url('https://fonts.googleapis.com/css2?family=Carter+One&family=Lilita+One&display=swap');

.demo-container {
    margin: auto !important;
    padding: 64px 40px !important; /* Consistent spacing */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 40px !important; /* --gutter */
    background: #FFFFFF !important; /* --surface */
    font-family: 'Poppins' !important;
}

* {
    scroll-behavior: smooth !important;
}


.demo-content {
    flex: 1 !important;
    padding: 40px !important; /* --gutter from architecture */
}


.form-container-demo {
    flex: 1 !important;
    background-color: #FFFFFF !important; /* --surface */
    border-radius: 28px !important; /* --radius-card from architecture */
    box-shadow: 0 4px 20px rgba(161, 176, 243, 0.3) !important; /* Softer shadow */
    max-width: 100% !important;
    max-height: fit-content !important;
    overflow-y: hidden !important;
}

.demo-h1 {
    font-size: 2.5rem !important; /* h1 size from architecture */
    font-family: 'Quicksand', sans-serif !important; /* Heading font */
    color: #0C0B0C !important; /* --ink from architecture */
    margin-bottom: 20px !important;
    font-weight: 700 !important; /* Architecture standard */
    letter-spacing: -0.02em !important; /* Tighter letter spacing */
    line-height: 1.2 !important;
}

.demo-h1-highlighted {
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(304deg, #004197 0%, #A1B0F3 63%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

.demo-container-mobile {
    display: none !important;

}

.hero-steps-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-top: 32px !important;
}

.hero-step-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.hero-step-item {
    padding: 20px !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border: 1px solid #E6E6E6 !important; /* --hairline */
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}


.hero-step-title {
    font-size: 1.125rem !important; /* 18px */
    font-weight: 600 !important;
    color: #0C0B0C !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease !important;
}

.hero-step-item:hover .hero-step-title {
    color: #FFFFFF !important;
}

.hero-step-description {
    font-size: 0.9375rem !important; /* 15px */
    color: #5D5D5D !important; /* --ink-muted */
    line-height: 1.5 !important;
    transition: color 0.3s ease !important;
}

.hero-step-item:hover .hero-step-description {
    color: #FFFFFF !important;
}

.hero-step-img {
    width: 32px !important;
    height: 32px !important;
    transition: transform 0.3s ease !important;
}

.hero-step-item:hover .hero-step-img {
    transform: scale(1.1) !important;
}


.demo-p {
    color: #5D5D5D !important; /* --ink-muted from architecture */
    margin-bottom: 30px !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

.demo-feature-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
}

.demo-feature-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
    font-size: 20px !important;
}

.lightning-icon {
    background-color: #f0e6ff !important;
}

.pricing-icon {
    background-color: #e6fff0 !important;
}

.ui-icon {
    background-color: #ffe6e6 !important;
}

.demo-feature-text {
    flex: 1 !important;
    color: black !important;

}

.feature-title {
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    font-size: 1.3rem !important;
}


label {
    margin-bottom: 5px !important;
    color: #333 !important;
}

input,
select,
textarea {
    margin-bottom: 15px !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
}

.form-footer-demo {
    text-align: center !important;
    margin-top: 20px !important;
    font-size: 14px !important;
    color: #666 !important;
}

.brand-carousel-section {
    text-align: center !important;
    padding: 10px !important;
}

.brand-carousel-section__heading {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 20px;
}


.brand-carousel-section {
    text-align: center !important;
    padding: 64px 40px !important; /* --gutter spacing */
    gap: 24px !important;
    background: #F0F8FF !important; /* Light blue section background */
}

.brand-carousel-section__heading {
    font-size: 2rem !important; /* h2 size */
    font-family: 'Quicksand', sans-serif !important;
    color: #0C0B0C !important; /* --ink */
    margin-bottom: 32px !important;
    letter-spacing: -0.01em !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.brand-carousel-section__highlight {
    color: #004197 !important; /* --primary-blue */
}

.slider {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;

}


.slide-track {
    display: flex;
    width: calc(166px * 14);
    animation: scroll 20s linear infinite;
}

.slide {
    width: 250px;
    height: 120px;
    object-fit: contain;
    flex-shrink: 0;
    padding: 20px !important;
    background: #fff !important;
    margin-right: 10px !important;
    border-radius: 10px !important;
}

.slide:hover {
    border: #004197 2px solid !important;
    border-radius: 10px !important;
    box-shadow: 0 0 2.5px #004197 !important;
}

.work {
    text-align: left !important;
    color: black !important;
}

.work:hover {
    background: linear-gradient(304deg, #004197 0%, #A1B0F3 63%) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    color: white !important;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-166px * 7));
        /* Shift by the width of 7 images */
    }
}

.demo-features {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 50px !important;
}

@media screen and (max-width: 768px) {

    .slide {
        width: 100px;
        height: 60px;
        padding: 5px !important;
    }

    .brand-carousel-section {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
        margin: 30px auto 10px auto !important;
    }

    .brand-carousel-section__heading {
        font-size: 1.25rem !important;
        margin-bottom: 10px !important;
    }

    .demo-container {
        display: none !important;
        padding: 32px 20px !important; /* Reduced from desktop */
    }

    .demo-container-mobile {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
        height: 100% !important;
    }

    .demo-features-mobile {
        margin: 10px auto !important;
        padding: 10px !important;
        color: #333 !important;
    }

    .demo-content {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 20px !important;
        padding: 24px 10px !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .demo-features {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .work-container {
        padding: 10px !important;
        margin-top: 5px !important;
    }

    .demo-h1 {
        font-size: 2rem !important; /* Architecture tablet scale */
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .demo-p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    .feature-p {
        font-size: 1rem !important;
    }

    .feature-grid-header {
        font-size: 2rem !important;
    }

    .steps-header {
        font-size: 2rem !important;
        line-height: 1.25 !important;
    }

    .steps-container {
        padding-top: 64px !important; /* Half of desktop */
        padding-bottom: 64px !important;
    }
}

@media screen and (max-width: 480px) {
    .demo-h1 {
        font-size: 1.75rem !important; /* Architecture mobile scale */
        font-weight: 700 !important;
    }

    .demo-p {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.5 !important;
    }

    .feature-grid-header {
        font-size: 1.75rem !important;
    }

    .steps-header {
        font-size: 1.5rem !important;
    }

    .demo-container {
        padding: 20px 16px !important;
    }

    .demo-content {
        padding: 16px 10px !important;
    }

    .steps-container {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}

.blue {
    color: #004197 !important; /* --primary-blue */
}

/* 
input,
input[type="text"],
input[type="search"],
isindex,
textarea,
button {
    outline: none !important;
    margin: 0 auto !important;
    padding: 10px 10px !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
} */

.responsive-iframe {
    min-width: 100% !important;
    overflow-y: hidden !important;
    border: none;
    min-height: 870px !important;
}

@media (max-width: 768px) {

    .responsive-iframe {
        min-height: 765.5px !important;
    }
}

.name {
    letter-spacing: 0.3px !important;
}

@media (min-width: 769px) {

    .responsive-iframe {
        min-height: 110% !important;
        overflow-y: hidden !important;
    }
}

.feature-grid-container {
    max-width: 1200px !important;
    margin: 64px auto !important;
    padding: 40px !important;
    text-align: center !important;
}



.chat-button-container {
    position: sticky !important;
    top: 90% !important;
    display: none !important;
    z-index: 1000 !important;
    padding: 0 20px 20px !important;
}

.call-button {
    color: white !important;
    font-weight: 600 !important;
}

.chat-button {
    position: sticky !important;
    bottom: 20px !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 160px !important;
    padding: 14px 24px !important;
    background: linear-gradient(304deg, #004197 0%, #A1B0F3 63%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important; /* --radius-pill */
    height: fit-content !important;
    margin: auto !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(0, 65, 151, 0.3) !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

@media (max-width: 768px) {
    .chat-button {
        display: flex !important;
        width: auto !important;
        min-width: 140px !important;
        padding: 12px 20px !important;
        font-size: 0.9375rem !important;
    }

    .chat-button-container {
        display: block !important;
        padding: 0 16px 16px !important;
    }
}

.chat-button:hover {
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 65, 151, 0.4) !important;
}

.chat-button:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 12px rgba(0, 65, 151, 0.3) !important;
}


/* =================================================================
   STEPS CONTAINER SECTION
   Modern 4-step journey with bordered minimal cards
   ================================================================= */

/* Container: Full-width section with light blue background */
.steps-container {
    max-width: 100% !important;
    padding-top: 104px !important;
    padding-bottom: 129px !important;
    border-radius: 100px 0 !important;
    text-align: center !important;
    background-color: #F0F8FF !important; /* Light blue section background from ARCHITECTURE.md */
}

/* Header: Large centered heading with Quicksand font */
.steps-header {
    font-size: 2.5rem !important; /* h1 scale from ARCHITECTURE.md */
    font-family: 'Quicksand', sans-serif !important; /* Heading font */
    width: 50% !important;
    margin: 0px auto 60px auto !important;
    line-height: 1.25 !important;
    font-weight: 700 !important; /* High weight contrast */
    color: #0C0B0C !important; /* --ink from ARCHITECTURE.md */
    letter-spacing: -0.02em !important; /* Tight letter spacing */
    text-transform: none !important;
}

/* Grid: 4-column layout for desktop */
.steps-grid {
    max-width: 1200px !important;
    margin: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important; /* Increased from 5px for better spacing */
}

/* Card: Bordered minimal design with clean white background */
.step-box {
    position: relative !important; /* For absolute positioning of circle badge */
    background: #FFFFFF !important; /* --surface from ARCHITECTURE.md */
    border: 1px solid #E0E0E0 !important; /* Bordered minimal style */
    border-radius: 15px !important; /* Softer than 28px, more minimal feel */
    padding: 80px 24px 32px 24px !important; /* Extra top padding for circle badge */
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important; /* --ease-cinematic from ARCHITECTURE.md */
    overflow: visible !important; /* Allow image to float outside */
}

/* Hover: Subtle lift effect with enhanced shadow */
.step-box:hover {
    transform: translateY(-8px) !important; /* Slightly more pronounced lift */
    box-shadow: 0 12px 32px rgba(0, 65, 151, 0.15) !important; /* Blue-tinted shadow */
    border-color: #004197 !important; /* --primary-blue accent on hover */
}

/* Circle Badge: Step number in blue circle (top-left positioning) */
.step-number {
    position: absolute !important;
    top: -24px !important; /* Float above card */
    left: 24px !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important; /* 24px */
    font-family: 'Poppins', sans-serif !important; /* Body font for numbers */
    color: #FFFFFF !important; /* White text */
    font-weight: 700 !important;
    background: #004197 !important; /* --primary-blue */
    border-radius: 50% !important; /* Perfect circle */
    box-shadow: 0 4px 12px rgba(0, 65, 151, 0.25) !important; /* Elevated shadow */
    border: 3px solid #FFFFFF !important; /* White border for separation */
    z-index: 10 !important; /* Ensure it stays above card */
}

/* Content: Step description text */
.step-content {
    line-height: 1.4 !important;
    color: #0C0B0C !important; /* --ink from ARCHITECTURE.md */
    text-align: left !important;
    font-size: 1.25rem !important; /* 20px - reduced from 1.75rem for better readability */
    font-weight: 600 !important; /* Semi-bold for emphasis */
    margin-bottom: 24px !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Image: Floats slightly outside card boundary at bottom */
.step-image {
    width: 110% !important; /* Extends beyond card width */
    height: auto !important; /* Maintain aspect ratio */
    max-height: 180px !important;
    object-fit: contain !important;
    margin: 0 -5% -16px -5% !important; /* Negative margins to overflow card */
    transform-origin: center bottom !important; /* Scale from bottom center */
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Image Hover: Subtle scale effect */
.step-box:hover .step-image {
    transform: scale(1.05) !important;
}

@media (max-width: 768px) {

    .services-list-header h2 {
        margin: 40px auto !important;
    }

    .services-list-intro {
        margin-bottom: 20px !important;
    }
}

/* =================================================================
   RESPONSIVE: TABLET (≤768px)
   2-column grid with adjusted spacing
   ================================================================= */
@media (max-width: 768px) {
    .steps-container {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
        border-radius: 0px !important; /* Remove curved corners on mobile */
    }

    /* Header: Smaller text, wider width */
    .steps-header {
        font-size: 1.5rem !important; /* Architecture tablet scale */
        width: 90% !important;
        margin: 0 auto 40px auto !important;
        font-weight: 600 !important;
    }

    /* Grid: 2 columns for tablet */
    .steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important; /* Increased gap for better breathing room */
        margin: 10px 15px !important;
        padding: 0 10px !important;
    }

    /* Card: Adjusted padding and sizing */
    .step-box {
        padding: 64px 20px 24px 20px !important; /* Maintain top padding for badge */
        width: 100% !important;
        margin: 0 !important;
        min-height: 280px !important; /* Ensure consistent card heights */
    }

    /* Circle Badge: Smaller size for mobile */
    .step-number {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important; /* 20px */
        top: -20px !important;
        left: 20px !important;
    }

    /* Content: Smaller font size */
    .step-content {
        font-size: 1rem !important; /* 16px */
        font-weight: 600 !important;
        margin-bottom: 16px !important;
    }

    /* Image: Contained within card on mobile */
    .step-image {
        width: 100% !important;
        max-height: 140px !important;
        margin: 0 0 -8px 0 !important; /* Less overflow on mobile */
    }
}


.video-carousel-component-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

.video-carousel-component-header {
    text-align: center !important;
    margin-bottom: 20px !important;
}

.video-carousel-component-title {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    color: #000000 !important;
}

.video-carousel-component-subtitle {
    font-size: 1.2rem !important;
    color: #555 !important;
    margin-top: 10px !important;
}

.video-carousel-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 10px !important;
    margin: auto !important;
    max-width: 1000px !important;
}

.video-carousel-product-card {
    overflow: hidden !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-color: #fff !important;
    width: 220px !important;
    height: 100% !important;
    cursor: pointer !important;
}

.video-carousel-product-image-container {
    position: relative !important;
    width: 220px !important;
    height: 380px !important;
    cursor: pointer !important;
}

.video-carousel-product-image {
    width: 220px !important;
    height: 380px !important;
    cursor: pointer !important;
}


.video-carousel-product-details {
    padding: 15px !important;
    text-align: center !important;
}

.video-carousel-product-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #004197 !important;
    margin-bottom: 10px !important;
    text-align: left !important;

}




@media (max-width: 768px) {
    .video-carousel-component-title {
        font-size: 2rem !important;

    }

    .video-carousel-product-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;

    }

    .video-carousel-product-card {
        flex: 0 0 50% !important;
        scroll-snap-align: center !important;
        margin-right: 10px !important;
        width: 80% !important;
        height: 80% !important;
        margin-bottom: 30px !important;
    }

    .video-carousel-product-image-container {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        cursor: pointer !important;
    }

    .video-carousel-product-image {
        width: 100% !important;
        height: 70% !important;
        cursor: pointer !important;
        aspect-ratio: 9/16 !important;
    }

    .video-carousel-product-details {
        text-align: left !important;
        padding: 12px !important;
    }

    .video-carousel-product-title {
        font-size: 0.9rem !important;
    }


}

.hire_us-featured-section {
    text-align: center !important;
    padding: 40px 20px !important;
    background-color: #ffffff !important;
}

.hire_us-featured-header {
    font-size: 1.8rem !important;
    font-weight: bold !important;
    margin-bottom: 30px !important;
}

.hire_us-featured-logos {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
}

.hire_us-featured-logo {
    max-width: 100px !important;
    height: auto !important;
}

.hire_us-featured-benefits {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 1200px !important;
    margin: auto !important;
}

.hire_us-benefit {
    flex: 1 !important;
    text-align: left !important;
    padding: 50px !important;
    background-color: #f9f9f9 !important;

}



.hire_us-benefit-icon {
    width: 50px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.hire_us-benefit-h3 {
    font-size: 2rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    color: black !important;
}

.hire_us-benefit-p {
    font-size: 0.9rem !important;
    color: #666 !important;
}

@media (max-width: 768px) {
    .hire_us-featured-benefits {
        grid-template-columns: repeat(1, 1fr) !important;

    }

    .hire_us-featured-header {
        font-size: 1.4rem !important;
    }

    .hire_us-benefit {
        padding: 20px !important;
    }

    .hire_us-benefit-h3 {
        font-size: 1rem !important;
    }
}


.hero-step-item:hover {
    cursor: pointer !important;
    background: linear-gradient(304deg, #004197 0%, #A1B0F3 63%) !important;
    color: #fff !important;
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(0, 65, 151, 0.25) !important;
    border-color: transparent !important;
}

.why-choose-origins {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 50px 0px 50px 0px !important;
}

.why-choose-origins-grid {
    display: flex !important;
    padding: 50px !important;
    align-items: center !important;
    justify-content: center !important;
}

.demo-feature-item {
    width: 100% !important;

}

.why-choose-origins-header {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 2.5rem !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    color: #0C0B0C !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 48px !important;
}

@media (max-width: 768px) {
    .why-choose-origins-grid {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
    }

    .why-choose-origins-header {
        font-size: 2rem !important;
        padding: 20px !important;
        margin-bottom: 10px !important;
        color: black !important;
    }
}

.devops-consultancy-container {
    display: flex !important;
    justify-content: space-around !important;
    align-items: flex-start !important;
    padding: 60px 10% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    background-color: #fff !important;
}

.devops-consultancy-left {
    top: 10% !important;
    width: 40% !important;
    position: sticky !important;
}

.devops-heading {
    font-size: 2.5rem !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
}

.devops-subtext {
    font-size: 1.2rem !important;
    margin-bottom: 30px !important;
}

.devops-talk-btn {
    background: transparent !important;
    color: rgba(0, 65, 151, 1) !important;
    padding: 10px 20px !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    border: 2px solid rgba(0, 65, 151, 1) !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: 0.3s !important;
}

.devops-talk-btn:hover {
    background: linear-gradient(304deg, #004197 0%, #A1B0F3 63%) !important;
    color: white !important;
}

.devops-consultancy-right {
    width: 60% !important;
    padding-left: 40px !important;
}

.devops-usp-header {
    margin-bottom: 40px !important;
    display: flex !important;
    align-items: center !important;
}

.devops-usp-title {
    text-align: left !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    margin-right: 10px !important;
}

.devops-usp-line {
    width: 70% !important;
    height: 2px !important;
    background: linear-gradient(304deg, #004197 0%, #A1B0F3 63%) !important;
    border: none !important;
    margin-right: 5px !important;
}

.devops-usp-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.devops-usp-item {
    margin-bottom: 40px !important;
}

.devops-usp-heading {
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
}

.devops-usp-text {
    font-size: 1rem !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .devops-consultancy-container {
        flex-direction: column !important;
        padding: 30px 5% !important;
    }

    .devops-consultancy-left {
        width: 100% !important;
    }

    .devops-consultancy-right {
        width: 100% !important;
        padding-left: 0 !important;
        margin-top: 40px !important;
    }

    .devops-talk-btn {
        font-size: 1rem !important;
        padding: 8px 18px !important;
    }
}

@media (max-width: 768px) {

    .devops-consultancy-left {
        top: 0% !important;
        width: 100% !important;
        position: unset !important;
    }

    .devops-heading {
        font-size: 2.5rem !important;
    }

    .devops-usp-title {
        font-size: 1.5rem !important;
    }

    .devops-usp-heading {
        font-size: 1.2rem !important;
    }

    .devops-usp-text {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .devops-usp-line {
        width: 60% !important;
        height: 2px !important;
        background: linear-gradient(304deg, #004197 0%, #A1B0F3 63%) !important;
        border: none !important;
    }

    .devops-heading {
        font-size: 2rem !important;
    }

    .devops-usp-title {
        font-size: .8rem !important;
        font-weight: 600 !important;
    }

    .devops-usp-heading {
        font-size: 1rem !important;
    }

    .devops-usp-text {
        font-size: 0.85rem !important;
    }
}

.tech-stacks-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px !important;
    text-align: left !important;
}

.tech-stacks-container h1 {
    font-size: 28px !important;
    font-weight: bold !important;
    margin-bottom: 30px !important;
    color: #333 !important;
}

.tech-stack-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 5px !important;
}

.tech-stack-item {
    display: flex !important;
    padding: 25px 14px !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.tech-stack-item img {
    max-width: 80px !important;
    height: auto !important;
}

@media (max-width: 768px) {
    .tech-stack-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .tech-stack-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .tech-stacks-container h1 {
        font-size: 22px !important;
    }

}

.devops-services {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 50px 20px !important;
    text-align: center !important;
}

.devops-services-header h1 {
    font-size: 2.5rem !important;
    color: #000000 !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
}

.devops-services-header p {
    font-size: 1.2rem !important;
    color: #666 !important;
    margin-bottom: 40px !important;
}

.devops-services-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    gap: 20px !important;
}

.devops-card {
    background-color: #fff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px !important;
    padding: 30px !important;
    width: 45% !important;
    text-align: left !important;

}

.devops-card-icon img {
    width: 50px !important;
    margin-bottom: 15px !important;
}

.devops-card h2 {
    font-size: 1.5rem !important;
    margin-bottom: 10px !important;
    font-weight: 500 !important;
}

.devops-card p {
    font-size: 1rem !important;
    color: #666 !important;
}

@media (max-width: 1024px) {
    .devops-card {
        width: 45% !important;
    }
}

@media (max-width: 768px) {
    .devops-card {
        width: 100% !important;
    }

    .devops-services-header h1 {
        font-size: 2rem !important;
    }

    .devops-services-header p {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .devops-services {
        padding: 20px 10px !important;
    }

    .devops-card {
        padding: 20px !important;
    }

    .devops-services-header h1 {
        font-size: 1.8rem !important;
    }

    .devops-services-header p {
        font-size: 0.9rem !important;
    }

    .devops-card-icon img {
        width: 40px !important;
    }

    .devops-card h2 {
        font-size: 1.3rem !important;
        font-weight: 500 !important;
    }

    .devops-card p {
        font-size: 0.9rem !important;
    }
}

.industries-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

.industries-section {
    padding: 50px 10% !important;
    max-width: fit-content !important;
    margin: 0 auto !important;
    background-color: #fff !important;
}

/* Header Styling */
.industries-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

.header-line {
    flex: 1 !important;
    border: none !important;
    height: 2px !important;
    background-color: #004197 !important; /* --primary-blue */
    margin: 0 20px !important;
}

.industries-heading {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    width: 40% !important;
}

@media (max-width:480px) {
    .header-line {
        display: none !important;
    }

    .industries-heading {
        font-size: 1.8rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        width: 100% !important;
    }
}

/* Description */
.industries-description {
    text-align: center !important;
    margin-bottom: 40px !important;
    font-size: 1.1rem !important;
    color: #666 !important;
    max-width: 60% !important;
    margin: 10px auto !important;
}

.technologies-section {
    padding: 50px 10% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    background-color: #fff !important;
}

/* Header Container */
.technologies-header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 40px !important;
    gap: 100px !important;
}

/* Heading Styling */
.technologies-heading {
    font-size: 2.5rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    text-align: left !important;
    width: 50%;
}

/* Description Container */
.technology-description-container {
    display: unset !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50%;

}

.header-line {
    height: 2px !important;
    background-color: #004197 !important; /* --primary-blue */
    width: 100% !important;
    border: none !important;
}

.hrtext {
    display: flex;
    align-items: center;

}

.our-technology {
    width: 50%;
}

.technology-description-text {
    font-size: 1.1rem !important;
    color: #666 !important;
    margin: auto !important;
}

/* Grid Layout */
.technologies-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* Technology Card */
.technology-card {
    text-align: left !important;
    padding: 20px !important;
    background-color: #f9f9f9 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease-in-out !important;
}

.technology-card img {
    width: 60px !important;
    height: 60px !important;
}

.technology-card:hover {
    transform: translateY(-5px) !important;
}

.technology-icon {
    width: 100px !important;
    height: auto !important;
    margin-bottom: 15px !important;
}

.technology-card h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
}

.technology-card p {
    font-size: 1rem !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

/* Responsive Styling */
@media (max-width: 1024px) {
    .technologies-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .technologies-grid {
        grid-template-columns: 1fr !important;
    }

    .technologies-heading {
        font-size: 2rem !important;
    }

    .technologies-header-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    .technology-description-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-top: 20px !important;
        width: 100% !important;
    }

    .hrtext {
        width: 100% !important;
        align-items: center;
        justify-content: space-between;
    }

    .hrtext hr {
        max-width: 100% !important;
    }

    .header-line {
        width: 150% !important;

    }

    .our-technology {
        width: fit-content !important;
        text-align: right !important;
    }
}

@media (max-width:480px) {

    .technologies-heading {
        font-size: 1.5rem !important;
        width: 100% !important;
    }

}

.ai-service-capabilities {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 50px 20px !important;
    text-align: center !important;
}

.ai-section-header h2 {
    font-size: 2.5rem !important;
    color: #000000 !important;
    margin-bottom: 10px !important;
    font-weight: 500 !important;
}

.ai-section-header p {
    font-size: 1rem !important;
    color: #666 !important;
    margin-bottom: 40px !important;
}

.capabilities-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-weight: 300 !important;
}

.capability-card {
    background-color: white !important;
    padding: 50px 40px !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    text-align: left !important;
    font-weight: 400 !important;
    width: fit-content !important;
    display: flex !important;
    flex-direction: column !important;
    cursor: default !important;
}


.capability-card img {
    width: 100px !important;
    height: 100px !important;
    margin-bottom: 20px !important;
}

.capability-card h3 {
    font-size: 1.2rem !important;
    margin-bottom: 15px !important;
    font-weight: 600 !important;
}

.capability-card p {
    font-size: 1rem !important;

}





@media (max-width: 768px) {
    .ai-service-capabilities {
        padding: 50px !important;
        text-align: left !important;
        background-color: #ffffff !important;
    }

    .capabilities-grid {
        grid-template-columns: 2fr !important;
    }
}

@media (max-width: 480px) {

    .capabilities-grid {
        grid-template-columns: 2fr !important;
    }

    .ai-section-header h2 {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
        font-weight: 500 !important;
        width: 100% !important;

    }

    .ai-section-header p {
        font-size: 0.rem !important;
        color: #666 !important;
        margin-bottom: 40px !important;
    }

    .ai-service-capabilities {
        padding: 20px !important;
    }

    .capability-card {
        width: 100% !important;
        padding: 30px !important;
    }

    .capability-card h3 {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
        font-weight: 500 !important;
    }

    .capability-card p {
        font-size: 0.8rem !important;

    }


}

.ai-avatar-section {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 50px 100px !important;
    background-color: #f9f9f9 !important;
    max-width: 100% !important;
}

.left-text {
    width: 30% !important;
    display: flex !important;
    justify-content: first baseline !important;
    align-content: center !important;
    margin-bottom: 50px !important;
    text-align: center !important;
}

.left-text h2 {
    font-size: 2rem !important;
    color: #333 !important;
    font-weight: 600 !important;
}

.right-text {
    width: 50% !important;
    text-align: left !important;
}

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

.right-header .line {
    display: block !important;
    width: 80% !important;
    height: 2px !important;
    background-color: #004197 !important; /* --primary-blue */
    margin-right: 10px !important;
}

.right-header h3 {
    font-size: 1rem !important;
    color: #333 !important;
    font-weight: 500 !important;
}

.right-text p {
    font-size: 1rem !important;
    color: #666 !important;
    font-weight: 500 !important;
}

/* responsive for mobile and small screens */
@media (max-width: 768px) {
    .ai-avatar-section {
        flex-direction: column !important;
        padding: 20px !important;
    }

    .left-text,
    .right-text {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .left-text h2 {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }

    .right-text {
        text-align: center !important;
    }

    .right-header {
        justify-content: center !important;
    }

    .right-header .line {
        width: 80% !important;
        margin: 0 auto !important;
    }

    .right-header h3 {
        font-size: 1.2rem !important;
    }

    .right-text p {
        font-size: 1rem !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 90% !important;
    }

}

@media (max-width: 480px) {
    .left-text {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 20px !important;
        font-weight: 400 !important;
    }

    .left-text h2 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
        font-weight: 500 !important;
    }

    .right-text {
        text-align: left !important;
    }

    .right-header {
        justify-content: center !important;

    }

    .right-header .line {
        width: 80% !important;
        margin: 0 auto !important;
    }

    .right-header h3 {
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    .right-text p {
        font-size: 0.8rem !important;
        text-align: left !important;
        margin: 0 0 !important;
        width: 100% !important;
    }


}