EVOLUTION-NINJA

Edit File: indexpagestyle.css

.mainbanner {
        margin-top: -61px;
    }

.bannerdetails {
        width: 82%;
        margin: auto;

}

.banblocks {

padding-block: 10px;
        display: flex;
        flex-direction: column;

justify-content: center;
    }

.ban1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.banpara1 {
        font-size: 17px;
        font-weight: 500;
        font-family: "Barlow", sans-serif;
        color: #323232;

}

.banpara2 {
        color: #001740;
        font-size: 45px;
        font-weight: 600;
        font-family: "Barlow", sans-serif;
    }

.banpara3 {
        color: #2B2B2B;
        font-size: 18px;
        font-weight: 500;
        font-family: "Barlow", sans-serif;

}

.successstories {
        border: none;
        outline: none;
        width: 191px;
        background-image: linear-gradient(#001740, #165CD8);
        color: #fff;
        font-size: 19px;
        font-weight: 500;
        font-family: "Barlow", sans-serif;
        border-radius: 41px;
        padding: 9px;
        margin-bottom: 7px;
    }

.watchvideo {
        outline: none;
        border: 1px solid #072D70;
        color: #021C4A;
        border-radius: 41px;
        font-size: 19px;
        font-weight: 500;
        padding: 9px 20px;
        margin-left: 15px;
        font-family: "Barlow", sans-serif;

}

/* about jayblues  -------  */
    .jaybluesabout {
        background-image: linear-gradient(#F0FCFF, #E2EFFF);
        width: 83%;
        margin: auto;
        border-radius: 28px;
    }

.aboucontent {
        padding: 25px;

}

.abouheading {
        font-size: 27px;
        font-weight: 700;
        font-family: "Barlow", sans-serif;
        color: #011B49;
        margin: 0;
    }

.abouparas {
        font-size: 18px;
        font-weight: 500;
        font-family: "Barlow", sans-serif;
        color: #333333;
    }

/* about jayblues end -------  */
    /* ---------------why us -------------- */
    .whyhead {
        font-size: 22px;
        font-weight: 600;
        font-family: "Barlow", sans-serif;
        color: #011B49;
        margin-top: 22px;
        margin-left: 16px;
    }

.whyul {
        margin: 0;
        padding: 20px 0px;
    }

.whyul>li {
        color: #333333;
        font-size: 17px;
        font-weight: 500;
        font-family: "Barlow", sans-serif;
        list-style-type: none;

}

.whyusblock {
        background-image: url("<?php echo base_url('public/assets/images/WhyUs.png');?>");
        background-repeat: no-repeat;
        background-position: top center;
        padding-top: 90px;
        margin-top: 17px;

}

.whydetails {
        width: 83%;
        margin: auto;
        /* display: flex;
            justify-content: space-around;
            align-items: center; */

display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

.whydet {
        /* border: 1px solid; */
        width: 350px;
        background-color: white;
        padding: 5px 11px;
        height: auto;
        position: relative;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

.whyfloat {
        background-color: #E7F1FF;
        border-bottom-left-radius: 114%;
        border-top-left-radius: 19px;
        width: 135px;
        height: 118px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -15%;
        right: -23px;
    }

.dot {
        margin-right: 7px;
    }

/* -----------our services -----------  */
    .ourservices {
        background-color: #E7F1FF;
        padding-top: 30px;
        padding-bottom: 81px;
        margin-top: 37px;
    }

.orhead {
        width: 83%;
        margin: auto;
    }

.servicesjay {
        width: 83%;
        margin: auto;
        margin-top: 15px;
        overflow-x: hidden;

}

.ourparaservice {
        color: #2F2F2F;
        font-size: 16px;
        font-weight: 600;
        font-family: "Barlow", sans-serif;
        margin: 0;
    }

.ourservicesheading {
        color: #001740;
        font-size: 28px;
        font-weight: 700;
        font-family: "Barlow", sans-serif;

margin-bottom: 2px;
    }

.servicedetails {

width: 400px;
        /* border: 1px solid; */
        text-align: center;
        padding: 20px;
        border-bottom: 10px solid #00337D;
        border-radius: 17px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        background-color: white;

}

.servicesboduhead {
        color: #00337D;
        font-size: 18px;
        font-weight: 700;
        font-family: "Barlow", sans-serif;
    }

.servicepara {
        color: #2B2B2B;
        font-size: 15px;
        font-weight: 500;
        font-family: "Barlow", sans-serif;
    }

.servicesbutton {
        border: none;
        outline: none;
        color: #2977DA;
        font-size: 16px;
        font-weight: 600;
        font-family: "Barlow", sans-serif;
        background: none;

}

.servicesbody {
        margin-top: 15px;
    }

/* ---- owl carosal  */
    /* Equal Heights for OwlCarousel 2 */
    .owl-carousel {
        .owl-stage {
            display: flex;
        }

.owl-item {
            display: flex;
            /* flex: 1 0 auto; */
        }

.thumbnail {
            display: flex;
            flex-direction: column;
            margin: 0 15px;

.caption {
                display: flex;
                flex: 1 0 auto;
                flex-direction: column;

.flex-text {
                    flex-grow: 1;
                }
            }
        }
    }

.owl-dots {
        display: none;

}

.owl-prev {
        background-color: #90C1FF;
        border: none;
        position: absolute;
        left: 48%;
        transform: translateX(-50%);
        margin-top: 8px;
        padding: 4px 18px;
        font-size: 30px;
        font-weight: 600;
        border-radius: 11px;
        /* color: beige; */
        outline: none !important;
    }

.owl-next {
        background-color: #90C1FF;
        border: none;
        position: absolute;
        left: 51%;
        transform: translateX(-31%);
        margin-top: 8px;
        padding: 4px 18px;
        font-size: 30px;
        font-weight: 600;
        border-radius: 11px;
        outline: none !important;

}

/* how do we train desktop */
    .howDoWw {
        width: 93%;
        margin: auto;
        height: auto;
        text-align: center;
    }

.hoDoHeading {
        font-size: 28px;
        font-weight: 700;
        color: #001740;

}

.howDopara {
        font-size: 21px;
        font-weight: 700;
        color: #2F2F2F;
        margin-bottom: 7px;
        padding: 3px 55px;

}

.howtraindetails {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 35px 21px;
        width: 95%;
        margin: auto
    }

.howtarindetail {
        display: flex;
        align-items: center;
        text-align: left;
        border-radius: 13px;
        border-left: 6px solid #2977DA;
        box-shadow: 0px 0px 4px #ccc;
    }

.trdet {
        padding: 3px 9px;
    }

.trainhead {
        font-size: clamp(14px, 2vw, 19px);
        font-weight: 500;
        color: #00337D;
        margin: 0;
        font-family: "Barlow", sans-serif;

}

.trainpara {
        font-size: clamp(13px, 2vw, 14px);
        font-weight: 500;
        color: #2B2B2B;
        margin: 0;
        font-family: "Barlow", sans-serif;

}

/* how do we train desktop  end*/
    /*   */
    .ourcarrear {
        width: 81%;
        margin: auto;
        background-image: url('public/assets/images/tech-bg-1 1.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 6px;
        background-color: #F0FCFF;
        border-radius: 12px;
    }

.carrearblock {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 23px;
    }

.carrearheading {
        font-size: clamp(35px, 2vw, 45px);
        letter-spacing: 1px;
        font-weight: 700;
        color: #001740;
        word-spacing: 7px;
        font-family: "Barlow", sans-serif;
    }

.carraerpara {
        font-size: 24px;
        font-family: "Barlow", sans-serif;
        font-weight: 500;
        color: #2B2B2B;
    }

.carrearrolesbtn {
        border: none;
        outline: none;
        background-image: linear-gradient(#001740, #165CD8);
        width: 200px;
        padding: 7px 12px;
        color: #fff;
        border-radius: 45px;
        font-weight: 500;
        font-size: 19px;
    }

/*   */

/* why choose us blocxk  ----  */
    .whuychooseusblock {
        margin-bottom: 10px;
    }

.whyusdetail {
        width: 83%;
        margin: auto;
        position: relative;

}

.whyusiamgeblock {
        animation: whychooseimf 0.7s linear;
    }

.whyusdetailsblock {
        box-shadow: rgba(39, 126, 177, 0.1) 0px 0px 16px;
        background-color: rgba(255, 255, 255, 0.767);
        padding: 27px;
        border-top-left-radius: 45px;
        height: 459px;
        margin-top: auto;
        position: absolute;
        left: 35%;
        top: 10%;
        animation: whychoose 0.7s linear;
    }

.whyuspara1 {
        font-size: 16px;
        font-family: "Barlow", sans-serif;
        font-weight: 600;
        color: #2F2F2F;
    }

.whyushead1 {
        font-size: 27px;
        font-family: "Barlow", sans-serif;
        font-weight: 700;
        color: #001740;
    }

.whyuspara2 {
        font-size: 19px;
        font-family: "Barlow", sans-serif;
        font-weight: 500;
        color: #2B2B2B;

}

.whyusreadbtn {
        text-decoration: none !important;
        background-image: linear-gradient(#001740, #165CD8);
        width: 200px !important;
        padding: 9px 24px;
        border-radius: 45px;
        font-weight: 500;
        font-size: 19px;
        color: white !important;
    }

.youvideojay {
        display: flex;
        justify-content: flex-end;
    }

.ytvideojayblues {
        width: 57%;
        height: 219px
    }

/* why choose us blocxk  end----  */

@media (min-width:1001px) and (max-width:1356px) {
        .servimage {
            width: 100%;
            height: 184px;
        }

/* ------- how do we train  */
        .howtraindetails {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 19px 21px;
        }

.jaybluesabout {
            margin-top: 54px;
        }

.ytvideojayblues {
            width: 62%;
            height: 185px;
        }

.whyusdetailsblock {

padding: 19px;
            height: auto;
            position: absolute;
            left: 50%;
            top: 10%;
        }

.whydetails {
            grid-template-columns: repeat(3, 1fr);
            gap: 19px;
        }

/* carrear and placemennts  */
        .ourcarrear {
            width: 89%;
        }

}

@media (min-width:629px) and (max-width:1000px) {
        .mainbanner {
            margin-top: 17px;
        }

.servicedetails {

width: 300px;
        }

.servimage {
            width: 100%;
        }

.jaybluesabout {
            width: 93%;

}

.owl-next {
            left: 54%;
        }

.whydetails {
            width: 93%;
            grid-template-columns: repeat(2, 1fr);
        }

.whydet {
            width: auto;
        }

/* ------- how do we train  */
        .howtraindetails {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
        }

/*----------- our carrear ---------------  */
        .ourcarrear {
            width: 92%;
        }

/*----------- our carrear end---------------  */

/* why choose  */
        .whyusdetail {
            width: 93%;
        }

.whyusdetailsblock {
            height: auto;
            position: relative;
            left: initial;
            top: initial;
            margin-top: 16px;
        }

.ytvideojayblues {
            width: 100%;
            height: 388px;
        }

.youvideojay {
            margin-top: 22px;
        }

}

@media only screen and (max-width:628px) {
        .bannerdetails {

width: 95%;
        }

.mainbanner {
            margin-top: 17px;
        }

.bannerimag {
            width: 100%
        }

.banpara2 {
            color: #001740;
            font-size: 36px;
        }

/* about jayblues  -------  */
        .jaybluesabout {
            width: 95%;
        }

.aboucontent {
            padding: 15px;
        }

.abouparas {
            font-size: 17px;
        }

/* about jayblues end -------  */
        /* why details ---------   */
        .whydetails {
            grid-template-columns: repeat(1, 1fr);
            gap: 19px;

}

.whyusblock {

padding-top: 54px;
            padding-bottom: 18px;
        }

.whydet {
            width: 100%;
        }

.owl-prev {
            position: absolute;
            left: 45%;
        }

/* why details  end---------   */
        /*---------- our services ----------  */

.servicesjay {
            width: 94%;
        }

.servicedetails {
            width: auto;
        }

.servimage {
            width: 100%;
        }

.thumbnail {
            margin: 0;
        }

/* ------- how do we train  */
        .howtraindetails {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 19px 21px;
        }

.howtarindetail {
            flex-direction: column;
            padding: 12px;
            border: none;
        }

.trdet {
            margin-top: 20px;
        }

/* ------- how do we train  end*/

/*----------- our carrear ---------------  */
        .ourcarrear {
            width: 93%;
        }

/*----------- our carrear end---------------  */

/* why choose us --------  */
        .whyusdetail {
            width: 94%;
        }

.whyusdetailsblock {

padding: 27px;
            border-top-left-radius: 45px;
            height: auto;
            margin-top: auto;
            position: relative;
            left: initial;
            top: initial;
            animation: whychoose 0.7s linear;
        }

.ytvideojayblues {
            width: 100%;
            height: auto;
            margin-top: 25px;
        }

}

/* keyframe for why choose us ------  */

@keyframes whychoose {

0% {
            transform: translate(+100px, 40px)
        }

100% {
            transform: translate(0);
        }

}

@keyframes whychooseimf {

0% {
            transform: translate(-40px, -80px)
        }

100% {
            transform: translate(0);
        }

}

/* keyframe for why choose us end------  */