:root {
    --main-color: #363f9f;
    --bs-primary-flutter: #290fc4;
    --bs-second-flutter: #7b33f1;
    --bs-light-flutter: #6048e812;
}

.block-chain-wrapper {
    background: linear-gradient(167deg, #280d57 0, #363f9f 100%) center center/cover no-repeat;
    position: relative;
    padding: 180px 0 80px;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center
}

.bubble-img-1 {
    position: absolute;
    left: 0;
    top: 40px
}

.bubble-img-2 {
    position: absolute;
    left: 0;
    bottom: 40px
}

.bubble-img-3 {
    position: absolute;
    right: 0;
    top: 40px
}

.bubble-img-4 {
    position: absolute;
    right: 0;
    bottom: 40px
}

.bubble-img-5 {
    position: absolute;
    left: 50%;
    bottom: 0
}

.grid-img-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
    transition: all ease .3s
}

.grid-img-wrapper::before {
    content: '';
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

.grid-img-wrapper:hover::before {
    background-color: rgba(59, 146, 238, .41)
}

.grid-img-wrapper .grid-main-img {
    height: 250px;
    object-fit: cover;
    width: 100%;
    transition: all ease .3s;
    border-radius: 8px
}

.grid-img-wrapper:hover .grid-main-img {
    transform: scale(1.1)
}

.grid-img-wrapper h4 {
    position: absolute;
    bottom: 70px;
    left: 30px;
    color: #fff;
    z-index: 2
}

.grid-icon-img {
    position: absolute;
    left: 30px;
    top: 30px;
    background: #000;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center
}

.customized-mobile-wrapper [class*=col-]:nth-child(6n+1) .grid-img-wrapper .grid-icon-img {
    background: #aa0909
}

.customized-mobile-wrapper [class*=col-]:nth-child(6n+2) .grid-img-wrapper .grid-icon-img {
    background: #ff6d16
}

.customized-mobile-wrapper [class*=col-]:nth-child(6n+3) .grid-img-wrapper .grid-icon-img {
    background: #03b7d5
}

.customized-mobile-wrapper [class*=col-]:nth-child(6n+4) .grid-img-wrapper .grid-icon-img {
    background: #6f58e1
}

.customized-mobile-wrapper [class*=col-]:nth-child(6n+5) .grid-img-wrapper .grid-icon-img {
    background: #199536
}

.customized-mobile-wrapper [class*=col-]:nth-child(6n+6) .grid-img-wrapper .grid-icon-img {
    background: #008cee
}

.customized-mobile-wrapper [class*=col-] .grid-img-wrapper .grid-icon-img img {
    filter: brightness(0) invert(1);
    width: 35px;
    height: 35px;
    object-fit: contain
}


/* work flow section css */
.work_flow {
    background: #f3f4ff;
}

.flow_wrp {
    text-align: center;
    padding: 20px 15px;
}

.work_flow .sub-heading {
    max-width: 700px;
    margin: auto;
}

.flow_icn {
    background: #d4e8ff;
    width: 90px;
    height: 90px;
    border-radius: 160px 125px;
    margin: 0px auto 15px;
}

.flow_icn img {
    width: 70px;
    margin-top: -6px;
}

.step {
    margin: 25px 0px 35px;
}

.step span {
    background: #0f4580;
    color: #fff;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 14px;
}

.flow_wrp h4 {
    font-size: 20px;
}

.flow_wrp p {
    color: #000;
    font-size: 15px;
    margin-bottom: 0px;
}

.work_flow_main::before {
    position: absolute;
    content: "";
    width: 75%;
    height: 2px;
    border: 1px dashed #ccc;
    left: 12%;
    top: 62px;
    bottom: inherit;
}

/* best app css start */
.best_app {
    background: #eeedff;
}

.best_app_left h2 {
    color: #000;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    margin-top: 15px;
    line-height: normal;
}

.best_app_left p {
    color: #555;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 146.569%;
    margin: 25px 0px;
}

.img_wrpp img {
    width: 60%;
    float: right;
}

.android_page .img_wrpp {
    text-align: center;
}

.android_page .img_wrpp img {
    width: 80%;
    float: unset;
}

.faq .card ul li {
    margin-bottom: 15px;
    font-size: 18px;
}

.services_sec .item .icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

@media only screen and (max-width:767.98px) {
    .block-chain-wrapper {
        padding-bottom: 50px
    }
}


@media (min-width: 1201px) {
    .hexgrid {
        padding-bottom: 6%;
    }

    .hex {
        width: 19.6% !important;
    }

    .hex:nth-child(11n + 7) {
        margin-left: 0 !important;
    }

    .hex:nth-child(11n + 6) {
        margin-left: 9.8% !important;
    }
}



@media (max-width: 600px) {


    .hex:nth-child(5n + 4) {
        margin-left: 16%;
    }

    .hex:last-child {
        margin-left: 16% !important;
    }
}

/* android app development css */
.android-banner {
    padding: 110px 0;
    background: linear-gradient(270deg, rgb(62, 164, 236) 0%, rgb(25, 106, 164) 100%);
    height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
}

.android_page .flow_wrp {
    text-align: left;
    background: #fff;
    box-shadow: 0px 17px 63px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 30px 15px;
    position: relative;
    overflow: hidden;
    height: 94%;
    margin-bottom: 20px;
}

.android_page .flow_wrp li {
    color: #000;
    font-size: 15px;
    margin-bottom: 0px;
    list-style: outside;
}

.android_page .flow_wrp .step {
    text-align: center;
}

.android_page .flow_wrp h4 {
    text-align: left;
    font-weight: 600;
    z-index: 9;
    position: relative;
}

.android-banner .mask-banner {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

.android_page .flow_icn::before {
    width: 100%;
    height: 100%;
    content: "";
    background: #d1d4f65e;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    opacity: 0;
    transition: all .5s ease-in;
    z-index: 0;
    border-radius: 50%;
}

.android_page .flow_wrp:hover .flow_icn::before {
    opacity: 1;
    bottom: -9px;
}

.android_page .flow_icn {
    margin: 0px 0 15px;
    width: 90px;
    height: 90px;
    background: linear-gradient(270deg, rgb(62, 164, 236) 0%, rgb(25, 106, 164) 100%);
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    position: relative;
}

.android_page .flow_icn img {
    width: unset;
    margin-top: 0;
}

.android_page .flow_wrp::before {
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgb(62, 164, 236) 0%, rgb(25, 106, 164) 100%);
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    content: "";
    transition: all 0.2s ease;
    z-index: 1;
    transform: scale(1, 0);
    transform-origin: bottom;
    transition: transform 500ms ease;
}

.android_page .flow_wrp:hover:before {
    transform: scale(1, 1);
    transform-origin: bottom;

}

.android_page .flow_wrp p {
    position: relative;
    z-index: 9;
}

.android_page .flow_wrp:hover h4,
.android_page .flow_wrp:hover p {
    color: #fff;
    transition: all 0.2s ease;
}

@media (max-width:991px) {
    .android-banner {
        padding-top: 145px;
        padding-bottom: 180px;
    }

    .android-banner .fluid-2 {
        padding-top: inherit !important;
    }

    .mob-right-images .image-two img {
        max-width: 200px;
    }

    .mob-right-images .image-one img {
        max-width: 170px;
    }
}

@media (max-width:767px) {
    .mob-right-images .image-two img {
        max-width: 210px;
    }

    .mob-right-images .image-one img {
        max-width: 180px;
    }
}

/*------------------New Ios page  css start here---------
---------------------------------------------------  */


  .ios_btn {
	display: inline-block;
	align-items: center;
	justify-content: center;
	width: max-content;
	padding: 15px 30px;
	background: #ffffff;
	color: #6c2491;
	border-radius: 5px;
	transition: all 0.3s;
	border: 1px solid #6c2491;
}
.ios_btn:hover{
    background: #ffffff;
    transition: all 0.3s;
    transform: translatey(-5px);
    box-shadow: 0 5px 5px #d034ff36!important;
    color: black;
    border-color: #6c2491;
}
  .sec-title .line {
    height: 2px;
    display: inline-block;
    width: 20px;
    background: #6c2491;
}
.sec-title .primary-text {
    color: #6c2491;
    font-size: 18px;
}
/* banner css start */
.ios-banner-sec {
    display: flex;
    align-items: center;
    background: radial-gradient(circle, rgb(135 12 203) 0%, rgb(136 19 203) 12%, rgb(149 41 201) 42%, rgb(108 36 145) 85%);
    background-size: cover;
    background-position: left;
    overflow: hidden;
    padding: 200px 0px 100px;
}
.ios-banner-sec .banner-left-txt .line {
    height: 2px;
    display: inline-block;
    width: 20px;
    background: #fff;
}
.ios-banner-sec .banner-left-txt h1 {
    font-size: calc(1.5rem + 1.3vw);
    line-height: 1.25;
    color: #fff;
    font-weight: 700;
}
.ios-banner-sec .banner-left-txt h1 span img {
    filter: hue-rotate(45deg);
}
.ios-banner-sec .banner-left-txt .primary-text {
    color: #fff;
}

.ios-banner-sec .banner-left-txt .banner-btn a:hover {
    background: #9d34ff;
    color: white;
    transition: all 0.3s;
    transform: translatey(-5px);
    box-shadow: 0 5px 5px #9d34ff 36;
    border-color: #9d34ff;
}
.ios-banner-sec .banner-img img {
    max-width: 70%;
}
.ios-banner-sec .banner-img .first-mob {
    z-index: 1;
}
.ios-banner-sec .banner-img .second-mob {
    z-index: 0;
    right: -210px;
}

/* Service Css */
.ios-service-sec .icon-box {
    background-color: #fff;
    padding: 40px 50px;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid #ebebff;
}
.ios-service-sec .icon-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 60px 0 rgba(67, 67, 67, 0.1);
}
.ios-service-sec .content-box {
    z-index: 3;
}
.ios-service-sec .icon-box:after, .ios-service-sec .icon-box:before {
    background-color: #6c2491;
    position: absolute;
    bottom: 0;
    content: "";
    height: 50%;
}
.ios-service-sec .icon-box:after {
    width: 50%;
    height: 5px;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    transition: all 0.5s ease;
}
.ios-service-sec .icon-box:hover:after {
    height: 5px;
    width: 100%;
    transition: all 0.5s ease;
}
.ios-service-sec .icon-box:hover .des, .ios-service-sec .icon-box:hover .icon, .ios-service-sec .icon-box:hover .mask-bg-iconbox, .ios-service-sec .icon-box:hover .title {
    color: #000;
    z-index: 1;
    transition-delay: 0.123s;
}
.ios-service-sec .icon-box .title {
    font-size: 20px;
    font-weight: 600;
}
.ios-service-sec .icon-box:hover .mask-bg-iconbox {
    opacity: 0.5;
}
.ios-service-sec .icon-box .mask-bg-iconbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0.5;
    z-index: -1;
}
.ios-service-sec .content-box .icon {
    width: 60px;
    margin-bottom: 20px;
    transition: all 0.3s;
}
.ios-service-sec .content-box .icon img {
    mix-blend-mode: multiply;
}
/* Ios About Css */
.ios-about-sec {
    background: radial-gradient(circle, rgb(135 12 203) 0%, rgb(136 19 203) 12%, rgb(149 41 201) 42%, rgb(108 36 145) 85%);
}
.ios-about-sec .about-img-box {
    height: 650px;
    width: 100%;
    max-width: 400px;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0 3rem rgba(0, 0, 0, 0.233);
    justify-self: center;
}
.ios-about-sec .about-img-box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.ios-about-sec .icon-circle {
    height: 3rem;
    width: 3rem;
    border: 1px solid #fff;
    border-style: dashed;
    background: #fff 3d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: large;
}
.ios-about-sec h5 {
    font-weight: 600;
    margin-top: 10px;
    color: white;
}
.ios-about-sec p {
    color: white;
}
/* Process Flow */
.ios-process-sec {
    overflow: hidden;
}
.ios-process-sec .icon-box1 {
    transition: all 0.3s ease-in-out;
    position: relative;
    height: 100%;
}
.ios-process-sec .icon-box1:hover {
    background-color: rgb(135 12 203);
}
.ios-process-sec .icon-box1:hover .icon-box1-visible {
    position: relative;
    opacity: 0;
    visibility: hidden;
}
.ios-process-sec .icon-box1:hover .icon-box1-hide {
    background-color: rgb(135 12 203);
    top: -23px;
    bottom: -29px;
    opacity: 1;
}
.ios-process-sec .icon-box1 .icon-box1-visible {
    vertical-align: top;
    transition: all 0.3s ease;
    padding: 48px 50px;
    border: 1px solid rgba(2, 1, 1, 0.062);
    opacity: 1;
    visibility: visible;
    background: white;
    height: 100%;
    z-index: 1;
}
.ios-process-sec .icon-box1 .icon-box1-visible .content .number {
    font-size: 26px;
    font-weight: 600;
    line-height: 19px;
    color: rgb(135 12 203);
    display: inline-block;
}
.ios-process-sec .icon-box1 .icon-box1-visible .content .icon {
    font-size: 45px;
    color: rgb(135 12 203);
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 20px;
}
.ios-process-sec .icon-box1 .icon-box1-visible .content .icon:before {
    width: 74px;
    height: 74px;
    border-radius: 100%;
    background-color: rgb(107 3 205 / 7%);
    content: "";
    position: absolute;
    bottom: -21px;
    left: 12px;
}
.ios-process-sec .icon-box1 .icon-box1-hide {
    transition: all 0.3s ease;
    padding: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
}
.ios-process-sec .icon-box1 .icon-box1-hide .icon {
    color: #fff;
    font-size: 40px;
}
.ios-process-sec .icon-box1 .icon-box1-hide .number {
    color: #a721f0;
    background: rgba(255, 255, 255, 0.2);
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.03em transparent;
    font-size: 70px;
    font-weight: 600;
    line-height: 80px;
}
.ios-process-sec .icon-box1 .icon-box1-hide .title {
    margin-top: 0px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 24px;
}
.ios-process-sec .icon-box1 .icon-box1-hide .title {
    color: #fff;
}
.ios-process-sec .icon-box1 .icon-box1-hide .des {
    color: #fff;
    margin-bottom: 2px;
}
/* Cta Css */
.ios-cta-sec {
    background: radial-gradient(circle, rgb(135 12 203) 0%, rgb(136 19 203) 12%, rgb(149 41 201) 42%, rgb(108 36 145) 85%);
}


