con@charset "utf-8";
.blog-page-banner h1 {
    background: #022a5e;
    color: #fff;
    padding: 60px 0;
    text-align: center
}

.blg-content-sgle ul li {
    font-size: 16px;
    margin-bottom: 20px
}

.service-th .svg-inline--fa,
.social-thank li a {
    color: #fff;
    font-size: 17px;
    height: 34px;
    padding: 8px 0;
    display: block
}

.all-content {
    margin-top: 100px
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9
}

.service_txt.service-th {
    display: block;
    margin: 40px auto 150px;
    width: 50%
}

.service-th {
    background: #f5f7fa;
    border: 0;
    border-radius: 10px;
    padding: 14px 25px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)
}

.service_txt>h2 {
    color: #099;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: 12px;
    text-align: center;
    font-size: 30px
}

.service-th h4,
.social-thank li {
    text-align: center;
    color: #414141
}

.service-th h4 {
    font-size: 20px;
    margin-bottom: 25px
}

.service_txt.service-th>p {
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center
}

.rs-thank {
    font-size: 26px;
    margin-top: 9px
}

.social-thank {
    text-align: center
}

.social-thank ul {
    margin: 0;
    padding: 0;
    text-align: center
}

.social-thank li {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    margin: 0 2px;
    transition: .8s 0;
    width: 34px;
    padding: 3px 0
}

.service_txt h4 a {
    color: #099
}

.service-th .svg-inline--fa.fa-facebook-f {
    background: #3a589b
}

.service-th .svg-inline--fa.fa-twitter {
    background: #29a8e0
}

.service-th .svg-inline--fa.fa-linkedin,
.service-th .svg-inline--fa.fa-linkedin .fa-w-1 {
    background: #007ab9
}

.service-th .svg-inline--fa {
    width: 100%
}

.form-group .design-comment {
    height: 100px
}

.main-slider.slider-inner-pages {
    padding: 60px 0
}

.btn-cpny.clutch-link {
    width: 192px
}

.green-color,
.shopify-page .request-free-audit h3 {
    color: #95bf47
}

.banner-form button.btn.green-color,
.shopify-page .scss-rate-box {
    background: #95bf47
}

.shopify-page .banner-form-border {
    border: 2px dashed #95bf47
}

.all-content section {
    padding: 80px 0
}

.all-content .left-h2-heading .left-right-box H2 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 0
}

.all-content .left-h2-heading .left-right-box p {
    font-size: 18px;
    margin-top: 20px
}

