@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&amp');

.banner-wrapper {
    width: 100%;
    display: flex;
    background-color: #133e45;
    position: relative;
}

    .banner-wrapper:after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 200px;
        height: 150px;
        background-image: url(../images/banner-round.png);
        opacity: .1;
    }

    .banner-wrapper:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 150px;
        background-image: url(../images/banner-round.png);
        opacity: .1;
    }

    .banner-wrapper .container {
        display: flex
    }

.left-img {
    width: 40%;
}

    .left-img .banner-img {
        padding-top: 150px;
        width: 100%;
    }

.right-area {
    width: 60%;
    display: flex;
    align-items: center;
}

    .right-area .padding {
        padding: 88px 0
    }

    .right-area h1 {
        font-family: 'Bubblegum Sans', cursive;
        margin-bottom: 15px;
        font-size: 50px;
        line-height: normal;
        color: #fff;
    }

        .right-area h1 span {
            color: #d55731
        }

    .right-area p {
        color: #fff;
    }

    .right-area .btn-round {
        padding: 15px 25px;
        margin: 0 10px 15px 0;
        color: #fff;
        border: 1px solid #fff;
        font-weight: 600;
        text-transform: uppercase;
    }

.about-section {
    background-color: #fff;
    padding: 95px 0;
}

    .about-section .sub-head {
        margin-bottom: 0;
        font-weight: 500
    }

    .about-section .card-wrapper {
        min-height: 140px;
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 20px;
        margin-bottom: 15px;
        background-color: #fff;
        border: 1px solid #ffefea;
        box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    }

    .about-section h2 {
        font-family: 'Bubblegum Sans', cursive;
        font-size: 42px;
    }

    .about-section .card-wrapper h3 {
        margin-bottom: 0;
        font-family: 'Bubblegum Sans', cursive;
        font-size: 24px;
        color: #d55731;
        order: 2;
    }

    .about-section .card-wrapper img {
        width: 40px
    }

    .about-section .card-wrapper h3 span {
        display: block;
        color: #133e45;
    }




/* features section wraper */
.features_section {
    padding: 75px 0;
    position:relative
    /* background: radial-gradient(#00000003 15%, transparent 16%), linear-gradient(45deg, transparent 49%, #ede7e70f 49% 51%, transparent 51%), linear-gradient(-45deg, #ffffff59 49%, #0000000a 49% 51%, transparent 51%);
    background-size: 3em 3em;
    background-color: #d5573129;*/
 
}
    .features_section::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../images/patterns.png);
        background-size: contain;
        opacity: .1;
    }
    .features_section .feature_detail {
        border-radius: 30px;
        position: relative;
   
        padding-top: 60px;
        padding-bottom: 20px;
        background: #fff;
        box-shadow: 0px 4px 30px #EDE9FE;
        z-index:1
    }

        /* features section image */

        .features_section .feature_detail .feature_img{ height:100%; position:relative}
        .features_section .feature_detail .feature_img img {
            max-width: 100%;
            bottom:-21px;
            position:absolute
        }

        /* features section box */

        .features_section .feature_detail .feature_box {
            max-width: 410px;
        }

            .features_section .feature_detail .feature_box .data_block {
                margin-bottom: 50px;
            }

                .features_section .feature_detail .feature_box .data_block h4 {
                    font-size: 20px;
                    font-weight: 600;
                    margin-top: 20px;
                }

        .features_section .feature_detail .left_data {
            text-align: right;
            
        }

        .features_section .feature_detail .right_data {
            padding-right: 130px;
        }

        .features_section .feature_detail .left_data .data_block .icon {
            margin-right: 0px;
        }

            .features_section .feature_detail .left_data .data_block .icon img {
                width: 70px
            }

        .features_section .feature_detail .right_data .data_block .icon {
            margin-left: 0px;
        }

            .features_section .feature_detail .right_data .data_block .icon img {
                width: 70px
            }

    .features_section .container {
        max-width: 1370px;
    }



.banner-area {
    background-color: #133e47
}

.box-inn img {
    width: 60px
}

.box-inn h3 {
    font-size: 20px
}

.box-inn {
    background-color: #fff;
    padding: 30px 13px;
    margin-bottom:15px;
    border: 1px solid#ffffff;
    box-shadow: 0px 3px 9px 0px rgb(231 227 226 / 25%);
    border-radius: 10px;
}

    .box-inn p {
        color: #000;
        margin-bottom:0;
    }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #133e45;
    border: none
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    background-color: #d55731;
    color: #fff;
    margin: 5px;
    padding: 15px
}

.nav-item .active {
    background-color: #133e45;
}

.counter-area .white {
    color: #fff;
}

