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*/ /* <!------------------ carrear and placements -------------------- --> */ .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; } /* <!------------------ carrear and placements end -------------------- --> */ /* 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------ */