/*------------------New Ios page  css END---------
---------------------------------------------------  */

/* android type */
.android-type {
    background: #1f74b0;
}

.service-style {
    margin-bottom: 20px;
    padding: 40px 18px 35px;
    border-radius: 7px;
    background-color: #fff;
    transition: all 0.4s ease-in-out;
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    text-align: center;
    margin-top: 20px;
    box-shadow: 0 2px 5px 0 #0000001a, 0 -1px 5px 0 #0000000d;
}

.service-style .icon img {
    height: 40px;
    display: inline-block;
    color: #1f74b0;
    margin-bottom: 20px;
}

.service-style a {
    color: #2279b6;
    text-transform: capitalize;
}

.service-style:hover {
    background: #c7e6f9;
    box-shadow: rgb(234, 234, 234) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.3) -3px -3px 6px 1px inset;
}

.service-style:hover a,
.service-style:hover i {
    color: #2279b6;
}

.service-style:hover img {
    filter: invert(0);
}

.bg-grad-common {
    background: linear-gradient(270deg, rgb(62, 164, 236) 0%, rgb(25, 106, 164) 100%) !important;
}

.award-winning-wrapper a {
    color: #1b6da8;
}

.icon_panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.icon_panel .tech__icon figure {
    background: #fff;
    border-radius: 15px;
    width: 130px;
    height: 130px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 35px rgba(199, 199, 199, 0.7);
}

