section{ min-height: 100px; position: relative; z-index: 7;} body{ background: #fff;} .homeSec1{ padding-top: 0px; /*margin-bottom: -177px;*/ background-color: #000; height:80vh; position: relative;} .homeBanner, .homeBanner>div, .homeBanner>div>div{ width: 100%; height: 100%;} .homeBanner .bannerSlide{ height: 100%; width: 100%; overflow: hidden; position: relative;} .homeBanner .bannerSlide img{width: 100%; opacity:0;} .animated{-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} .delay1{-webkit-transition-delay:0.4s; transition-delay:0.4s;} .delay2{-webkit-transition-delay:0.7s; transition-delay:0.7s;} .bannerinfo-box1{ width: 100%; height: auto; max-width: 1053px; margin: 0 auto; position: absolute; left: 0; right: 0; bottom: 0; z-index: 22; } .bannerinfo-box1 img{ width: 100%;opacity: 1!important; } /*.white-round1{position: absolute; left: 56px; bottom: 255px; width: 16px; height: 16px; border-radius: 50%; background: #fff; } .white-round2{position: absolute; right: 258px; top: 48px; width: 32px; height: 32px; border-radius: 50%; background: #fff; } .white-round3{position: absolute; left: 469px; bottom: 134px; width: 15px; height: 15px; border-radius: 50%; background: #fff; } .white-round4{position: absolute; right: 382px; bottom: 37px; width: 11px; height: 11px; border-radius: 50%; background: #fff; } .bannerinfo-box1-text{ position: absolute; left: 0; right: 0; top: 120px; max-width: 780px; margin: 0 auto; text-align: center; } .bannerinfo-box1-text h2{ width: 100%; height: auto; display: block; font-size: 74px; font-weight: 700; color: #fff; line-height: 74px; padding-bottom: 20px; text-align: center; text-transform: uppercase;} .bannerinfo-box1-text h3{ width: 100%; height: auto; display: block; font-size: 19px; font-weight: 400; color: #fff; line-height: 22px; padding-bottom: 20px; text-align: center; } .bannerinfo-box1-text small a{ width: auto; height: 29px; background: #ed161f; display: table; margin: 0 auto; padding: 0px 15px 0px 15px; font-size: 12px; font-weight: 400;color: #fff; line-height: 29px; background-image: linear-gradient(0, #00d764, #00d764);background-size: 0;transition: .8s;background-repeat: no-repeat; border: 0px solid #00a34c; text-transform: uppercase;} .bannerinfo-box1-text small a:hover {border: 0px solid #00d764; background-size: 100%;color: #fff;}*/ /* krishna start */ .bannerImg{background:url("../images/banner1.jpg") no-repeat 50% 100%; background-size: cover; width: 100vw; height:100%; position: absolute; left:0; top:0; margin: auto; opacity: 0; visibility: hidden;} .bannerVideo{ background-color: #000; width: 100vw; height:auto; position: absolute; left:0; right:0; bottom:0; margin: auto;} .bannerinfo-box1-text{ position: absolute; left: 0; right: 0; bottom:25vh; max-width: 780px; margin: 0 auto; text-align: center; } .bannerinfo-box1-text h2{ width: 100%; height:75px; display: block; font-size: 74px; font-weight: 700; color: #fff; line-height: 74px; margin-bottom: 20px; text-align: center; text-transform: uppercase; overflow: hidden;} .bannerinfo-box1-text h2 span{ display: block;} .bannerinfo-box1-text h3{ width: 100%; height: auto; display: block; font-size: 18px; font-weight: 400; color: #fff; line-height: 22px; padding-bottom: 20px; text-align: center; overflow: hidden; } .bannerinfo-box1-text small a{ width: auto; height: 29px; background: #ed161f; display: table; margin: 0 auto; padding: 0px 15px 0px 15px; font-size: 12px; font-weight: 400;color: #fff; line-height: 29px; background-image: linear-gradient(0, #00d764, #00d764);background-size: 0;transition: .8s;background-repeat: no-repeat; border: 0px solid #00a34c; text-transform: uppercase;} .bannerinfo-box1-text small a:hover {border: 0px solid #00d764; background-size: 100%;color: #fff;} .orbitHolder{ width: 70vw; height: 55vh; position:absolute; left: 0; right: 0; bottom: 0; margin: auto;} .orbitCenter { width: 100px; height: 100px; background: #00d764; border-radius: 50%; margin: 0 auto; position: absolute; left: 0; right: 0; bottom: -50px;} .orbitHolderInner{ width: 70vw; height: 65vh; position:absolute; left: 0; right: 0; bottom: 0; margin: auto; overflow: hidden;} .orbit1{ width: 70vw; height: 70vw; border: 1px solid #FFF; border-radius: 50%; position:absolute; left: 0; right: 0; top:0; margin: auto;} .orbit2{ width: 30vh; height: 30vh; border: 1px solid #FFF; border-radius: 50%; position:absolute; left: 0; right: 0; top:50vh; margin: auto;} .bannerVideoHide{ opacity: 0; visibility: hidden;} .bannerImageShow{ opacity: 1; visibility:visible;} .white-round1{position: absolute; left: 8%; top:21%; width: 16px; height: 16px; border-radius: 50%; background: #fff; } .white-round2{position: absolute; right:24%; top:5%; width: 32px; height: 32px; border-radius: 50%; background: #fff; } .white-round3{position: absolute; left: 22%; top:4%; width: 15px; height: 15px; border-radius: 50%; background: #fff; } .white-round4{position: absolute; right:1%; top:31%; width: 11px; height: 11px; border-radius: 50%; background: #fff; } /* .video-container { padding-top:87vh; height: 0; width: 100vw; margin: 0; background-color: #C00; overflow: hidden; position: relative; } .video-container:after{content:''; width: 100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.5); z-index:2;} .video-container iframe{ position: absolute; left:50%; bottom:0; transform: translate(-50%, 0); z-index: 1; height: 140%; width: 100vw; box-shadow: 0 ; border-radius: 0px; } .orbitHolder { z-index: 2;} @media all and (max-width:650px){ .video-container { padding-top:50vh; } .video-container iframe { height: 130%; width: 125vw;} } */ @media screen and (max-device-width:1000px) and (orientation: portrait){ .homeSec1{ height:0; padding-bottom: 56.5%;} .homeBanner{ position: absolute;} .orbit1{display: none;} .bannerVideo { height:auto;} } /* krishna end */ .gallery_paging{ display: none;} #bannerPlayPose{ display: none;} .bannerControl canvas{ display: none;} .bannerInfo{ position:absolute; left:10%; top:155px; width:400px; margin-left:20px;} .bannerInfo span{overflow:hidden; display:block; margin-bottom:10px;} .bannerInfo span img{ position:relative; top:90px; opacity:0;} .bannerInfo strong{ display:block; padding-top:20px; text-align: right; position: relative;} .bannerInfo strong a{ position:relative; opacity:0; left:25px; } .bannerInfo strong em{width: 128px; height: 2px; background: #26297d; position: absolute; left:25px; opacity:0;} .bannerInfo span img.fadeInUp{top:0;opacity:1; } .bannerInfo span img.fadeOutUp{top:-90px; opacity:0; } .bannerInfo strong a.fadeIn{ opacity:1; left:-11px;} .bannerInfo strong em.fadeIn{ opacity:1; left:0px;} .slick-slide img.btDex{} .slick-slide img.btMob{ display: none;} .bannerControl{width: 90%; max-width: 1155px; position: absolute; left: 0; right: 0; bottom:120px; margin: auto; padding-left: 40px;} .bannerControl .banner_prev, .bannerControl .banner_next{ position: absolute; top:10px; font-size: 0; color: transparent; width: 20px; height: 20px; cursor: pointer;} .bannerControl .banner_prev{ left:10px; background: url(../images/arrow-banner.png) no-repeat 0 0;} .bannerControl .banner_next{left: 90px; background: url(../images/arrow-banner.png) no-repeat 100% 0;} .bannerControl canvas{ position: absolute; left: 40px; top: 0; width: 40px; height: 40px;} .bannerControl .playPose{ position: absolute; left: 40px; top: 0; width: 40px; height: 40px; background: url(../images/play-pose.png) no-repeat 0 0; cursor: pointer;} .bannerControl .playPose.play{ background: url(../images/play-pose.png) no-repeat 0 -40px; } .bannerControl .gallery_paging{ position: absolute; top:11px; left:125px; color: #FFF; font-size: 14px; font-weight: 400;} .bannerControl .gallery_paging b{} .homeSec5-box2 ul li aside a figure img { width: 100%; line-height: 0; display: block; opacity: 0; } @media all and (max-width:1024px){ .bannerInfo {left:0; right:0; top: 155px; width: 205px; margin:0 auto;} .slick-slide img.btDex{ display: none;} .slick-slide img.btMob{ display: block;} .bannerInfo strong em{ display: none;} .bannerControl{ display: none;} .homeBanner .ps_dots{ position: absolute; left: 0; bottom: 150px; width: 100%; text-align: center;} .highlights aside a{ padding-bottom: 50px;} .white-round1 {left: 7%;top: 21%;} .white-round2 { position: absolute; right: 24%; top: 4%;} .orbit1 { top: 220px; } } @media (max-height:675px) and (max-width:600px) { .bannerInfo {left: 0; right: 0; top: 51px; width: 177px; margin: 0 auto;} } /* banner end */ .ps_prev, .ps_next {position: absolute; top: 0; bottom: 0; margin: auto; z-index: 5; width:40px; height:40px; font-size: 0px; cursor: pointer; border-radius: 50%; border: 1px solid #DFDFDF;box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.05);} .ps_prev {left: 0; background:#fff url(../images/arrow.png) no-repeat 15px 50%; display: block;} .ps_next {background:#fff url(../images/arrow.png)no-repeat -37px 50%; display: block; right: 0px;} .ps_dots{ width:100%; z-index:5; margin-top:15px;} .ps_dots li{ display:inline-block; margin:0 4px;} .ps_dots li button{ display:inline-block; width:6px; height:6px; text-indent:-9999px; background:#d7d7d7; font-size:0; color:transparent; border-radius:3px; cursor: pointer; border: none; padding: 0; transition: all 0.3s ease-in-out;} .ps_dots li.slick-active button{background:#ea212d; width:16px; } /*------------ .homeSec2 start -----------*/ .homeSec2{ width: 100%;height:auto; display: block; background: #00a34c; padding: 30px 0 30px 0; margin-top: 0px;} .homeSec2:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec2:before{content: ''; width: 70px; height:70px; background: #00d764; border-radius: 50%; margin: 0 auto; position: absolute; left: 0; right: 0; top: -35px; } .homeSec2-box1{width: 100%; height: auto; float: left; display: block; } .homeSec2-box1 ul{width: 100%; height: auto; float: left; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: center; } .homeSec2-box1 ul li{ width: 20%; height: auto; float: left; display: block; padding: 10px 10px; } .homeSec2-box1 ul li a aside{ width: 100%; height: 100%; background: transparent; border: 0px solid #edeff0; border-radius: 4px; float: left; display: block; -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.0); -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.0); box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.0); padding: 20px 20px 20px 20px; transition: 0.4s; } .homeSec2-box1 ul li a:hover aside{ -webkit-box-shadow: 0px 0px 8px 0px rgba(27,170,152,0.3); -moz-box-shadow: 0px 0px 8px 0px rgba(27,170,152,0.3); box-shadow: 0px 0px 8px 0px rgba(27,170,152,0.3); background: #fff; } .homeSec2-box1 ul li a aside figure{ width: 100%; height: auto; display: block; margin-bottom: 10px;} .homeSec2-box1 ul li a aside article{ text-align: center;} .homeSec2-box1 ul li a aside figure i.profile-images1 {width: 46px; height: 31px; margin: 0 auto; background: url("../images/icon-set1.png") 0px 0px no-repeat; display: block;} .homeSec2-box1 ul li a:hover aside figure i.profile-images1 {width:46px; height: 31px; display: block; background: url(../images/icon-set1.png) 0px -140px no-repeat;} .homeSec2-box1 ul li a aside figure i.profile-images2 {width: 46px; height: 31px; margin: 0 auto; background: url(../images/icon-set1.png) -351px 0px no-repeat; display: block; } .homeSec2-box1 ul li a:hover aside figure i.profile-images2 {width: 46px; height: 31px; display: block; background: url(../images/icon-set1.png) -351px -138px no-repeat;} .homeSec2-box1 ul li a aside figure i.profile-images3 {width: 37px; height: 36px; margin: 0 auto; background: url(../images/icon-set1.png) -663px 0px no-repeat; display: block; } .homeSec2-box1 ul li a:hover aside figure i.profile-images3 {width: 37px; height: 36px; display: block; background: url(../images/icon-set1.png) -663px -133px no-repeat;} .homeSec2-box1 ul li a aside figure i.profile-images4 {width:33px; height: 31px; margin: 0 auto; background: url(../images/icon-set1.png) -862px 0px no-repeat; display: block; } .homeSec2-box1 ul li a:hover aside figure i.profile-images4 {width: 33px; height: 31px; display: block; background: url(../images/icon-set1.png) -862px -138px no-repeat;} .homeSec2-box1 ul li a aside figure i.profile-images5 {width: 30px; height: 29px; margin: 0 auto; background: url(../images/icon-set1.png) -976px 0px no-repeat; display: block; } .homeSec2-box1 ul li a:hover aside figure i.profile-images5 {width: 30px; height: 29px; display: block; background: url(../images/icon-set1.png) -976px -140px no-repeat;} .homeSec2-box1 ul li a aside article h2{ display: inline-block; font-size: 14px; font-weight: 400; color: #fff; line-height: 18px; position: relative; padding-bottom: 15px;} .homeSec2-box1 ul li a aside article h2:before{ content: ''; position: absolute; left: 0; margin: 0 auto; right: 0; bottom: 0px; width: 14px; height: 8px; background: url("../images/arrow1.png") no-repeat -34px top; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .homeSec2-box1 ul li a:hover aside article h2:before{ content: ''; position: absolute; right: 0; bottom: 0; width: 14px; height: 8px; background: url("../images/arrow1.png") no-repeat 0 0; } .homeSec2-box1 ul li a:hover aside article h2{ color: #00d764; } @media (max-width: 1024px) { .homeSec2-box1 ul li { width: 33.33%; /* 3 items per row on medium screens */ } } @media (max-width: 768px) { .homeSec2-box1 ul li { width: 50%; /* 2 items per row on tablets */ } } @media (max-width: 480px) { .homeSec2-box1 ul li { width: 100%; /* 1 item per row on mobile */ } .homeSec2-box1 ul li a aside { padding: 15px; } .homeSec2-box1 ul li a aside article h2 { font-size: 13px; line-height: 16px; padding-bottom: 10px; } .homeSec2:before { width: 50px; height: 50px; top: -25px; } } /*------------ .homeSec2 end ---*/ /*------------ .homeSec3 start ---*/ .homeSec3{ width: 100%;height:auto; display: block; background: #fff; padding: 70px 0;} .homeSec3:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec3-box1{width: 100%; height: auto; display: block; padding: 0px 0; } .homeSec3-box1:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec3-box1 h2{ width: 100%; height: auto; display: block; font-size: 46px; font-weight: 700; color: #595c6f; line-height: 55px; padding-bottom: 20px; text-align: center; } .homeSec3-box1 h3{ width: 100%; height: auto; display: block; font-size: 20px; font-weight: 400; color: #595c6f; line-height: 26px; padding-bottom: 10px; text-align: center; text-transform: uppercase; } .homeSec3-box1 p{ width: 100%; height: auto; display: block; font-size: 16px; font-weight: 400; color: #595c6f; line-height: 26px; padding-bottom: 0px; text-align: center; } .homeSec3-box2{width: 100%; height: auto; display: block; padding: 50px 0 0 0; } .homeSec3-box2:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .solutions_slid li aside{width: 100%; height: auto; padding: 5px; } .solutions_slid li aside a{ width: 100%; height: auto; padding: 20px 20px 60px 20px; background: #FFF; box-shadow: 0 3px 10px 0 rgba(0,0,0,0.00); transition: 0.4s; display: block;border: 1px solid transparent; position: relative;} .solutions_slid li aside a:hover{ background: #FFF; box-shadow: 0 0px 15px 0 rgba(0,0,0,0.08);display: block; border: 1px solid #e9e9e9;} .solutions_slid li aside figure{ width: auto; margin: 0 auto 20px; display: table;} .solutions_slid li aside figure i{ } .solutions_slid li aside figure i img{ width: 100%; border-radius: 50%;} .solutions_slid li aside article{ width: 100%; height: auto; display: block;} .solutions_slid li aside article h2{ width: 100%; min-height: 73px; display: block; font-size: 20px; font-weight: 600; color: #595c6f; line-height: 26px; padding-bottom: 20px; text-align: center; } .solutions_slid li aside article p{ width: 100%; min-height: 80px; margin-bottom: 10px; font-size: 16px; font-weight: 400; color: #595c6f; line-height: 20px; padding-bottom: 0px; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; } .solutions_slid li aside a small{ width: auto; height: 29px; position: relative; background: #fff; display: table; margin: 0 auto; padding: 0px 40px 0px 25px; font-size: 12px; font-weight: 400;color: #000; line-height: 29px; background-image: linear-gradient(0, #00d764, #00d764);background-size: 0;transition: .8s;background-repeat: no-repeat; border: 1px solid #00a34c;} .solutions_slid li aside a:hover small {border: 1px solid #00d764; background-size: 100%;color: #fff;} .solutions_slid li aside a small:after { content: ''; width: 11px; height: 11px; background: url(../images/plus1.png) no-repeat 0 0; position: absolute;right: 15px;top: 10px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} .solutions_slid li aside a:hover small:after { transform: rotateZ(90deg);} /*------------ .homeSec3 end ------------*/ /*--------- .homeSec4 start ---------*/ .homeSec4{ width: 100%;height:100vh; display: flex; justify-content: center; align-items: center; background: #e7e7f3; padding: 70px 0;} .homeSec4-box1{width: 100%; height: auto; display: block; padding: 0px 0; } .homeSec4-box1:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec4-box1 aside{ width: 36%; height: auto; float: left; display: block; padding-right: 3%;} .homeSec4-box1 aside h2{ width: auto; height: auto; display: inline-block; font-size: 60px; font-weight: 700; color: #00a34c; line-height: 65px; padding-bottom: 50px; position: relative; } .homeSec4-box1 aside h3{ width: auto; height: auto; display: inline-block; font-size: 18px; font-weight: 600; color: #595c6f; line-height: 26px; padding-bottom: 20px; position: relative; text-transform: uppercase; } .homeSec4-box1 aside p{ width: auto; height: auto; display: inline-block; font-size: 16px; font-weight: 400; color: #000; line-height: 22px; padding-bottom: 10px; position: relative; } .homeSec4-box1 article{ width: 64%; height: auto; float: left; display: block; } .homeSec4-box1 article ul{width: 100%; height: auto; float: left; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;} .homeSec4-box1 article ul li{width: calc(50% - 2px); height: auto; float: left; display: block; margin:1px 1px; position: relative; } .homeSec4-box1 article ul li span{width: 100%; height: 100%; float: left; display: block; padding: 20px 20px 20px 20px; border: 1px solid #c3c5d4;transition: 0.4s; } .homeSec4-box1 article ul li:hover span{ -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); background: #FFFFFF; } .homeSec4-box1 article ul li:before { content: ""; width: 0; height: 2px; position: absolute; transition: all 0.2s linear; background: #00a34c;left: 0;bottom: 0;} .homeSec4-box1 article ul li:hover::before { width: 100%;} .homeSec4-box1 article ul li span figure{ width: 90px; height: auto; float: left; padding-bottom: 20px; position: relative;} .homeSec4-box1 article ul li span figure img{ width: auto; margin: 0 auto; display: table;} .homeSec4-box1 article ul li span figure:after{ content: ''; position: absolute; left: 0 ; right: 0; bottom: 0; width: 60%; height: 5px; margin: 0 auto; background: #00a34c;} .homeSec4-box1 article ul li span small{width: calc(100% - 90px); height: auto; float: left; padding-left: 4%;} .homeSec4-box1 article ul li span small h2{ width: auto; height: auto; display: inline-block; font-size: 35px; font-weight: 700; color: #00a34c; line-height: 45px; padding-bottom: 5px; position: relative; padding-right: 30px;} .homeSec4-box1 article ul li span small h2:after{ content: '+'; position: absolute; right: 0; top: -5px;font-size: 50px; font-weight: 700; color: #00a34c; line-height: 55px; } .homeSec4-box1 article ul li span small h3{ width: 100%; height: auto; display: block; font-size: 15px; font-weight: 400; color: #000; line-height: 22px; padding-bottom: 0px;} .homeSec4-box1 article ul li span small h4{ width: 100%; height: auto; display: block; font-size: 35px; font-weight: 700; color: #00a34c; line-height: 55px; padding-bottom: 5px; position: relative;} .clear2 { width: 100%; display: block;clear: both;line-height: 0 !important;font-size: 0 !important;height: 0px !important;} .clear5 { width: 100%; display: block;clear: both;line-height: 0 !important;font-size: 0 !important;height: 0px !important;} /*--------- .homeSec4 end ---------*/ /*--------- .homeSec5 end ---------*/ .homeSec5{ width: 100%;height:100vh; display: flex; justify-content: center; align-items: center; background: #fff; padding: 70px 0;} .homeSec5-box1{width: 100%; height: auto; display: block; padding: 0px 0; } .homeSec5-box1:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec5-box1 h2{ width: 100%; height: auto; display: block; font-size: 60px; font-weight: 700; color: #833177; line-height: 65px; padding-bottom: 20px; position: relative; text-align: center; } .homeSec5-box1 h3{ width: 100%; height: auto; display: block; font-size: 18px; font-weight: 600; color: #595c6f; line-height: 26px; padding-bottom: 5px; position: relative; text-transform: uppercase; text-align: center; } .homeSec5-box1 p{ width: 100%; height: auto; display:block; font-size: 16px; font-weight: 400; color: #000; line-height: 22px; padding-bottom: 10px; position: relative; text-align: center;} .homeSec5-box2{width: 100%; height: auto; display: block; padding: 0px 0; margin: 50px 0 0 0; } .homeSec5-box2 ul{ margin-left: 0px; margin-right: 0px; height: 460px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; position: relative; } .homeSec5-box2 ul li{ width: 33%; padding: 0px 3px; display: block; position: absolute; overflow: hidden; z-index: 2; } .homeSec5-box2 ul li:nth-child(1){ height: 457px;} .homeSec5-box2 ul li:nth-child(2){ height: 227px; left: 33%; top: 0;} .homeSec5-box2 ul li:nth-child(3){ height: 227px; left: 66%; top: 0;} .homeSec5-box2 ul li:nth-child(4){ height: 227px; left: 33%; top: 230px;} .homeSec5-box2 ul li:nth-child(5){ height: 227px; left: 66%; top: 230px;} .homeSec5-box2 ul li:nth-child(6){ height: 227px; left: 66%; top: 230px;} .homeSec5-box2 ul li:nth-child(7){ height: 227px; left: 75%; top: 230px;} .homeSec5-box2 ul li aside{ width: 100%; height: 100%; display: block; } .homeSec5-box2 ul li aside a{ display: block; height: 100%;} .homeSec5-box2 ul li aside a figure{ width: 100%;display: block; position: relative; overflow: hidden; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all .5s ease } .homeSec5-box2 ul li aside a figure img { width: 100%; line-height: 0; display: block; } .homeSec5-box2 ul li aside a figure article{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; padding: 10px 10px; background: rgba(131,49,119,0.7);} .homeSec5-box2 ul li aside a figure article span{ width: 100%; padding:0 0 5px 0; margin-bottom: 5px; display: block; border-bottom: 1px solid #fff;} .homeSec5-box2 ul li aside a figure article span h2{ width: 100%; height: auto; display: block; font-size: 16px; font-weight: 600; color: #fff; line-height: 20px; padding-bottom: 0px; } .homeSec5-box2 ul li aside a figure article span h3{ width: 100%; height: auto; display: block; font-size: 14px; font-weight: 400; color: #fff; line-height: 22px; padding-bottom: 0px; } .homeSec5-box2 ul li aside a figure article h4{ width: 100%; height: auto; display: block; font-size: 14px; font-weight: 400; color: #fff; line-height: 22px; border-bottom: 1px solid #fff; padding-bottom: 5px; margin-bottom: 5px;} .homeSec5-box2 ul li aside a figure article p{ width: 100%; height: auto; display: block; font-size: 14px; font-weight: 400; color: #fff; line-height: 20px; padding-bottom: 0px; padding-right: 20px; position: relative; } .homeSec5-box2 ul li aside a figure article p:before{ content: ''; position: absolute; right: 0; bottom: 2px; width: 14px; height: 8px; background: url("../images/arrow2.png") no-repeat -34px top; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .homeSec5-box2 ul li aside a:hover figure article p:before{ content: ''; position: absolute; right: 0; bottom: 0; width: 14px; height: 8px; background: url("../images/arrow2.png") no-repeat 0 0; } .homeSec5-box2 ul li aside a{position: relative; } .homeSec5-box2 ul li aside a:hover{ -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); background: #FFFFFF; } .homeSec5-box2 ul li aside a:before {box-sizing: border-box; transform: translateX(100%);content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2px; border-radius: 0px;border-bottom: 2px solid transparent; border-left: 2px solid transparent; z-index: 3; } .homeSec5-box2 ul li aside a:after { box-sizing: border-box;transform: translateX(-100%);content: '';position: absolute;top: 0;left: 0;width: 100%;height: 2px;border-radius: 0px;border-top: 2px solid transparent;border-right: 2px solid transparent; z-index: 3; } .homeSec5-box2 ul li aside a:hover { color: inherit;text-decoration: none;} .homeSec5-box2 ul li aside a:hover:before { transition: 0.1s transform linear, 0.5s height linear 0.1s; transform: translateX(0);height: 100%;border-color: #833177 ;} .homeSec5-box2 ul li aside a:hover:after { transition: 0.1s transform linear 0.2s, 0.5s height linear 0.3s;transform: translateX(0);height: 100%;border-color: #833177;} .contentpic .teknologikolimg { height: 0; opacity: 0;} .homeSec5-box2 ul li aside a figure{ overflow: hidden;} .homeSec5-box2 ul li aside a figure article{transform: translateY(50%)} .homeSec5-box2 ul li:hover aside a figure article{transform: translateY(0)} .homeSec5-box2 ul li:hover aside a figure .hbMob{-webkit-transform: scale(1); transform: scale(1);} .homeSec5-box2 ul li aside a figure{ overflow: hidden;} /* .homeSec5-box2 ul li aside a figure article p{opacity: 0; height: 0;} .homeSec5-box2 ul li:hover aside a figure article p{ opacity: 1; height:100px;} */ .homeSec5-box2 ul li:hover aside a figure .teknologikolimg{-webkit-transform: scale(1.1); transform: scale(1.1);} .homeSec5-box2 ul li:hover aside a figure .hbMob{-webkit-transform: scale(1.1); transform: scale(1.1);} /*--------- .homeSec5 end ---------*/ /*--------- .homeSec6 start ---------*/ .homeSec6{ width: 100%;height:auto; display: block; background: #e7e7f3; padding: 150px 0;} .homeSec6:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec6-box1{width: 100%; height: auto; display: block; padding: 0px 0; } .homeSec6-box1:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec6-box1 h2{ width: 100%; height: auto; display: block; font-size: 60px; font-weight: 700; color: #00a34c; line-height: 65px; padding-bottom: 20px; position: relative; text-align: center; } .homeSec6-box1 h3{ width: 100%; height: auto; display: block; font-size: 18px; font-weight: 600; color: #595c6f; line-height: 26px; padding-bottom: 5px; position: relative; text-transform: uppercase; text-align: center; } .homeSec6-box1 p{ width: 100%; height: auto; display:block; font-size: 16px; font-weight: 400; color: #000; line-height: 22px; padding-bottom: 10px; position: relative; text-align: center;} .homeSec6-box2{width: 100%; height: auto; display: block; padding: 50px 60px; margin-top: 50px; } .company-sec5-box25 { width: 100%; height: auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; position: relative; } .company-sec5-box25 li{ width: 25%; height: auto; float: left; display: block; padding:0 10px; margin-bottom: 10px;} .company-sec5-box25 li aside{ width:100%; height: auto; display: table; vertical-align: middle; text-align: center; margin: 0 auto; background: #FFFFFF; border-radius: 6px; border: 1px solid #ccc;} .company-sec5-box25 li figure{ width: 150px; margin: 0 auto; display: table-cell; vertical-align: middle; text-align: center; border-radius: 6px; } .company-sec5-box25 li figure img { width: 100%; display: block;border-radius: 6px; } .companies-logo-slid li{ padding: 0 10px; } .companies-logo-slid aside{ width:100%; height: auto; display: table; vertical-align: middle; text-align: center; margin: 0 auto; background: #FFFFFF;border-radius: 6px; } .companies-logo-slid figure{ width: 150px; margin: 0 auto; display: table-cell; vertical-align: middle; text-align: center; border-radius: 6px; } .companies-logo-slid figure img{ width: 100%; border-radius: 6px; } .ps_prev5 {left: -35px; position: absolute; top: 0; bottom: 0; margin: auto; z-index: 5; width:36px; height:36px; font-size: 0px; cursor: pointer; border-radius: 50%; border: 1px solid #b287b1;box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.05); background:url(../images/arrow3.png) no-repeat 10px 50%; display: block;} .ps_next5 {position: absolute; top: 0; bottom: 0; margin: auto; z-index: 5; width:36px; height:36px; font-size: 0px; cursor: pointer; border-radius: 50%; border: 1px solid #b287b1;box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.05); background:url(../images/arrow3.png) no-repeat -37px 50%; display: block; right: -35px;} .ps_dots{ width:100%; z-index:5; margin-top:15px;} .ps_dots li{ display:inline-block; margin:0 4px;} .ps_dots li button{ display:inline-block; width:6px; height:6px; text-indent:-9999px; background:#d7d7d7; font-size:0; color:transparent; border-radius:3px; cursor: pointer; border: none; padding: 0; transition: all 0.3s ease-in-out;} .ps_dots li.slick-active button{background:#ea212d; width:16px; } .viewmore{ width: auto; margin: 20px auto 0; display: table;} .viewmore small{ width: auto; height: 29px; position: relative; background: #fff; display: table; margin: 0 auto; padding: 0px 25px 0px 25px; font-size: 12px; font-weight: 400;color: #000; line-height: 29px; background-image: linear-gradient(0, #00d764, #00d764);background-size: 0;transition: .8s;background-repeat: no-repeat; border: 1px solid #00a34c; border-radius: 3px; cursor: pointer;} .viewmore small {border: 1px solid #00d764; background-size: 100%;color: #fff;} /*.viewmore a small:after { content: ''; width: 11px; height: 11px; background: url(../images/plus1.png) no-repeat 0 0; position: absolute;right: 15px;top: 10px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} .viewmore a:hover small:after { transform: rotateZ(90deg);}*/ /*--------- .homeSec7to11 start ---------*/ .homeSec7{ width: 100%; display: block; background: #d0d1dd; min-height: 30px; } .homeSec7:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec8{ width: 100%; display: block; background: #bbbbc7; } .homeSec8:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec9{ width: 100%; display: block; background: #a1a1ad; max-height: 55px;} .homeSec9:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec10{ width: 100%; display: block; background: #878791; max-height: 65px;} .homeSec10:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec11{ width: 100%; display: block; background: #6d6d75; max-height: 80px; } .homeSec11:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } /*--------- .homeSec7to11 end ---------*/ /*--------- .homeSec12 start ---------*/ .homeSec12{ width: 100%;height:auto; display: block; background: #595c6f; padding: 150px 0; } .homeSec12:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec12-box1{width: 100%; height: auto; display: block; padding: 0px 0; } .homeSec12-box1:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec12-box1 h2{ width: 100%; height: auto; display: block; font-size: 60px; font-weight: 700; color: #fff; line-height: 65px; padding-bottom: 20px; position: relative; text-align: center; } .homeSec12-box1 h3{ width: auto; height: auto; display: table; margin: 0 auto; font-size: 20px; font-weight: 400; color: #fff; line-height: 100px; padding-bottom: 0px; position: relative; text-align: center; } .homeSec12-box1 h3 a{ position: relative; padding-left: 0px; transition: .8s;} .homeSec12-box1 h3 a span{ margin: 0 10px; font-size: 18px; font-weight: 400; color: #fff; line-height: 100px; text-decoration: underline; } .homeSec12-box1 h3 a:hover span{color: #00a34c;} .homeSec12-box1 h3 a{font-size: 18px; font-weight: 400; color: #fff; line-height: 125px;} .homeSec12-box1 h3 a:after{ content: ''; width: 125px; height: 125px; position: absolute; left: 0px; top: -48px; border-radius: 50%; border: 1px solid #fff; transition: .8s;} .homeSec12-box1 h3 a:hover{ color: #00a34c;} .homeSec12-box1 h3 a:hover:after{border: 1px dashed #00a34c;} .homeSec13{ width: 100%;height:100vh; display: flex; justify-content: center; align-items: center; background: #3b3e4b; padding: 70px 0; } .homeSec13-box1{width: 100%; height: auto; padding: 0px 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .homeSec13-box1:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; } .homeSec13-box1 aside{ width: 50%; height: auto; float: left; padding-right: 3%; } .homeSec13-box1 aside span{ width: 100%; height: 100%; display: table;} .homeSec13-box1 aside span h2{ width: auto; height: auto; display: table-cell; vertical-align: middle; font-size: 60px; font-weight: 700; color: #fff; line-height: 65px; padding-bottom: 0px; position: relative; } .homeSec13-box1 article{ width: 50%; height: auto; float: left; } .homeSec13-box1 article ul{width: 100%; height: auto; float: left; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-direction: row-reverse;} .homeSec13-box1 article ul li{width: 33.33%; height: auto; float: left; display: block; position: relative; padding: 5px; } .homeSec13-box1 article ul li figure{ width: 100%; height: auto; display: block; position: relative; border-radius: 50%; overflow: hidden; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; margin: 0; padding: 0; line-height: 0; } .homeSec13-box1 article ul li figure img{ width: 100%; border-radius: 50%; } .homeSec13-box1 article ul li:hover figure{ display: block; position: relative; border-radius: 2px; } .homeSec13-box1 article ul li:hover figure img{ width: 100%; border-radius: 2px; } .homeSec13-box1 article ul li figure h2{ position: absolute; left: 0; right: 0; bottom:12px; width: 100%; height: auto; padding: 10px 0; text-align: center; font-size: 13px; font-weight: 400; color: #fff; line-height: 25px;} .achievements li a figure .sub { height: 100%; width: 100%; background-color: rgba(0,163,76,.8); left: 0; bottom: -100%; position: absolute; opacity: 0; overflow: hidden; z-index: 66; } .achievements li a figure:hover .sub { bottom: 0; opacity: 1; cursor: pointer; } .achievements li a figure .sub b.info { background-image: url(../images/images-icon-hover2.png); background-position: left top; background-repeat: no-repeat; display: inline-block; text-decoration: none; padding: 0; text-indent: -9999px; width: 40px; height: 40px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; opacity: 0; -moz-transform: scale(0,0); -webkit-transform: scale(0,0); -o-transform: scale(0,0); -ms-transform: scale(0,0); transform: scale(0,0); -webkit-transition: -webkit-transform 0.2s 0.1s ease-in,opacity 0.1s ease-in-out; -moz-transition: -moz-transform 0.2s 0.1s ease-in,opacity 0.1s ease-in-out; -o-transition: -o-transform 0.2s 0.1s ease-in,opacity 0.1s ease-in-out; -ms-transition: -ms-transform 0.2s 0.1s ease-in,opacity 0.1s ease-in-out; transition: transform 0.2s 0.1s ease-in,opacity 0.1s ease-in-out; } .achievements li a:hover figure .sub b.info { opacity: 1; -moz-transform: scale(1,1); -webkit-transform: scale(1,1); -o-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } /*--------- .homeSec12 end ---------*/ @media all and (max-width:1500px){ .bannerinfo-box1-text h2 { font-size: 52px;line-height: 58px;} .bannerinfo-box1-text h3 { font-size: 16px;line-height: 22px;} } @media all and (max-width:1090px){ .bannerinfo-box1-text {top: -280px;} } @media all and (max-width:1024px){ .homeSec3-box2 {padding: 50px 50px 0 50px;} .ps_prev6 {left: -50px; position: absolute; top: 0; bottom: 0; margin: auto; z-index: 5; width:45px; height:45px; font-size: 0px; cursor: pointer; border-radius: 50%; border: 1px solid #00a34c;box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.05); background:url(../images/arrow3.png) no-repeat 15px 50%; display: block;} .ps_next6 {position: absolute; top: 0; bottom: 0; margin: auto; z-index: 5; width:45px; height:45px; font-size: 0px; cursor: pointer; border-radius: 50%; border: 1px solid #00a34c;box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.05); background:url(../images/arrow3.png) no-repeat -35px 50%; display: block; right: -50px;} .ps_dots6{ width:auto; z-index:5; margin-top:15px; margin: 0 auto; display: table;} .ps_dots6 li{ display:inline-block; margin:0 4px;} .ps_dots6 li button{ display:inline-block; width:6px; height:6px; text-indent:-9999px; background:#d7d7d7; font-size:0; color:transparent; border-radius:3px; cursor: pointer; border: none; padding: 0; transition: all 0.3s ease-in-out;} .ps_dots6 li.slick-active button{background:#00a34c; width:16px; } .homeSec2-box1{overflow: hidden; padding-bottom: 0px; } .homeSec2-box1 ul{ display: block; margin-left: -1px; margin-right: -1px; margin-bottom: -1px;} .homeSec2-box1 ul li { width: 50%;padding: 0px 0px;} .homeSec2-box1 ul li a aside {border-left: 1px solid rgba(237,236,236,0.34); border-bottom: 1px solid rgba(237,236,236,0.34);border-radius: 0px;} .homeSec2-box1 ul li a aside figure {width: auto; height: auto;display: table;margin-bottom: inherit;margin: 0 auto 20px;} .homeSec2-box1 ul li a aside article{ width: auto; height: auto; display: table; margin: 0 auto ; text-align: center;} .homeSec2-box1 ul li a aside article h2 { padding-right: 0px; padding-bottom: 30px;} .homeSec2-box1 ul li a aside article h2:before {right: 0;left: 0;margin: 0 auto;} .homeSec2-box1 ul li:last-child{ width: 100%;} .bottomColorPatch{ display: none;} } @media all and (max-width:950px){ .homeSec4, .homeSec5, .homeSec13{height:auto; } .homeSec4-box1 aside {width: 100%; height: auto;float: left; display: block;padding-right: 0%;} .homeSec4-box1 aside h2 {display: table;margin: 0 auto; text-align: center; padding-bottom: 10px;} .homeSec4-box1 aside h2 br { display: none;} .homeSec4-box1 aside h3 {width: 100%; text-align: center; display: block; padding-bottom: 5px;} .homeSec4-box1 aside p{width: 100%; text-align: center; display: block;} .homeSec4-box1 article {width: 100%; margin-top: 20px;} .homeSec4-box1 article ul li span small h3 br{ display: none;} .homeSec5-box2 ul {height:auto;} .homeSec5-box2 ul li{ width: 50%; position: relative; float: left; display: block;} .homeSec5-box2 ul li:nth-child(1) {height: auto;width: 100%; margin-bottom: 3px; line-height: 0;} .homeSec5-box2 ul li:nth-child(2) {height: auto;left: inherit; top: inherit;} .homeSec5-box2 ul li:nth-child(3) {height: auto;left: inherit; top: inherit;} .homeSec5-box2 ul li:nth-child(4) {height: auto;left: inherit; top: inherit;} .homeSec5-box2 ul li:nth-child(5) {height: auto;left: inherit; top: inherit;} .homeSec5-box2 ul li:nth-child(6) {height: auto;left: inherit; top: inherit;} .homeSec5-box2 ul li:nth-child(7) {height: auto;left: inherit; top: inherit;} .homeSec5-box2 ul li{ margin: 3px 0;} .homeSec5-box2 ul li aside a figure img { opacity: 1;} .homeSec5-box2 ul li aside a figure article { transform: inherit; } } @media all and (max-width:850px){ .homeSec12 { padding: 30px 0;} .homeSec12-box1 h2 {font-size: 30px;line-height: 36px;padding-bottom: 10px;} .homeSec6 {padding: 30px 0;} .homeSec6-box1 h2 { font-size: 30px; line-height: 36px;padding-bottom: 10px;} .homeSec6-box2 {margin-top: 20px;} .homeSec5 {padding: 30px 0;} .homeSec5-box1 h2 {font-size: 30px;line-height:36px;padding-bottom: 10px;} .homeSec5-box2 {margin: 20px 0 0 0;} .homeSec4 { padding: 30px 0;} .homeSec4-box1 aside h2 {font-size: 30px;line-height: 36px;} .homeSec5-box2 ul li {width: 50%;} .homeSec3 { padding: 30px 0;} .homeSec3-box1 h2{font-size: 30px; line-height: 36px;padding-bottom: 10px;} .homeSec3-box1 h3 { font-size: 16px;line-height: 24px;} .homeSec4-box1 aside h3 { font-size: 16px;line-height: 24px;} .homeSec6-box1 h3 { font-size: 16px;line-height: 24px;} } @media all and (max-width:800px){ .bannerinfo-box1-text {top: -180px;} .bannerinfo-box1-text h2 {font-size: 45px;line-height: 48px;padding-bottom: 10px;} .homeSec13-box1 aside {width: 100%;} .homeSec13-box1 article {width: 100%;} .homeSec13-box1 aside span h2 {font-size: 40px;line-height: 40px; text-align: center;} .homeSec13-box1 aside span h2 br{ display: block;} .clear5{ display: none;} .homeSec13-box1 article ul{ margin-top: 30px;} } @media all and (max-width:750px){ .homeSec4-box1 article ul li { width: 100%;} .homeSec6-box2 {padding: 20px 20px;} } @media all and (max-width:600px){ .homeSec4-box1 article ul li span small h3 {font-size: 13px; line-height: 16px;} .homeSec5-box2 ul li {width: 50%;} .homeSec5-box2 ul li aside a figure article p { font-size: 12px;line-height: 15px;} .company-sec5-box25 li {width: 50%;} } @media all and (max-width:550px){ .homeSec4-box1 article ul li {width: calc(100% - 2px);} .homeSec5-box2 ul li {width: 100%;} .homeSec12-box1 h2 {font-size: 26px;line-height: 26px;} .homeSec6-box1 h2 { font-size: 31px;line-height: 33px;} .homeSec6-box1 h3 {font-size: 14px;line-height: 20px;} .homeSec6-box1 p {font-size: 14px;line-height: 16px;} .homeSec5-box1 h2 {font-size: 31px;line-height: 33px;} .homeSec5-box1 h3 {font-size: 14px;line-height: 20px;} .homeSec5-box1 p {font-size: 14px;line-height: 16px;} .homeSec4-box1 aside h2 {font-size: 31px;line-height: 33px;} .homeSec4-box1 aside h3 {font-size: 14px;line-height: 20px;} .homeSec4-box1 aside p {font-size: 14px;line-height: 16px;} .homeSec3-box1 h2{font-size: 31px; line-height: 33px;padding-bottom: 10px;} .homeSec3-box1 h3{font-size: 14px;line-height: 20px;} .homeSec3-box1 p{font-size: 14px;line-height: 16px;} .bannerinfo-box1-text {top: -250px;} .homeSec13-box1 article ul li {width: 50%;} .homeSec2-box1 ul li a aside article h2 {font-size: 14px;} .homeSec13-box1 article ul li figure h2 { bottom: 18px; font-size: 12px;line-height: 20px;} .company-sec5-box25 li {width: 50%;} } @media all and (max-width:380px){ .homeSec13-box1 article ul li {width: 100%;} .company-sec5-box25 li {width: 100%;} }