@media(max-width:768px){
    .product-wrapper-full {
        display: flex;
        flex-direction: column;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #2147be;
    }
    .navbar-default .navbar-toggle {
        border-color: #fafbfd;
    }
    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
        height: 236px;
        background: #fff;
    }
}

@media(max-width:768px){
    .centy-cesfpro-diagram {
        width: 100%;
        object-fit: cover;
        padding: 0px;
        padding-right: 0px;
        padding-top: 50px;
    }
    .pre-order .btn-primary {
        justify-content: center;
        user-select: none;
        position: relative;
        white-space: nowrap;
        vertical-align: middle;
        outline: transparent solid 2px;
        outline-offset: 2px;
        width: 100%;
        line-height: 1.2;
        background-color: #FEC03B;
        border-color: #FEC03B;
        border-radius: 50px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-weight: 400;
        font-size: 16px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .hero {
        margin-top: 64px;
        background-image: url(../images/home/zz.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
    }
    .centy-cesfpro {
        background: #EDFDFE;
        margin-top: -20px;
    }
    .centy-cesfpro .btn-info {
        justify-content: center;
        user-select: none;
        position: relative;
        white-space: nowrap;
        vertical-align: middle;
        outline: transparent solid 2px;
        outline-offset: 2px;
        width: 100%;
        line-height: 1.2;
        background-color: #FEC03B;
        border-color: #FEC03B;
        border-radius: 50px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-weight: bold;
        font-size: 16px;
        margin-top: 20px;
    }
    .centy-cesfpro-description {
        padding: 3px;
        margin-top: 22px;
        padding-left: 0px;
        margin-bottom: 40px;
    }
    .centy-prime {
        margin-top: 25px;
    }
    .centy-prime-title h1 {
        font-weight: bold;
        color: #2147BE;
        text-align: center;
        margin-bottom: 42px;
        font-size: 30px;
    }
    .centy-learner-diagram {
        width: 100%;
        object-fit: cover;
        padding: 0px;
        padding-right: 0px;
        padding-top: 60px;
    }
    .centy-learner-description p {
        font-size: 17px;
        line-height: 1.5;
        letter-spacing: 0.1px;
        opacity: 0.9;
        margin-top: 20px;
        margin-bottom: 31px;
    }
    .centy-cesfpro-description p {
        font-size: 18px;
        line-height: 1.4;
        letter-spacing: 0.1px;
        opacity: 0.7;
        margin-top: 20px;
        margin-bottom: 31px;
    }
    .centy-learner .btn-info {
        justify-content: center;
        user-select: none;
        position: relative;
        white-space: nowrap;
        vertical-align: middle;
        outline: transparent solid 2px;
        outline-offset: 2px;
        width: 100%;
        line-height: 1.2;
        background-color: #FEC03B;
        border-color: #FEC03B;
        border-radius: 50px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-weight: 400;
        font-size: 16px;
        margin-top: 20px;
    }
    .centy-learner-description {
        padding: 0px;
        margin-top: 30px;
        padding-left: 0px;
        padding-bottom: 60px;
    }
    .centy-learner-description h2 {
        font-size: 30px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .hero-text-wrapper {
        margin-top: 111px;
        width: 100%;
        padding-bottom: 50px;
    }
    .hero-text h1 {
        font-size: 38px;
        line-height: 108%;
        color: #FEC03B;
        letter-spacing: 0rem;
        font-weight: bolder;
        margin-bottom: 20px;
    }
    .hero p {
        margin-top: 16px;
        margin-bottom: 24px;
        font-size: 17PX;
        font-weight: 400;
    }
    .centy-cesfpro {
        background: #EDFDFE;
        padding-top: 4px;
        padding-bottom: 17px;
    }
    .centy-os-diagram {
        width: 100%;
        object-fit: cover;
        padding: 0px;
        padding-top: 50px;
        padding-bottom: 24px;
    }
    .centy-os-description {
        padding-top: 90px;
        padding-left: 0px;
        padding-bottom: 42px;
        margin-top: 50px;
    }
    .centy-os-description h2 {
        font-size: 30px;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .centy-os-description p {
        font-size: 17px;
        line-height: 1.5;
        letter-spacing: 0.1px;
        opacity: 0.9;
        margin-top: 20px;
        margin-bottom: 31px;
    }
    .centy-os .btn-info {
        justify-content: center;
        user-select: none;
        position: relative;
        white-space: nowrap;
        vertical-align: middle;
        outline: transparent solid 2px;
        outline-offset: 2px;
        width: 100%;
        line-height: 1.2;
        background-color: #2147BE;
        border-radius: 50px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-weight: 400;
        font-size: 16px;
        margin-top: 20px;
    }
    .team-header {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        padding-bottom: 50px;
    }
    .team-header h1 {
        font-weight: bold;
        font-size: 30px;
        text-align: center;
        color: #2047BE;
        margin-bottom: 20px;
    }
    .about-us {
        padding-top: 0px;
        padding-bottom: 84px;
        background-color: #2047BE;
        opacity: 1;
        background-image: radial-gradient(#444cf7 1.8px, #2047BE 1.8px);
        background-size: 36px 36px;
    }
    .about-us-description {
        padding-top: 1px;
        margin-top: 20px;
        padding-left: 0px;
    }
    .about-us-diagram {
        width: 100%;
        object-fit: cover;
        padding: 0px;
        padding-top: 60px;
        padding-right: 0px;
    }
    .services-wrapper{
        padding-top: 30px;
        padding-bottom: 0px;
    }
    .product-services-title h1 {
        font-size: 30px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2047BE;
        margin-bottom: 21px;
    }
    .product-services {
        padding-top: 32px;
        padding-bottom: 50px;
    }
    .hero-about {
        margin-top: 64px;
        background-image: url(../images/about/marten-bjork-6dW3xyQvcYE-unsplash.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
    }
    .hero-about-text-wrapper {
        margin-top: 50px;
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .hero-about-text h1 {
        font-size: 35px;
        line-height: 105%;
        color: #FEC03B;
        letter-spacing: 0rem;
        font-weight: bolder;
    }
    .hero-about p {
        margin-top: 26px;
        margin-bottom: 24px;
        font-size: 16px;
        line-height: 1.5;
        /* font-weight: 400; */
        color: #fff;
    }

    .Customized-description {
        padding-top: 3px;
        padding-left: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
    }
    .hero-mwalimu-text-wrapper {
        margin-top: 140px;
        width: 100%;
    }
    .hero-mwalimu-text h1 {
        font-size: 38px;
        line-height: 102%;
        color: #2047BE;
        letter-spacing: 0rem;
        font-weight: bolder;
    }
    .hero-mwalimu-text-wrapper {
        margin-top: 78px;
        width: 100%;
        margin-bottom: 60px;
    }
    .navbar-default .navbar-nav>li>a {
        color:#0C0B0B;
        font-size: 15px;
        font-weight: 600;
    }
    .hero-mwalimu {
        margin-top: 64px;
        background-image: url(../images/mwalimu/wmalimu-hero.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
    }
    .why_choose h2 {
        text-align: center;
        font-weight: bold;
        color: #fff;
        margin-bottom: 45px;
        font-size: 30px;
    }
    .why-choose-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        padding-bottom: 35px;
    }
    .Customized {
        margin-top: -38px;
    }
    .Customized-description h2 {
        font-size: 30px;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .Customized-diagram img {
        width: 100%;
    }
    .Customized-diagram {
        width: 100%;
        object-fit: cover;
        padding: 10px;
        padding-bottom: 52px;
    }
    .centy-cesfpro-description h2 {
        font-size: 30px;
        line-height: 0;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .footer-logo img {
        width: 60%;
    }
    .assignment-diagram {
        width: 100%;
        object-fit: cover;
        padding: 0px;
        padding-right: 0px;
        padding-top: 0px;
    }
    .mwalimu-smart {
        margin-top: -35px;
        background: #f1f4ff;
        padding-top: 70px;
        padding-bottom: 90px;
    }
    .assignment-description h2 {
        font-size: 30px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .assignment-description {
        padding: 0px;
        margin-top: 0px;
        padding-left: 0px;
    }
    .mwalimu-smart-description {
        padding-top: 3px;
        padding-left: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
    }
    .mwalimu-benefits {
        background-color: #fff;
        margin-top: 30px;
        margin-bottom: 90px;
    }
    .mwalimu-smart-description h2 {
        font-size: 30px;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .mwalimu-smart-diagram {
        width: 100%;
        object-fit: cover;
        padding: 0px;
        padding-top: 0px;
        padding-bottom: 37px;

    }
    .mwalimu-smart-diagram img {
        width: 100%;
    }
    .mwalimu-benefits-diagram {
        width: 100%;
        object-fit: cover;
        padding: 0px;
        padding-right: 0px;
        padding-top: 0px;
    }
    .mwalimu-benefits-description {
        padding: 0px;
        margin-top: 39px;
        padding-left: 0px;
        padding-bottom: 0px;
    }
    .mwalimu-benefits-description h2 {
        font-size: 30px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
        margin-bottom: 36px;
    }
    .mwalimu-header h5 {
        font-size: 21px;
        line-height: 1.2;
        letter-spacing: 0.1px;
        color: #2147BE;
        text-align: center;
    }
    .card-container-2 h2 {
        font-weight: bolder;
        font-size: 30px;
        margin-bottom: 30px;
        color: #2147be;
    }
    .mwalimu-refer-description h2 {
        font-size: 30px;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .card-container h2 {
        font-weight: bolder;
        font-size: 30px;
        margin-bottom: 30px;
        color: #F6AB1A;
    }
    .mwalimu-benefits-info {
        margin-top: 0px!important;
        padding-bottom: 0px;
    }
    .mwalimu-header h2 {
        font-size: 40px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
        text-align: center;
        margin-bottom: 30px;
    }
    .card-container-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        padding-top: 30px;
        padding-bottom: 60px;
        margin-bottom: 40px;
        margin-top: 40px;
    }
    .mwalimu-pricing {
        background-color: #E7EBF5;
        padding-top: 37px;
        padding-bottom: 64px;
    }
    .mwalimu-refer-diagram img {
        width: 100%;
    }
    .mwalimu-refer-diagram {
        width: 100%;
        object-fit: cover;
        padding-bottom: 40px;
    }
    .mwalimu-refer-description {
        padding-top: 14px;
        padding-left: 0px;
        padding-bottom: 7px;
        margin-top: 0px;
    }
    .centy-learner {
        background-color: #F8F9FE;
        padding-top: 66px;
        padding-bottom: 1px;
    }
    .about-us-description h2 {
        font-size: 30px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #fff;
    }
    .centi-intro h1 {
        font-size: 56px;
        line-height: 102%;
        letter-spacing: 0rem;
        margin-bottom: 27px;
        font-weight: bolder;
        /* color: #2147BE; */
        background-image: linear-gradient(40deg, #FEC03B, #2147BE, #FEC03B);
        background-size: 100%;
        background-repeat: repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-background-clip: text;
        -moz-text-fill-color: transparent;
        width: 100%;
    }
    .centi-hero {
        width: 100%;
        padding-top: 0px;
        padding-bottom: 50px;
        background: #fff;
    }
    .centi-intro p {
        position: relative;
        font-size: 24px;
        line-height: 36px;
        font-weight: 500;
    }
    .centi-intro p {
        position: relative;
        font-size: 24px;
        line-height: 36px;
        font-weight: 500;
        margin-bottom: -20px;
    }
    .centi-image img {
        width: 100%;
        padding-top: 50px;
    }
    .centy-intros {
        width: 100%;
        text-align: left;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        padding-bottom: 9px;
    }
    .call-to-action {
        padding-top: 40px;
        padding-bottom: 54px;
        background: #FAFAFA;
    }
    .centy-intros h2 {
        color: #2047BE;
        font-weight: bold;
        line-height: 40px;
        font-size: 27px;
    }
    .intros-links {
        display: flex;
        justify-content: normal;
        align-items: flex-start;
        text-align: left;
        width: 100%;
        flex-direction: column;
    }
    .intros-links a {
        color: #F1B11F;
        font-size: 20px;
        font-weight: 600;
        /* padding: 20px 0px; */
        padding-top: 16px;
        padding-left: 0px;
        padding-right: 20px;
    }
    .device-info h2 {
        font-size: 35px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .device-info {
        padding-top: 40px;
    }
    .device-back {
        padding-top: 45px;
        padding-bottom: 55px;
    }
    .why-centi {
        padding: 20px 0px;
        background: #fafafa;
    }
    .why-intro h1 {
        font-size: 35px;
        line-height: 45px;
        margin-bottom: 65px;
        text-align: center;
        font-weight: bold;
    }
    .spec-title h3 {
        font-size: 20px;
        line-height: 36px;
        letter-spacing: 2px;
        font-weight: 500;
        color: #000;
    }
    .spec-wrapper2 .spec-title h3 {
        font-size: 20px;
        line-height: 36px;
        letter-spacing: 2px;
    }
    .spec-wrapper3 .spec-title {
        position: absolute;
        text-align: center;
        z-index: 1;
        margin-top: -348px;
        text-align: left;
        left: 0;
        margin-left: 30px;
    }
    .spec-wrapper3 .spec-title h3 {
        font-size: 20px;
        line-height: 36px;
        letter-spacing: 2px;
    }
    .spec-wrapper5 .spec-title {
        position: absolute;
        text-align: center;
        z-index: 1;
        margin-top: -220px;
        width: 100%;
        left: 0;
        margin-left: 0px;
    }
    .spec-wrapper6 .spec-title h3 {
        font-size: 20px;
        line-height: 36px;
        letter-spacing: 2px;
    }
    .spec-title {
        position: absolute;
        text-align: center;
        z-index: 1;
        margin-top: -139px;
    }
    .spec-wrapper2 .spec-title {
        position: absolute;
        text-align: left;
        z-index: 1;
        margin-top: 130px;
        left: 0;
        margin-left: 52px;
        width: 40%;
    }
    .spec-wrapper6 .spec-title{
        position:absolute;
        text-align: left;
        z-index:1;
        margin-top:-220px;
        width:100%;
        left:0;
        margin-left: 0px;
        padding-left: 10px;
    }
    .device-info p {
        font-size: 24px;
    }
    .spec-wrapper4 .spec-title {
        position: absolute;
        text-align: center;
        z-index: 1;
        margin-top: -139px;
        width: 100%;
    }
    .spec-wrapper5 .spec-image img {
        width: 100%;
        height: 100%;
    }
    .os-title {
        padding-top: 0px;
        padding-bottom: 40px;
    }
    .os-title h1 {
        font-size: 40px;
        line-height: 110%;
        letter-spacing: 0rem;
        font-weight: bolder;
        margin-bottom: 30px;
        color: #2047BE;
    }
    .centy-os-hero {
        background-color: #F3FBFF;
        padding-top: 120px;
        padding-bottom: 43px;
    }
    .call-to-wrapper h2 {
        color: #f1f4ff;
        font-weight: bold;
        line-height: 40px;
        font-size: 24px;
    }
    .call-to-wrapper {
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .call-to-os {
        background-color: #2047BE;
        padding-top: 33px;
        padding-bottom: 51px;
    }
    .noxty {
        padding-top: 49px;
        padding-bottom: 38px;
    }
    .noxty-details {
        margin-top: 35px;
    }
    .smart-teach {
        padding-top: 0px;
        padding-bottom: 60px;
        background-color: #f0f2ffad;
    }
    .smart-teach-details {
        margin-top: 46px;
        margin-bottom: 40px;
    }
    .smart-plus-details {
        margin-top: 0px;
        margin-bottom: 40px;
    }
    .smart-plus {
        padding-top: 20px;
        padding-bottom: 47px;
    }
    
    .smart-plus-details h2 {
        font-size: 35px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .smart-teach-details h2 {
        font-size: 35px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .noxty-details h2 {
        font-size: 35px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .centy-shop-details {
        margin-top: 49px;
    }
    .centy-shop {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .centy-shop-details {
        margin-top: 49px;
        padding-bottom: 20px;
    }
    .centy-shop-details h2 {
        font-size: 35px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .mwalimu-os {
        padding-top: 0px;
        padding-bottom: 60px;
        background-color: #f0f2ff5d;
    }
    .mwalimu-os-details {
        padding-top: 26px;
        padding-bottom: 60px;
    }
    .mwalimu-os-details h2 {
        font-size: 35px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .mwalimu-os-details .btn-info {
        justify-content: center;
        user-select: none;
        position: relative;
        white-space: nowrap;
        vertical-align: middle;
        outline: transparent solid 2px;
        outline-offset: 2px;
        width: 100%;
        line-height: 1.2;
        background-color: #F1B11F;
        border-color: #F1B11F;
        border-radius: 50px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-weight: bold;
        font-size: 16px;
        margin-top: 15px;
        transition: 0.6s;
    }
    .cesfpro-details {
        width: 100%;
        padding-top: 160px;
    }
    .cesfpro-details h2 {
        font-size: 40px;
        line-height: 106%;
        color: #E7EBF5;
        letter-spacing: 0rem;
        font-weight: bolder;
    }
    .cesfpro-details {
        width: 100%;
        padding-top: 102px;
    }
    .cesfpro-wrapper {
        width: 100%;
    }
    .cesfpro-wrapper p {
        color: #E7EBF5;
        font-size: 16px;
        text-align: center;
        line-height: 30px;
    }
    .cesfpro-agriculture {
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .cesfpro-agriculture-image {
        width: 100%;
        object-fit: contain;
        padding-top: 40px;
    }
    .cesfpro-drought {
        padding-top: 5px;
        padding-bottom: 18px;
    }
    .cesfpro-drought-details {
        padding-top: 11px;
    }
    .cesfpro-agriculture-details h2 {
        font-size: 35px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .cesfpro-drought-details h2 {
        font-size: 35px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1px;
        color: #2147BE;
    }
    .cesfpro-drought-image {
        width: 100%;
        object-fit: contain;
        padding-top: 40px;
    }
    .cesfpro-ecofund {
        padding-top: 3px;
        padding-bottom: 51px;
    }
    .cesfpro-ecofund-image {
        width: 100%;
        object-fit: contain;
        padding-top: 40px;
    }
    
}