.icon_panel .tech__icon figure img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.tech__icon span {
    padding-top: 15px;
    text-align: center;
    display: block;
}

.tech__icon {
    margin: 20px 19px;
}

.tech-tab-content p {
    font-size: 15px;
    margin-bottom: 50px;
}

.btn-grad {
    background: linear-gradient(270deg, rgb(62, 164, 236) 0%, rgb(25, 106, 164) 100%) !important;
    border: 1px solid #2279b6 !important;
}

.btn-grad:hover {
    color: #2279b6 !important;
    background: transparent !important;
}

.c-heading {
    text-align: center;
}

.c-heading h2 {
    color: #2279b6;
}

.content-wrap {
    .cont-wrap {
        position: relative;

        li {
            position: relative;

            i {
                position: absolute;
                left: -30px;
                top: 4px;
                background: #1c6fab;
                padding: 0;
                border-radius: 15px;
                font-size: 11px;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                color: #fff;
            }
        }
    }
}

/* process section */


.single-provide-solutions {
    z-index: 1;
    margin-top: 30px;
    overflow: hidden;
    display: block;
    position: relative;
    transition: all 0.3s ease-in-out;
    background-repeat: no-repeat;
    background-color: #eef4fc;
    background-position: bottom right;
    background-image: url('../img/tech-android/process-bg.png');
    height: 90%;
}

