.shopify-hero-banner {
    background-image: url(../imgs/web-devlopments-new/banner-main.png);
    background-size: contain;
}


.why-choose-span{
   font-family: "Outfit", serif;
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 98%;
letter-spacing: 0%;
color: #A91F25;
margin-left: 13px;

}
.why-choose-box{
    display:inline-flex;
    align-items:center;
    gap:15px;
    background:#fff;
    border:1px solid #A91F25;
    border-radius:4px;
    padding:14px 20px;
    margin-bottom:18px;
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
   
}


.why-choose-box img{
    width:40px;
}
.custom-badge{
    background-color: #A91F25;
    padding:3px;
    border-radius: 3px;
    margin-top:5px;
        font-size: 14px;

}

.card-ada{
    color: #050411;
  font-family: "Inter", sans-serif !important;
font-weight: 400;
font-style: Regular;
font-size: 15px;
leading-trim: NONE;
line-height: 21px;
letter-spacing: 0%;

}
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    .accordion-item.active .accordion-content {
        max-height: 500px;
        /* big enough to fit content */
    }

    .accordion-header::after {
        flex-shrink: 0;
        width: 25px;
        display: inline-block;
        height: 25px;
        margin-left: 20px;
        content: none !important;
        background-image: none !important;
        background-repeat: no-repeat;
        background-size: 25px;
        transition: all ease .3s;
    }

    .accordion-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .accordion-title {
        font-family: "Outfit", serif;
        font-weight: 500 !important;
        font-size: 18px !important;
        leading-trim: NONE;
        line-height: 117%;
        letter-spacing: 0%;

    }

    .accordion-item {
        background-color: #F5F5F5;
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        ;
        border: 1px solid transparent;
    }

    /* Active State Colors */
    .accordion-item.active {
        background-color: #A91F25;
    }

    .accordion-header {
        width: 100%;
        padding: 22px 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none;
        border: none;
        background: none;
        text-align: left;
        font-family: inherit;
    }

    .accordion-title {
        font-size: 17px;
        font-weight: 600;
        color: #1a1a1a;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-right: 20px;
    }

    .accordion-item.active .accordion-title {
        color: #ffffff;
    }

    /* Icon Circle */
    .icon-circle {
        width: 38px;
        height: 38px;
        background-color: #A91F25;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .accordion-item.active .icon-circle {
        background-color: #ffffff;
    }

    /* Arrow SVG */
    .arrow-svg {
        width: 18px;
        height: 18px;
        color: #ffffff;
        transition: transform 0.4s ease;
        /* Default closed state: Pointing Down-Right as requested */
        transform: rotate(90deg);
    }

    .accordion-item.active .arrow-svg {
        color: #A91F25;
        /* Open state: Pointing Up as requested in text logic */
        transform: rotate(-90deg);
    }

    /* Content Area with smooth height transition */
    .accordion-content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease-out;
    }

    .accordion-item.active .accordion-content {
        grid-template-rows: 1fr;
    }

    .accordion-body-wrapper {
        overflow: hidden;
    }

    .accordion-body {
        padding: 0 28px 28px 28px;
        font-size: 15px;
        line-height: 1.6;
        color: #ffffff;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .accordion-item.active .accordion-body {
        opacity: 1;
    }

    /* Responsive adjustments */
    @media (max-width: 600px) {
        .accordion-header {
            padding: 18px 20px;
        }

        .accordion-title {
            font-size: 15px;
        }

        .icon-circle {
            width: 32px;
            height: 32px;
        }
      
    }

.solutions-tabs .service-section p {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    margin-top: 5px;
}
.contact-card {
    width: 100%;
    
    background-color:#818080b5 !important
}
.row.sm\:mt-5.d-flex.justify-content-center.mt-0.mb-5.py-4 {
    width: 80%;
}
.development-web  {
    background-image: url(../imgs/web-devlopments-new/webAppConsulting.png) !important;
}
.Personalize-ex-dev{
     background-image: url(../imgs/web-devlopments-new/webAppConsulting.png) !important;
}
   .unq-slider-section {
        width: 100%;
        max-width: 1000px;
        padding: 20px;
        box-sizing: border-box;
    }

    .unq-slider-layout {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    /* Navigation Buttons */
    .unq-nav-btn {
        background-color: #A91F25;
        color: rgb(255, 255, 255);
        border: none;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.2s ease, transform 0.1s ease;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .unq-nav-btn:hover {
        background-color:black;
        color: white;
    }

    .unq-nav-btn:active {
        transform: scale(0.95);
    }

    /* Track Container */
    .unq-track-viewport {
        flex-grow: 1;
        overflow: hidden;
        border-radius: 8px; /* Slight rounding for the whole track area */
    }

    .unq-track {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        /* Will be translated via JS */
    }

    /* Individual Slide */
    .unq-slide-item {
        /* Default to 1 item visible on small screens */
        flex: 0 0 100%;
        width: 100%;
        padding: 0 10px; /* Acts as the gap between cards */
        box-sizing: border-box;
    }

    /* Desktop Breakpoint - Show 2 items */
    @media (min-width: 768px) {
        .unq-slide-item {
            flex: 0 0 50%;
            width: 50%;
        }
        .unq-slider-layout {
            gap: 25px;
        }
    }
img.card-img-top {
    border-radius: 2px;
}
.card {
    background: #F5F5F5;
    padding: 6px;
    border-radius: 3px;
}
    /* Card Styling */
    .unq-card {
    
        display: flex;
        flex-direction: column;
        /* height: 100%; */
        box-sizing: border-box;
    }
    section#enterprise {
    border-bottom: 1px solid;
    padding-bottom: 70px;
}
.card-body {
    height: 281px;
}
    .unq-card-img-placeholder {
        width: 100%;
        height: 240px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
    }

  
    
  

 
 button:focus:not(:focus-visible){background-color:#A91F25;box-shadow:none;}
    .unq-card-content {
        padding: 30px 25px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .unq-card-title {
        margin: 0 0 15px 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--unq-text-main);
    }

    .unq-card-desc {
        margin: 0 0 25px 0;
        font-size: 0.95rem;
        line-height: 1.5;
        color: var(--unq-text-muted);
        flex-grow: 1; /* Pushes tags to the bottom */
    }

    .unq-tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .owl-stage-outer{  height: 453px;}
  
    .unq-tag {
        background-color: var(--unq-primary-red);
        color: #d44242;
        padding: 6px 14px;
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: 4px;
        display: inline-block;
    }
 @media screen and (max-width:500px){
    .shopify-hero-banner {
    background-image: url(../imgs/web-devlopments-new/banner-main.png);
    background-size: cover;
}
  .owl-stage-outer {
    height: 176px;
}
 .unq-slide-item {
            flex: 0 0 100%;
            width: 50%;
        }
        .card-body {
    height: 226px;
}
.card-ada {
  
    font-size: 11px;
    line-height: 16px;
}
   
.unq-slider-section {
  
    padding: 0px;
}
.unq-slider-layout {
   
    gap: 0px;
}

.card {
     width: 15rem;
}

 }