.counter-area {
    background-image: url(https://abacusmaster.com/competition/IAO-2022/img/bg/bg1.jpg);
    background-attachment: fixed;
}

.iao-faq {
    /*  background-image: url(https://abacusmaster.com/competition/IAO-2022/img/bg/bg3.jpg);*/
}

    .iao-faq .btn-link {
        display: block;
        width: 100%;
        text-align: center;
        color: #ffc753;
        font-size: 18px;
        color: #d55731;
        font-weight:600
    }

    .iao-faq .card {
        border: none;
        background: none
    }

    .iao-faq .card-header {
        background-color: transparent;
        margin-bottom: 2px !important;
        border-radius: 15px !important;
    }

    .iao-faq .card-body {
        text-align: center;
        color: #000;
        background-color: #fffef1;
    }

.counter-area .nav-tabs {
    border: none
}

.iao-faq .card-body p {
    color: #000;
}

.single-feature .feature-icon img {
    width: 40px
}


.faq-wrapper{ padding:100px 0;}
    .faq-wrapper .container{ max-width:1370px}
    .faq-wrapper .nav-tabs {
        border: none
    }
    .category_tab {
        width: 100%;
        display: block
    }





/***

====================================================================
    team Section
====================================================================

***/
.team-section {
    position: relative;
    padding: 60px 0 80px;
    overflow: hidden;
}

    .team-section .sec-title {
        margin-bottom: 30px;
    }
       
        .team-block {
            position: relative;
            margin-bottom: 40px;
        }

    .team-block .inner-box {
        position: relative;
    }

        .team-block .inner-box:after {
            background: rgba(255, 255, 255, 0.3);
            content: "";
            position: absolute;
            top: 0;
            width: 100%;
            height: 0;
            opacity: 1;
            pointer-events: none;
        }

        .team-block .inner-box:hover:after {
            height: 100%;
            opacity: 0;
            -webkit-transition: all 400ms linear;
            transition: all 400ms linear;
        }

        .team-block .inner-box:hover .social-links {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
            visibility: visible;
        }
        .team-block .inner-box:hover .title{ color:#fff}
        .team-block .image-box {
            position: relative;
            padding: 2px 2px 0;
        }

        .team-block .image-box .image {
            padding: 18px 18px 0;
         
            border-radius: 500px 500px 0 0;
            margin-bottom: 0;
        }

            .team-block .image-box .image:before {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), color-stop(#ffffff), to(var(--theme-color1)));
                background: linear-gradient(to top, #ffffff, #ffffff, var(--theme-color1));
                border-radius: 500px 500px 0 0;
                z-index: -1;
                content: "";
            }

            .team-block .image-box .image img {
                position: relative;
                width: 100%;
                z-index: 1;
                -webkit-transition: all 400ms ease;
                transition: all 400ms ease;
            }

        .team-block .image-box .share-icon {
            position: absolute;
            top: 38px;
            right: 40px;
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: var(--theme-color1);
            border-radius: 50%;
            z-index: 2;
            cursor: default;
            color: #fff;
        }

        .team-block .image-box .social-links {
            position: absolute;
            right: 50px;
            top: 112px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            background-color: #ffffff;
            padding: 10px 0;
            z-index: 3;
            -webkit-transform: scale(0);
            transform: scale(0);
            -webkit-transform-origin: top;
            transform-origin: top;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all 400ms ease;
            transition: all 400ms ease;
        }

            .team-block .image-box .social-links:before {
                position: absolute;
                content: "";
                left: 50%;
                top: -5px;
                border-bottom: 5px solid #fff;
                border-right: 7px solid transparent;
                border-left: 7px solid transparent;
                margin-left: -7px;
            }

            .team-block .image-box .social-links a {
                position: relative;
                height: 35px;
                width: 40px;
                display: block;
                font-size: 14px;
                line-height: 35px;
                text-align: center;
                color: var(--theme-color2);
                -webkit-transition: all 300ms ease;
                transition: all 300ms ease;
            }

                .team-block .image-box .social-links a:hover {
                    color: var(--theme-color1);
                }

    .team-block .info-box {
        position: relative;
        padding: 15px 20px 20px;
        background-color: #ffffff;
        text-align: center;
    }

        .team-block .info-box:before {
            position: absolute;
            left: 0;
            bottom: 0;
            top: -125px;
            bottom: 0;
            width: 100%;
            content: "";
            background: -webkit-gradient(linear, left bottom, left top, from(#f4f4f4), to(transparent));
            background: linear-gradient(to top, #f4f4f4, transparent);
        }

        .team-block .info-box .name {
            font-size: 22px;
            letter-spacing: -0.05em;
            margin-bottom: 0;
        }

            .team-block .info-box .name:hover {
                color: var(--theme-color1);
            }

        .team-block .info-box .designation {
            position: relative;
            display: block;
            font-size: 12px;
            color: #777777;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
.bg-pattern-4 {
    background-image: url(../images/pattern-4.png);
}
.bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.iao-faq{ background-image:url(../images/faq-questions.png);}
/*** 

====================================================================
    Services Section
====================================================================

***/
.services-section {
    position: relative;
    padding: 120px 0 70px;
}

    .services-section .sec-title .text {
        margin-bottom: 20px;
    }
    .services-section .sec-title h2 {
        display: block;
        font-family: 'Bubblegum Sans', cursive;
    }
@media (max-width: 991.98px) {
    .services-section .sec-title .text {
        margin-top: 20px;
    }
}

.services-section .services-column {
    margin-bottom: 40px;
}

    .services-section .services-column .inner-column {
        position: relative;
        margin-right: -60px;
    }

@media (max-width: 991.98px) {
    .services-section .services-column .inner-column {
        margin-right: 0;
    }
}

.services-section .services-column .row {
    margin: 0 -5px;
}

    .services-section .services-column .row > div {
        padding: 0 5px;
    }

.services-section .banner-column {
    position: relative;
    margin-bottom: 50px;
}

.service-block {
    margin-bottom: 10px;
}

    .service-block .inner-box {
        position: relative;
        padding: 30px 30px 30px;
        background: #fff;
        -webkit-box-shadow: 0 10px 60px rgba(0, 0, 0, 0.07);
        box-shadow: 0 10px 60px rgba(0, 0, 0, 0.07);
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }

        .service-block .inner-box:hover:before {
            max-width: 100%;
        }

        .service-block .inner-box:hover::after {
            opacity: 0.2;
        }

        .service-block .inner-box:hover .count {
            opacity: 0.3;
            color:#fff
        }

        .service-block .inner-box:hover .icon {
            background-color: #ffffff;
            color: var(--theme-color1);
        }

        .service-block .inner-box:hover .title {
            color: #fff;
        }

        .service-block .inner-box:after {
            content: "";
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            height: 26px;
            background: -webkit-gradient(linear, left top, right top, from(#f4f4f4), to(transparent));
            background: linear-gradient(to right, #f4f4f4, transparent);
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
        }

        .service-block .inner-box:before {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            max-width: 0;
            background-color: #d55731;
            content: "";
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
        }

        .service-block .inner-box .count {
            position: absolute;
            top: 45px;
            right: 30px;
            color: #e6e6e6;
            font-size: 30px;
            font-weight: 200;
        }

        .service-block .inner-box .icon {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 66px;
            height: 66px;
            color: #fff;
            background: #133e45;
            font-size: 32px;
            border-radius: 50%;
            margin-bottom: 26px;
            z-index: 2;
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
        }

        .service-block .inner-box .title {
            margin-bottom: 0;
            font-family: 'Bubblegum Sans', cursive;
            letter-spacing:1px;
            font-weight: 800;
            position:relative;
            z-index:1;
        }

@media (max-width: 575.98px) {

    .service-block .inner-box .title br {
        display: none;
    }
}

.service-banner {
    position: relative;
    height: 100%;
    margin-left: 65px;
}

@media (max-width: 991.98px) {
    .service-banner {
        margin-left: 0;
        max-width: 400px;
        margin: 0 auto;
    }
}

.service-banner .bg-image {
    margin-bottom: 0;
    height: 100%;
}

 /*   .service-banner .bg-image::before {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: #133e45;
        opacity: 0.8;
        content: "";
    }*/

    .service-banner .bg-image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.service-banner .content {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    padding: 0 50px;
    padding-right: 40px;
}

@media (max-width: 575.98px) {
    .service-banner .content {
        padding: 30px 30px;
        bottom: 0;
    }
}

.service-banner .content .sub-title {
    display: block;
    text-transform: uppercase;
    color: #133e45;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
}

.service-banner .content .title {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.3em;
    margin-bottom: 40px;
}
/*.bg-pattern-2 {
    background-image: url(../images/pattern-2.jpg);
}*/


@media (max-width:992px ){

    .right-area .padding {
        padding: 66px 0;
    }
    .features_section .feature_detail{ padding:20px;}
    .feature_detail .center {
    
        padding:25px;
    }
    .features_section .feature_detail .left_data{ text-align:left}
    .features_section .feature_detail .feature_img img{ position:static}
    .faq-wrapper .container{ max-width:auto}
}
@media (max-width:768px ) {
    .left-img{ display:none}
    .right-area{ width:100%}
    .services-section {
      
        padding: 40px 0 70px;
    }

  


}