.single-provide-solutions .number {
    top: -14px;
    left: -10px;
    display: block;
    font-size: 96px;
    font-weight: 700;
    line-height: 96px;
    position: absolute;
    color: rgba(33, 30, 59, 0.05);
}

.single-provide-solutions .content {
    padding: 85px 20px 20px;
}

.single-provide-solutions::after {
    top: 0;
    left: 0;
    height: 0%;
    width: 100%;
    z-index: -1;
    content: "";
    position: absolute;
    transition: all 0.3s ease-in-out;
    background: #086ad7;
}

.single-provide-solutions .content h4 {
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
    font-size: 22px;
    color: #1b6da8;
}

.single-provide-solutions .content p {
    color: #000;
    transition: all 0.3s ease-in-out;
}

.single-provide-solutions:hover .content h4,
.single-provide-solutions:hover .content p {
    color: #FFF;
}

.single-provide-solutions::after {
    top: 0;
    left: 0;
    height: 0%;
    width: 100%;
    z-index: -1;
    content: "";
    position: absolute;
    transition: all 0.3s ease-in-out;
    background: #2279b6;
}

.single-provide-solutions:hover::after {
    height: 100%;
}

/* Flutter page css Start */
.flutter-banner {
    padding: 110px 0;
    background: transparent linear-gradient(90deg, var(--bs-primary-flutter) 0%, var(--bs-second-flutter) 100%) 0% 0% no-repeat padding-box;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    background-image: url("../img/flutter-img/banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;
    padding: 150px 0;
    background-color: var(--bs-light-flutter);
}

.flutter-banner .btn-white-light,
.flutter-grad-common .btn-white-light {
    color: var(--bs-primary-flutter);
}

.flutter-banner .btn-white-light i,
.flutter-grad-common .btn-white-light i {
    line-height: 49px;
}

@media (max-width:1366px) {
    .flutter-banner {
        height: 100%;
        background-position: top left;
    }

}

@media (max-width:991px) {
    .flutter-banner {
        padding-top: 145px;
        padding-bottom: 180px;
    }
}

@media (max-width: 767px) {
    .flutter-banner {
        padding-top: 45px;
        padding-bottom: 45px;
    }
}

.cm-heading h2 {
    color: var(--bs-primary-flutter);
    font-size: 35px;
}


.flutter-content .btn-grad {
    background: transparent linear-gradient(90deg, var(--bs-primary-flutter) 0%, var(--bs-second-flutter) 100%) 0% 0% no-repeat padding-box !important;
    border: 1px solid var(--bs-primary-flutter) !important;
}

.flutter-content .btn-grad:hover {
    color: var(--bs-primary-flutter) !important;
    background: transparent !important;
}

.flutter-grad-common {
    background: transparent linear-gradient(90deg, var(--bs-primary-flutter) 0%, var(--bs-second-flutter) 100%) 0% 0% no-repeat padding-box !important;
}

/* -------------Features section-------------- */

.feature-info {
    margin-left: 106px;
}

#features .featured-border1 {
    border-bottom: 1px solid #ededed;
    border-right: 1px solid #ededed;
}