.all-content .left-h2-heading .left-right-box H2:after {
    content: "";
    background: #ffb900;
    background: -moz-linear-gradient(left, #ffb900 50%, #fe8a71 50%);
    background: -webkit-linear-gradient(left, #ffb900 50%, #fe8a71 50%);
    background: linear-gradient(to right, #ffb900 50%, #fe8a71 50%);
    display: block;
    width: 40px;
    height: 4px;
    margin-top: 15px
}

.all-content .left-h2-heading .left-right-box H3 {
    font-size: 35px;
    font-weight: 800;
    color: #2f3737;
    margin: 25px 0
}

.all-content .left-h2-heading .left-right-box .scss-rate-box H2 {
    font-size: 24px;
    font-weight: 700;
    color: #fff
}

.all-content .left-right-box {
    padding: 80px 0;
    background: #fff
}

.shopify-page-services .dev-cluct-process .dev-cluct-inner:hover {
    border-style: solid;
    border-width: 0 0 7px;
    border-color: #95bf47;
    box-shadow: 10px 8px 10px 0 rgba(0, 0, 0, .5)
}

.shopify-page .cta-btn-nml {
    background: #95bf47;
    padding: 80px 0
}

.shopify-page .cta-btn-nml.strat-with .container {
    width: 100%;
    max-width: 1200px
}

.shopify-page .cta-btn-nml.strat-with p {
    letter-spacing: normal;
    text-transform: none;
    color: #fff;
    font-size: 20px;
    margin-top: 20px
}

.shopify-page .cta-btn-nml h3 {
    font-size: 35px;
    color: #fff;
    font-weight: 700;
    margin: 0
}

.processright h4,
.shopify-benifit .heading H2 {
    color: #95bf47;
    text-align: left;
    font-weight: 700
}

.shopify-page .cta-btn-nml .quote-btn {
    background: 0 0;
    color: #fff;
    text-decoration: none;
    padding: 20px 10px;
    min-width: 200px;
    border: 1px solid #fff;
    FONT-SIZE: 17PX;
    margin-top: 38px;
    display: inline-block
}

.all-content.shopify-page .cta-btn-nml H3:after {
    content: "";
    background: #fff;
    display: block;
    width: 40px;
    height: 4px;
    margin-top: 15px
}

.processright {
    max-height: 400px;
    overflow-y: scroll
}

.processright ul {
    position: relative;
    list-style-type: none;
    margin-top: 0
}

.processright ul li {
    width: 100%;
    padding: 0;
    position: relative;
    background: #fff;
    transition: .3s;
    display: flex;
    margin-top: 20px
}

.processright-sec {
    padding-left: 25px;
    display: inline-block;
    vertical-align: middle
}

.processright h4 {
    font-size: 20px;
    margin: 10px 0 20px
}

.howwework-sec ul li p {
    padding: 0;
    font-size: 16px;
    text-align: left
}

.howwework-sec ul::after {
    border: 1px dashed #000;
    content: "";
    position: absolute;
    top: 53px;
    width: 1px;
    left: 58px;
    z-index: 0;
    height: 83%
}

.step-one {
    BACKGROUND: #95bf47;
    DISPLAY: inline-block;
    padding: 5px 35px;
    border-radius: 10px;
    font-size: 50px;
    vertical-align: middle;
    color: #fff
}

.full-container {
    max-width: 1920px;
    padding-left: 50px;
    padding-right: 50px
}

.common-portfolios-section h2 {
    font-size: 35px;
    font-weight: 800;
    color: #2f3737;
    margin: 0 0 40px;
    text-align: center
}

.common-portfolios-section H2:after {
    content: "";
    background: #ffb900;
    background: -moz-linear-gradient(left, #ffb900 50%, #fe8a71 50%);
    background: -webkit-linear-gradient(left, #ffb900 50%, #fe8a71 50%);
    background: linear-gradient(to right, #ffb900 50%, #fe8a71 50%);
    display: block;
    width: 40px;
    height: 4px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto
}

.why-does-soft-develop-list-section .content-box h3 {
    margin-top: 40px;
    padding-left: 24px;
    position: relative
}

.shopify-benifit {
    BACKGROUND: #022a5e
}

.shopify-benifit .heading H2 {
    font-size: 35px;
    margin-top: 0
}

.shopify-benifit .heading H2:after {
    content: "";
    background: #95bf47;
    display: block;
    width: 40px;
    height: 4px;
    margin-top: 15px
}

.shopify-benifit .heading p {
    color: #fff;
    text-align: left;
    margin: 30px 0;
    font-size: 18px;
    font-weight: 300
}

.dev-expertise,
.shopify-benifit .dev-cluct-inner {
    background: #fff;
    padding: 30px;
    margin-top: 30px
}

.shopify-benifit .dev-cluct-process .dev-cluct-inner:hover {
    border-style: solid;
    border-width: 0 0 7px;
    border-color: #95bf47;
    box-shadow: 10px 8px 10px 0 rgba(f, f, f, f.5)
}

.more-abut-shopify .left-right-box {
    padding: 0;
    background: 0 0
}

.portfolio-section {
    background: #004b80;
    padding: 60px 20px;
    color: #fff;
    min-height: 100vh;
    box-sizing: border-box
}

.filter-tab,
.portfolio-item {
    background: rgba(255, 255, 255, .1);
    transition: .3s
}

.portfolio-container {
    max-width: 1200px;
    margin: 0 auto
}

.portfolio-header {
    text-align: center;
    margin-bottom: 50px
}

.portfolio-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
    color: #fff
}

.portfolio-title .highlight {
    color: gold
}

.portfolio-subtitle {
    font-size: 18px;
    opacity: .9;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    color: #fff
}

.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 50px;
    flex-wrap: wrap
}

.filter-tab {
    border: 2px solid rgba(255, 255, 255, .2);
    color: #fff;
    padding: 12px 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    border-radius: 0;
    position: relative;
    margin: 0 -1px
}

.filter-tab:first-child {
    border-radius: 8px 0 0 8px
}

.filter-tab:last-child {
    border-radius: 0 8px 8px 0
}

.filter-tab.active {
    background: gold;
    color: #2c5aa0;
    border-color: gold;
    z-index: 2
}

.filter-tab:hover:not(.active) {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-2px)
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto
}

.portfolio-item {
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .2);
    opacity: 0;
    transform: translateY(20px);
    animation: .6s forwards fadeInUp
}

.portfolio-item:first-child {
    animation-delay: .1s
}

.portfolio-item:nth-child(2) {
    animation-delay: .2s
}

.portfolio-item:nth-child(3) {
    animation-delay: .3s
}

.portfolio-item:nth-child(4) {
    animation-delay: .4s
}

.portfolio-item:nth-child(5) {
    animation-delay: .5s
}

.portfolio-item:nth-child(6) {
    animation-delay: .6s
}

.portfolio-item:nth-child(7) {
    animation-delay: .7s
}

.portfolio-item:nth-child(8) {
    animation-delay: .8s
}

.portfolio-item:nth-child(9) {
    animation-delay: .9s
}

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

.portfolio-item.hidden {
    display: none
}

.portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3)
}

.portfolio-image {
    width: 100%;
    height: 223.44px;
    object-fit: cover;
    transition: transform .3s
}

.portfolio-item:hover .portfolio-image {
    transform: scale(1.05)
}

.portfolio-info {
    padding: 20px
}

.portfolio-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #fff
}

.portfolio-type {
    font-size: 14px;
    color: gold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500
}

@media (max-width:767px) {
    .main-slider {
        background-image: none;
        min-height: auto
    }
    .all-content section {
        padding: 20px 0
    }
    .all-content.shopify-page section {
        padding: 40px 0
    }
    .all-content.shopify-page .left-h2-heading .left-right-box H3,
    .common-portfolios-section h2,
    .shopify-benifit .heading H2,
    .shopify-page .cta-btn-nml h3,
    .shopify-page .wordpress-services h2 {
        font-size: 24px
    }
    .step-one {
        padding: 5px 25px;
        font-size: 25px
    }
    .whatsapp-function .mobile-whatsapp {
        display: block
    }
    .desktop-whatsapp {
        display: none
    }
    .portfolio-title {
        font-size: 36px
    }
    .portfolio-subtitle {
        font-size: 16px
    }
    .filter-tabs {
        flex-direction: column;
        align-items: center;
        gap: 10px
    }
    .filter-tab {
        border-radius: 8px !important;
        margin: 0
    }
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }
}

@media (max-width:480px) {
    .portfolio-section {
        padding: 40px 15px
    }
    .portfolio-title {
        font-size: 28px
    }
    .filter-tab {
        padding: 10px 20px;
        font-size: 14px
    }
}.footer-logo img {
    max-height: 76px;
}.container .col-md-4.col-sm-6.col-xs-12:nth-child(2) li:nth-child(3) {
    display: none !important;
}