#features .featured-border2 {
    border-bottom: 1px solid #ededed;
}

#features .featured-border3 {
    border-right: 1px solid #ededed;
}

#features .feature-item {
    padding: 22px;
    overflow: hidden;
    transition: all .8s ease;
    position: relative;
    min-height: 200px;
    border: 1px solid #ededed;
    margin-bottom: 25px;
    background-color: #fff;
}

#features .feature-item .feature-icon {
    background: var(--bs-light-flutter);
    width: 90px;
    height: 90px;
    margin: 0px auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-bottom: 0px;
    margin-bottom: 0px;
    text-align: center;
    display: block;
    border-radius: 50%;
    position: relative;
    margin-right: 30px;
    margin-top: 12px;
    position: absolute;
    top: 15px;
}
#features .feature-item .feature-icon img {
    color: var(--bs-primary-flutter);
    position: absolute;
    left: 50%;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

#features .feature-item h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

#features .feature-item p {
    font-size: 16px;
    display: block;
    margin-bottom: 0;
}

#features .feature-item:hover {
    box-shadow: 0px 0px 25px 0px rgba(95, 95, 95, 0.24);
    transition: all .8s ease;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#features .feature-item:hover .feature-icon {
    background: #DEE3FB;
    transition: all .8s ease;
}


#features .feature-item.featured-border1 .feature-icon{
    background: #e9d8ff63;
}
#features .feature-item.featured-border2 .feature-icon{
    background: #ffe8ed;
}
#features .feature-item.featured-border3 .feature-icon{
    background: #ffe3dfb0;
}
#features .feature-item.featured-border4 .feature-icon{
    background: #1772f31a;
}

#features .feature-item.featured-border1:hover .feature-icon{
    background: #6830b1;
}
#features .feature-item.featured-border2:hover .feature-icon{
    background: #fe4672;
}
#features .feature-item.featured-border3:hover .feature-icon{
    background: #fb634a;
}
#features .feature-item.featured-border4:hover .feature-icon{
    background: #0868f3;
}
#features .feature-item:hover .feature-icon img {
	filter: invert(1) brightness(999);
}
/* -------------Features section-------------- */
/* content wrap */

.flutter-content {
    .cont-wrap {
        position: relative;
        padding-left: 0;

        li {
            position: relative;
            margin: 0 0 20px;
            padding: 20px;
            border-style: solid;
            border-width: 0 0 0 5px;
            border-color: var(--bs-primary-flutter);
            border-radius: 4px;
            box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, .08);

        }
    }
}

#features {
    background: var(--bs-light-flutter);
}

#light-featured .light-feature-item {
    transition: all .8s ease;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0px 0px 30px 0px rgba(42.000000000000156, 22.000000000000014, 139, .09);
    padding: 20px;
    height: calc(100% - 20px);
}

#light-featured .light-feature-item .light-feature-icon {
    background: var(--bs-light-flutter);
    width: 70px;
    height: 70px;
    margin: 0px auto;
    margin-top: 0px;
    margin-right: auto;
    text-align: center;
    display: block;
    border-radius: 50%;
    position: relative;
    border: 1px solid var(--bs-primary-flutter);
    transition: all .8s ease;
    line-height: 70px;
}

#light-featured .light-feature-item .light-feature-icon i {
    font-size: 25px;
    color: var(--bs-primary-flutter);
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

#light-featured .light-feature-item .light-feature-info h4 {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 5px;
}

#light-featured .light-feature-item .light-feature-info p {
    font-size: 16px;
    display: block;
    margin: 0;
}

#light-featured .light-feature-item:hover .light-feature-icon {
    background: var(--bs-primary-flutter);
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

#light-featured .light-feature-item:hover {
    box-shadow:0px 0px 30px 0px rgba(42.000000000000156, 22.000000000000014, 139, .15);
}

#light-featured .light-feature-item:hover .light-feature-icon img {
    filter: invert(1) brightness(5);
}

#light-featured .right-feature-info h3 {
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 45px;
    margin-top: -6px;
}

#light-featured .right-feature-info p {
    font-size: 16px;
    display: block;
}

.light-feature-info {
    margin-top: 15px;
}

/* Flutter page css End */