/*=================================== Home Slider CSS ====================================*/ .ep-home-slider-area .ep-single-slide-item { height: 890px; display: flex !important; align-items: center; background-color: #f5f9fc; } .ep-slider-content-wrapper { margin-top: 60px; } .slide-subtitle { background: #e3e7e9; position: relative; padding: 10px 110px 10px 110px; font-size: 22px; display: inline-block; margin-bottom: 25px; } .slide-subtitle:before, .slide-subtitle:after{ position: absolute; height: 2px; width: 40px; content: ''; top: 50%; margin-top: -1px; } .slide-subtitle:before { right: 35px; } .slide-subtitle:after { left: 35px; } .ep-slide-title h1, .ep-slide-title h2, .ep-slide-title h3, .ep-slide-title h4, .ep-slide-title h5, .ep-slide-title h6{ font-size: 75px; line-height: 85px; } .ep-slide-title span { text-decoration: underline; } .ep-slide-desc { font-size: 22px; font-weight: 500; } .slider-button-wrapper { margin-top: 30px; } .ep-home-slider-area .slick-arrow { left: 50px; opacity: 0; visibility: hidden; } .ep-home-slider-area .slick-arrow.slick-next { left: auto; right: 50px; } .ep-home-slider-area:hover .slick-arrow { opacity: 1; visibility: visible; } .ep-home-slider-area .slick-dots { position: absolute; bottom: 65px; max-width: 1320px; left: 50%; transform: translateX(-50%); text-align: left; padding: 0 15px; } .ep-home-slider-area .slick-dots button{ height: 5px; width: 25px; border-radius: 0; background-color: #161c2d; } @media only screen and (max-width: 1200px) { .ep-home-slider-area .slick-dots { max-width: 1140px; } } @media only screen and (max-width: 1024px) { .ep-home-slider-area .slick-dots { max-width: 990px; } .ep-slide-title h1, .ep-slide-title h2, .ep-slide-title h3, .ep-slide-title h4, .ep-slide-title h5, .ep-slide-title h6 { font-size: 70px; line-height: 80px; } .ep-home-slider-area .ep-single-slide-item{ height: 800px; } } @media only screen and (max-width: 991px) { .ep-slider-content-wrapper{ margin-top: 0; } .ep-single-slide-item.ep-cover-bg { background-position: left center; } } @media only screen and (max-width: 767px) { .ep-home-slider-area .ep-single-slide-item { height: 650px; } .ep-slide-title h1, .ep-slide-title h2, .ep-slide-title h3, .ep-slide-title h4, .ep-slide-title h5, .ep-slide-title h6 { font-size: 30px; line-height: 45px; } .slide-subtitle{ padding: 10px 20px 8px; } .slide-subtitle:before, .slide-subtitle:after{ display: none; } } /*=================================== Home Slider 2 CSS ====================================*/ .ep-home-slider-two-area { text-align: right; position: relative; } .slider-two-image { height: 840px; background-size: cover; background-repeat: no-repeat; background-position: center; width: 95%; display: inline-block; border-radius: 350px 0 0 0; position: relative; overflow: hidden; } .slider-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); } .home-two-slider-wrapper { position: absolute; background-color: #16b6ee; left: 0; display: inline-block; bottom: 50px; width: 48%; text-align: left; padding: 50px 150px 50px 5%; border-radius: 0 215px 215px 0; } .slide-two-subtitle { display: block; color: #ffffff; font-size: 18px; } .ep-slide-two-title h2 { font-size: 60px; font-weight: 500; line-height: 70px; color: #ffffff; } .ep-slide-two-title h2 span { text-decoration: underline; } .ep-slide-two-desc { color: #ffffff; font-size: 18px; line-height: 28px; } .ep-home-slider-two-area .slick-dots { background: #2dbdf0; display: inline-block; width: 28px; text-align: center; position: absolute; right: -75px; top: 50%; transform: translateY(-50%); padding: 15px 0; border-radius: 15px; } .ep-home-slider-two-area .slick-dots li { display: inline-block; margin-right: 0; width: 15px; margin-bottom: 10px; } .ep-home-slider-two-area .slick-dots li:last-child{ margin-bottom: 0; } .ep-home-slider-two-area .slick-dots button{ background-color: transparent; border-color: #ffffff; } .ep-home-slider-two-area .slick-dots button:hover, .ep-home-slider-two-area .slick-dots .slick-active button { background-color: #ffffff; border-color: #ffffff; } .ep-home-slider-two-area .ep-button{ background-color: #333456; border-color: #333456; } @media only screen and (max-width: 1024px) { .slider-two-image{ width: 100%; border-radius: 0; height: 710px; } .home-two-slider-wrapper { width: 73%; } } @media only screen and (max-width: 991px) { .home-two-slider-wrapper { width: 85%; padding: 50px 130px 50px 5%; } .ep-slide-two-title h2 { font-size: 50px; line-height: 60px; } .slider-two-image { height: 600px; } } @media only screen and (max-width: 767px) { .home-two-slider-wrapper { width: 100%; padding: 0 15px; background: transparent; bottom: 100px; } .ep-slide-two-title h2 { font-size: 35px; line-height: 45px; } } /*=================================== Testimonial CSS ====================================*/ .ep-testimonial-wrapper { background: #f3f7fa; padding: 95px 110px 55px 110px; position: relative; } .bottom-image { position: absolute; right: 0; bottom: 0; max-width: 255px; } .ep-testimonial-item.slick-slide { padding: 0 15px; } .ep-testimonial-desc { font-weight: 500; font-size: 17px; position: relative; } .ep-testimonial-icon { height: 150px; width: 150px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; } .ep-testimonial-icon svg {fill: #e5e7ea;} .ep-testimonial-info { position: relative; padding-left: 95px; margin: 50px 0; } .ep-testimonial-image { position: absolute; height: 80px; width: 80px; border-radius: 50%; left: 0; top: -5px; } .ep-testimonial-info .name { font-size: 22px; margin-bottom: 5px; } .ep-testimonial-info .designation { font-weight: 500; font-size: 17px; position: relative; padding-left: 45px; } .ep-testimonial-info .designation:before { position: absolute; content: ''; height: 2px; width: 30px; top: 50%; margin-top: -1px; left: 0; } .ep-testimonial-slider-wrapper .slick-dots { width: auto; text-align: right; position: absolute; right: 15px; bottom: 65px; } .ep-dots-style-2 .slick-dots button{ height: 5px; width: 25px; border-radius: 0; background-color: #cfcfcf; } .ep-testimonial-right-subtitle { font-size: 22px; font-weight: 500; margin-bottom: 5px; display: inline-block; } .ep-testimonial-right-content { padding-left: 50px; } .ep-testimonial-right-title { font-size: 50px; line-height: 60px; } .ep-testimonial-right-button { margin-top: 35px; } @media only screen and (max-width: 1200px) { .ep-testimonial-wrapper { padding: 95px 85px 55px 85px; } .ep-testimonial-right-title{ font-size: 48px; } } @media only screen and (max-width: 1024px) { .ep-testimonial-wrapper { padding: 95px 60px 55px 60px; } .ep-testimonial-right-content { padding-left: 30px; } .ep-testimonial-right-title { font-size: 42px; line-height: 52px; } } @media only screen and (max-width: 991px) { .ep-testimonial-slider-wrapper { margin-bottom: 50px; } .ep-testimonial-right-content { padding-left: 15px; } .ep-testimonial-wrapper { padding: 95px 60px 110px 60px; } } @media only screen and (max-width: 767px) { .ep-testimonial-wrapper { padding: 60px 10px 70px 10px; } .ep-testimonial-image { height: 60px; width: 60px; top: 0; } .ep-testimonial-info{ padding-left: 75px; margin-top: 40px; } .ep-testimonial-info .name { font-size: 18px; margin-bottom: 0; } .ep-testimonial-info .designation { font-size: 16px; padding-left: 35px; } .ep-testimonial-info .designation::before{ width: 25px; } .ep-testimonial-right-title { font-size: 28px; line-height: 38px; } .ep-testimonial-right-subtitle{ font-size: 18px; } .ep-testimonial-slider-wrapper { margin-bottom: 20px; } } /*=================================== Section Title CSS ====================================*/ .ep-section-title-wrapper { margin-bottom: 40px; } .ep-section-title-content { width: 40%; display: inline-block; } .ep-section-subtitle { display: inline-block; font-size: 18px; font-weight: 500; position: relative; margin-bottom: 15px; } .ep-section-title h1, .ep-section-title h2, .ep-section-title h3, .ep-section-title h4, .ep-section-title h5, .ep-section-title h6 { font-size: 32px; line-height: 42px; margin-bottom: 0; text-transform: uppercase; font-weight: 500; } .ep-section-subtitle:before, .ep-section-subtitle:after { position: absolute; content: ''; height: 2px; width: 50px; top: 50%; margin-top: -1px; } .ep-section-subtitle:before{ right: -70px; } .ep-section-subtitle:after{ left: -70px; } .ep-no-line .ep-section-subtitle:before, .ep-no-line .ep-section-subtitle:after, .ep-line-left .ep-section-subtitle:before, .ep-line-right .ep-section-subtitle:after{ display: none; } .ep-section-description { margin-top: 20px; } .ep-line-left .ep-section-subtitle{ margin-left: 70px; } @media only screen and (max-width: 1024px) { .ep-section-title-content { width: 50%; } } @media only screen and (max-width: 991px) { .ep-section-title-content { width: 65%; } } @media only screen and (max-width: 767px) { .ep-section-title-content { width: 100%; } .ep-section-title h1, .ep-section-title h2, .ep-section-title h3, .ep-section-title h4, .ep-section-title h5, .ep-section-title h6 { font-size: 32px; line-height: 42px; margin-bottom: 0; } .ep-section-subtitle:before, .ep-section-subtitle:after{ width: 40px; } .ep-section-subtitle:before { right: -60px; } .ep-section-subtitle:after { left: -60px; } .ep-section-title-wrapper { margin-bottom: 30px; } } /*=================================== Services CSS ====================================*/ .ep-single-service-box { margin-bottom: 30px; } .ep-service-image { position: relative; } .ep-service-number { position: absolute; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; font-weight: 500; color: #ffffff; border-radius: 50%; bottom: -25px; left: 50%; margin-left: -25px; border: 2px solid; } .ep-service-content { padding: 45px 30px 40px 30px; text-align: center; box-shadow: 0 5px 16px 0 rgb(217 217 217 / 50%); position: relative; } .ep-service-title { font-size: 22px; line-height: 35px; margin-bottom: 10px; } .ep-service-button { margin-top: 30px; } .ep-service-button .ep-button { background-color: #f3f7fa; border-color: #f3f7fa; } .ep-service-button .ep-button:hover { color: #ffffff; } .ep-service-border { height: 5px; width: 0; bottom: -1px; left: 0; position: absolute; opacity: 0; visibility: hidden; } .ep-single-service-box:hover .ep-service-border{ opacity: 1; visibility: visible; width: 100%; } /*=================================== Counter Up CSS ====================================*/ .ep-counter-up-wrapper { padding: 45px 70px 15px 70px; border-radius: 15px; position: relative; } .ep-single-counter-box { position: relative; padding-left: 125px; margin-bottom: 30px; min-height: 100px; } .counter-icon-wrapper { height: 100px; width: 100px; background-size: 100%; background-repeat: no-repeat; position: absolute; left: 0; text-align: center; line-height: 100px; } .count-icon { color: #ffffff; height: 45px; width: 45px; line-height: 100px; text-align: center; display: inline-block; font-size: 35px; } .count-icon svg,.count-icon img{ margin-top: -6px; } .count-icon svg, .count-icon svg g{ fill: #ffffff; } .ep-count-content{ color: #ffffff; } .ep-count-number { font-size: 45px; line-height: 55px; font-weight: 800; } .ep-counter-title { display: block; font-size: 18px; } .ep-counter-box-shadow { position: absolute; height: 13px; background: #dde1e4; width: 90%; left: 50%; transform: translateX(-50%); bottom: -13px; border-radius: 0 0 15px 15px; } @media only screen and (max-width: 767px) { .counter-icon-wrapper { height: 80px; width: 80px; line-height: 80px; } .count-icon { height: 40px; width: 40px; line-height: 80px; font-size: 30px; } .ep-counter-up-wrapper { padding: 45px 30px 15px 30px; } .ep-single-counter-box { padding-left: 100px; margin-bottom: 30px; min-height: 80px; } .ep-count-number { font-size: 35px; line-height: 45px; } } /*=================================== About Company Section CSS ====================================*/ .ep-left-image, .ep-right-content .image-one, .ep-right-content .image-two{ border-radius: 15px; overflow: hidden; margin-bottom: 30px; } .ep-middle-content { padding: 0 50px; } .ep-about-section-wrapper .ep-section-title-content{ width: 100%; } .ep-about-section-wrapper .ep-section-title-wrapper.ep-line-both .ep-section-subtitle { margin-left: 70px; } .ep-about-section-wrapper .ep-section-title-wrapper{ margin-top: -10px; margin-bottom: 55px; } .ep-about-section-wrapper .ep-section-title h1, .ep-about-section-wrapper .ep-section-title h2, .ep-about-section-wrapper .ep-section-title h3, .ep-about-section-wrapper .ep-section-title h4, .ep-about-section-wrapper .ep-section-title h5, .ep-about-section-wrapper .ep-section-title h6 { font-size: 38px; line-height: 48px; font-weight: 400; } .ep-ears-of-experience-wrapper { position: relative; min-height: 150px; padding-left: 190px; } .ep-experience { position: absolute; padding: 20px 30px 25px 30px; text-align: center; border-radius: 15px; color: #ffffff; font-size: 18px; left: 0; top: -20px; text-transform: uppercase; } .ep-experience span { display: block; color: #ffffff; font-size: 72px; line-height: 1; } .ep-experience-title h6 { font-size: 28px; line-height: 36px; font-weight: 400; } .ep-experience-desc { margin-top: 20px; } @media only screen and (max-width: 1200px) { .ep-middle-content { padding: 0; } } @media only screen and (max-width: 1024px) { .ep-right-content { display: none; } } @media only screen and (max-width: 991px) { .ep-left-image { text-align: center; margin-bottom: 70px; } } @media only screen and (max-width: 767px) { .ep-about-section-wrapper .ep-section-title-wrapper.ep-line-both .ep-section-subtitle { margin-left: 60px; font-size: 18px; } .ep-about-section-wrapper .ep-section-title h1, .ep-about-section-wrapper .ep-section-title h2, .ep-about-section-wrapper .ep-section-title h3, .ep-about-section-wrapper .ep-section-title h4, .ep-about-section-wrapper .ep-section-title h5, .ep-about-section-wrapper .ep-section-title h6 { font-size: 25px; line-height: 35px; } .ep-experience { position: relative; left: auto; top: auto; display: inline-block; margin-bottom: 30px; } .ep-ears-of-experience-wrapper { min-height: auto; padding-left: 0; margin-bottom: 30px; } .ep-experience-title h6 { font-size: 18px; line-height: 28px; } .ep-about-section-wrapper .ep-section-title-wrapper { margin-top: 0; margin-bottom: 30px; } } /*=================================== Team CSS ====================================*/ .ep-single-member { margin-bottom: 30px; display: inline-block; } .ep-member-image-wrapper { height: 300px; width: 300px; background-size: 100%; background-repeat: no-repeat; position: relative; } .ep-member-image-container { height: 220px; width: 220px; border-radius: 60px; transform: rotate( 45deg ); position: absolute; top: 35px; left: 40px; overflow: hidden; } .ep-member-image { height: 100%; width: 100%; transform: rotate(-45deg) scale(1.2); background-size: cover; background-position: center; } .ep-member-name-designation { height: 100%; width: 100%; background: rgba(255, 255, 255, .7); display: table; text-align: center; opacity: 0; visibility: hidden; position: relative; } .ep-single-member:hover .ep-member-name-designation, .ep-single-member:hover .ep-member-name, .ep-single-member:hover .ep-member-designation{ opacity: 1; visibility: visible; } .ep-member-name { margin-bottom: 0; font-size: 20px; transform: translateY(-10px); transition: .3s; transition-delay: .1s; opacity: 0; visibility: hidden; } .ep-member-designation { display: block; color: #161c2d; font-size: 16px; transition: .3s; transform: translateY(10px); opacity: 0; visibility: hidden; transition-delay: .1s; } .ep-single-member:hover .ep-member-name, .ep-single-member:hover .ep-member-designation{ transform: translateY(0); } .plus-icon { position: absolute; height: 40px; width: 40px; background: #ffffff; border-radius: 5px; text-align: center; line-height: 40px; bottom: 10px; left: 50%; margin-left: -23px; font-size: 14px; } @media only screen and (max-width: 767px) { .ep-member-image-wrapper { height: 280px; width: 280px; } .ep-member-image-container { height: 210px; width: 210px; top: 35px; left: 35px; } } /*=================================== Project CSS ====================================*/ .ep-gallery-filter-button-wrapper { text-align: center; } .ep-gallery-filter-button-wrapper li { position: relative; margin-right: 15px; padding-right: 25px; transition: .3s; } .ep-gallery-filter-button-wrapper li, .ep-filter-mobile-title { font-weight: 700; color: #282828; font-size: 18px; cursor: pointer; } .ep-gallery-filter-button-wrapper li:last-child { margin-right: 0; padding-right: 0; } .ep-gallery-filter-button-wrapper li:before { position: absolute; content: ''; height: 2px; width: 10px; background: #161c2d; top: 50%; margin-top: -1px; right: 0; } .ep-gallery-filter-button-wrapper li:last-child:before { display: none; } .ep-gallery-filter-button-wrapper li.active { cursor: default; } .ep-gallery-filter-button-wrapper { margin-bottom: 70px; } .ep-filter-mobile-title { display: none; } .ep-filter-buttons { background: #f3f7fa; display: inline-block; padding: 20px 65px 15px 65px; border-radius: 10px; } .ep-single-project-box { position: relative; margin-bottom: 85px; display: inline-block; } .project-image { border-radius: 15px; overflow: hidden; } .ep-project-content { background-color: #ffffff; position: absolute; bottom: -50px; width: 85%; left: 50%; transform: translateX(-50%); padding: 22px 30px 20px 30px; border-radius: 15px; text-align: center; box-shadow: 0 5px 16px 0 rgb(217 217 217 / 50%); } .ep-project-title { font-size: 22px; margin-bottom: 0; } .ep-project-subtitle { font-weight: 500; display: block; margin-bottom: 5px; } @media only screen and (max-width: 1024px) { .ep-project-content{ padding:22px 25px 20px 25px; width: 90%; } } @media only screen and (max-width: 991px) { .ep-filter-buttons{ padding: 20px 55px 15px 55px; } } @media only screen and (max-width: 767px) { .ep-filter-mobile-title { display: block; padding: 10px 20px 0 20px; border-radius: 3px; position: relative; margin-bottom: 10px; } .ep-filter-mobile-title::before { position: absolute; content: ''; height: 15px; width: 15px; right: 20px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-right: 2px solid; border-bottom: 2px solid; top: 15px; } .ep-filter-mobile-title.active::before { -ms-transform: rotate(-133deg); -webkit-transform: rotate(-133deg); transform: rotate(-133deg); top: auto; bottom: 7px; } ul.ep-gallery-filter-button, .ep-gallery-filter-button::before, .ep-gallery-filter-button::after, .ep-gallery-filter-button-wrapper li::before { display: none; } .ep-gallery-filter-button-wrapper li { display: block !important; padding: 0 15px; margin-bottom: 8px !important; margin-right: 0 !important; } .ep-filter-buttons{ display: block; padding: 10px 15px; text-align: left; } .ep-gallery-filter-button-wrapper { margin-bottom: 45px; } .ep-project-content{ padding:22px 20px 20px 20px; } .ep-project-title { font-size: 20px; } } /*=================================== Project Info CSS ====================================*/ .ep-project-details-info { padding: 30px 40px 30px 40px; border-radius: 10px; margin-top: 12px; } .ep-project-info-title { font-size: 32px; } .ep-project-info-list strong { font-weight: 700; font-size: 17px; width: 110px; min-width: 110px; display: inline-block; position: relative; margin-right: 20px; } .ep-project-info-list strong:before { position: absolute; } .ep-project-info-list strong:before { content: "\f101"; position: absolute; right: 0; font-family: 'Font Awesome 5 Free'; font-size: 12px; top: 6px; } .ep-bottom-border { height: 2px; width: 70px; background: #ffffff; margin-bottom: 30px; } .ep-project-details-info, .ep-project-details-info a, .ep-project-info-title, .ep-project-info-list strong{ color: #ffffff; } .ep-project-details-info a:hover{ color: #161c2d; } .ep-project-info-list li:not(last-child) { margin-bottom: 5px; } @media only screen and (max-width: 767px) { .ep-project-details-info { padding: 20px; } .ep-project-info-title { font-size: 26px; } .ep-bottom-border{ margin-bottom: 20px; } } /*=================================== Brand Slider CSS ====================================*/ .ep-brand-image-wrapper { padding: 35px 100px 26px; border-radius: 10px; position: relative; } .ep-single-brand-image { text-align: center; padding: 0 15px; } .ep-single-brand-image img { transition: .2s; } .ep-brand-image { height: 112px; overflow: hidden; display: inline-block; } .ep-brand-image:hover img { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); } .ep-brand-image-wrapper .slick-arrow { background: #61a9f7; left: -40px; } .ep-brand-image-wrapper .slick-arrow.slick-next{ left: auto; right: -40px; } @media only screen and (max-width: 1024px) { .ep-brand-image-wrapper .slick-arrow { left: -70px; } .ep-brand-image-wrapper .slick-arrow.slick-next{ right: -70px; } } @media only screen and (max-width: 768px) { .ep-brand-image{ height: 105px; } } @media only screen and (max-width: 767px) { .ep-brand-image-wrapper { padding: 35px 15px 26px; } .ep-brand-image { height: 112px; } } /*=================================== Call Button CSS ====================================*/ .ep-call-button-wrapper { padding: 40px 50px 50px 50px; border-radius: 15px; overflow: hidden; background-position: bottom left; background-repeat: no-repeat; background-size: contain; } .ep-call-button-wrapper, .ep-call-button-wrapper a{ color: #ffffff; } .ep-call-button-wrapper ul{ margin: 0; padding: 0; list-style: none; } .ep-call-button-wrapper ul li{ position: relative; padding-left: 30px; font-size: 19px; } .ep-call-button-wrapper ul li:before{ content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 700; position: absolute; left: 0; top: 0; } .ep-call-button { position: relative; padding-left: 80px; margin-top: 40px; } .call-icon { height: 60px; width: 60px; background: #ffffff; border-radius: 50%; text-align: center; line-height: 60px; font-size: 30px; position: absolute; left: 0; top: -8px; } .call-icon svg,.call-icon img { width: 25px; } .ep-call-button a { font-size: 25px; font-weight: 900; color: #ffffff; } .ep-call-button a:hover{ color: #ffffff; } @media only screen and (max-width: 767px) { .ep-call-button-wrapper { padding: 40px 30px 50px 30px; } .ep-call-button-wrapper ul li{ font-size: 18px; } .ep-call-button a{ font-size: 22px; } } /*=================================== Testimonial Two CSS ====================================*/ .ep-testimonial-two-item { position: relative; padding-left: 150px; margin-bottom: 30px; } .ep-testimonial-two-image-wrapper{ height: 105px; width: 105px; left: 0; top: 0; border-radius: 50%; position: absolute; border: 2px solid #e5e9ec; text-align: center; } .ep-testimonial-two-image { height: 90px; width: 90px; border-radius: 50%; display: inline-block; margin-top: 5px; } .testimonial-two-content { background-color: #f3f7fa; padding: 35px 40px; position: relative; border-radius: 10px; } .ep-testi-left-shape { position: absolute; background: #f3f7fa; height: 30px; width: 30px; transform: rotate( 45deg ); left: -14px; } .ep-testimonial-name { font-size: 22px; left: 32px; margin-bottom: 0; } .ep-testimonial-designation { position: relative; font-size: 17px; font-weight: 700; padding-left: 40px; } .ep-testimonial-designation:before { position: absolute; content: ''; left: 0; top: 50%; margin-top: -1px; height: 2px; width: 30px; } .ep-testimonial-two-desc p:last-child { margin-bottom: 0; } .ep-testimonial-ratting { color: #ff9502; position: absolute; right: 40px; top: 55px; font-size: 14px; } .ep-testimonial-two-desc { margin-top: 20px; } .ep-testimonial-slider-two .slick-dots li { display: block; margin-right:0 !important; } .ep-testimonial-slider-two ul.slick-dots { position: absolute; display: inline-block; width: 50px; bottom: 25px; left: 30px; } .ep-testimonial-slider-two .slick-dots li button{ background-color: #e5e9ec; } @media only screen and (max-width: 767px) { .ep-testimonial-two-item { padding-left: 0; } .ep-testimonial-ratting { right: 30px; font-size: 10px; } .ep-testimonial-name { font-size: 20px; } .ep-testimonial-two-image-wrapper, .ep-testi-left-shape{ display: none; } } /*=================================== Recent Post CSS ====================================*/ .ep-recent-post-item { position: relative; box-shadow: 0 5px 15px 0 rgb(217 217 217 / 60%); padding: 30px 30px 35px 30px; margin-bottom: 30px; } .ep-recent-post-title { font-size: 22px; line-height: 32px; } .ep-recent-post-item .ep-post-read-more .ep-button { background: transparent; } .ep-recent-post-item .ep-post-read-more .ep-button:hover{ color: #ffffff; } .ep-recent-post-item .post-meta { margin-bottom: 10px; } .ep-recent-post-item .ep-post-read-more { margin-top: 10px; margin-bottom: 35px; } .ep-recent-post-item:hover .ep-service-border{ opacity: 1; visibility: visible; width: 100%; } @media only screen and (min-width: 1024px) and (max-width: 1200px) { .ep-recent-post-title { font-size: 20px; line-height: 30px; } .ep-recent-post-item .post-meta li, .ep-recent-post-item .post-meta li a{ font-size: 15px; } .ep-recent-post-item .post-meta ul li{ margin-right: 5px; } .ep-recent-post-item { padding: 30px 25px 35px 25px; } } @media only screen and (max-width: 767px) { .ep-recent-post-title { font-size: 19px; line-height: 29px; } } /*=================================== Recent Post Two CSS ====================================*/ .ep-recent-post-two-item { margin-bottom: 30px; } .ep-recent-post-two-item .ep-recent-post-thumbnail { height: 230px; width: 230px; background-size: cover; background-position: center; border-radius: 100px 0 0 0; float: left; } .ep-recent-post-two-item .ep-post-content-wrapper { background: #ffffff; padding: 30px 30px 30px 250px; border-radius: 100px 0 0 0; } .ep-recent-post-two-item .post-meta i{ display: none; } .ep-recent-post-two-item .post-meta a { background-color: #4fc574; color: #ffffff; padding: 10px 20px; border-radius: 5px; font-size: 17px; display: inline-block; } .ep-recent-post-two-item .post-meta a:hover { background-color: #333456; color: #ffffff; } .ep-recent-post-two-item .ep-recent-post-title { color: #3a416f; font-weight: 500; } .ep-recent-post-two-item .ep-button, .ep-recent-post-two-item .ep-button:hover{ padding: 5px; background: transparent; color: #4fc574; border: none; } @media only screen and (max-width: 1024px) { .ep-recent-post-two-item .ep-recent-post-thumbnail{ height: 200px; } } @media only screen and (max-width: 991px) { .ep-recent-post-two-item .ep-recent-post-thumbnail{ height: 230px; } } @media only screen and (max-width: 767px) { .ep-recent-post-two-item .ep-recent-post-thumbnail{ height: 250px; width: 100%; border-radius: 0; float: none; } .ep-recent-post-two-item .ep-post-content-wrapper { padding: 30px; border-radius: inherit; } } /*==================================== # Title With Text CSS ====================================*/ .ep-title-with-text-wrapper .title { font-size: 38px; line-height: 50px; margin-bottom: 15px; } .ep-title-with-text-wrapper .desc p:last-child { margin-bottom: 0; } .ep-title-with-text-wrapper ul li{ margin-bottom: 15px; } @media only screen and (max-width: 1024px) { .ep-title-with-text-wrapper .title { font-size: 36px; line-height: 48px; } } @media only screen and (max-width: 767px) { .ep-title-with-text-wrapper .title { font-size: 26px; line-height: 36px; } } /*=================================== Accordion Widget CSS ====================================*/ .ep-accordion-title { font-size: 32px; margin-bottom: 30px; } .ep-accordion-wrapper .accordion-button:focus{ outline: none !important; box-shadow: none !important; } .ep-accordion-wrapper .accordion-item { margin-bottom: 20px; } .ep-accordion-wrapper .accordion-collapse{ border:none; } .ep-accordion-wrapper .accordion-button, .ep-accordion-wrapper .accordion-body{ border:1px solid #cccccc; } .ep-accordion-wrapper .accordion-button{ padding-left: 30px; padding-right: 30px; } .ep-accordion-wrapper .accordion-body { border-top: 0; background: transparent; border-radius: 0 0 5px 5px; padding: 30px; } .ep-accordion-wrapper .accordion-item:first-of-type .accordion-button, .ep-accordion-wrapper .accordion-item .accordion-button{ border-radius: 5px; } .ep-accordion-wrapper .accordion-item:first-of-type .accordion-button:not(.collapsed), .ep-accordion-wrapper .accordion-item .accordion-button:not(.collapsed){ border-radius: 5px 5px 0 0; } .ep-accordion-wrapper .accordion-button.collapsed { color: #161c2d; background-color: transparent; } .ep-accordion-wrapper .accordion-button:hover, .ep-accordion-wrapper .accordion-button:not(.collapsed){ background: transparent; } .ep-accordion-wrapper .accordion-button.collapsed:after, .ep-accordion-wrapper .accordion-button:not(.collapsed):after{ background-image: none; height: 10px; width: 10px; transform: rotate( 45deg ); } .ep-accordion-wrapper .accordion-button.collapsed:after { border-left: 2px solid transparent; border-right: 2px solid ; border-top: 2px solid transparent; border-bottom: 2px solid ; } .ep-accordion-wrapper .accordion-button:not(.collapsed):after { border-left: 2px solid; border-right: 2px solid transparent; border-top: 2px solid; border-bottom: 2px solid transparent; } .ep-accordion-wrapper .accordion-button:after { position: absolute; right: 30px; top: 27px; } .ep-accordion-wrapper .accordion-button.collapsed:after { top: 20px; } @media only screen and (max-width: 767px) { .ep-accordion-title { font-size: 26px; } .ep-accordion-wrapper .accordion-button { padding-left: 20px; padding-right: 40px; } .ep-accordion-wrapper .accordion-body{ padding: 20px; } } /*=================================== Team Details CSS ====================================*/ .ep-member-details-wrapper { background-color: #f3f7fa; padding: 70px 50px; } .ep-member-details-wrapper .ep-member-image-wrapper { display: inline-block; } .ep-member-details-name { font-size: 48px; margin-bottom: 0; line-height: 58px; margin-top: -13px; } .ep-member-details-designation { font-size: 20px; font-weight: 500; } .ep-member-details { padding-right: 50px; margin-top: 20px; } .ep-member-details-button { margin-top: 40px; } .ep-member-social li:not(las-child){ margin-right: 10px; } .ep-member-social li a { background: #ffffff; display: inline-block; height: 40px; width: 40px; text-align: center; border-radius: 50%; line-height: 40px; border: 1px solid #eeefef; } .ep-member-social li a:hover{ color: #ffffff; } @media only screen and (max-width: 1024px) { .ep-member-details{ padding-right: 0; } } @media only screen and (max-width: 991px) { .ep-member-content { margin-top: 60px; } } @media only screen and (max-width: 767px) { .ep-member-details-wrapper{ padding: 40px; } .ep-member-details-name { font-size: 28px; line-height: 38px; } .ep-member-details-designation{ font-size: 18px; } .ep-member-content { margin-top: 45px; } .ep-member-details-button { margin-top: 25px; } } @media only screen and (max-width: 320px) { .ep-member-details-wrapper { padding: 10px; } } /*=================================== Job / Career CSS ====================================*/ .ep-job-wrapper .ep-filter-button-wrapper { margin-bottom: 50px; } .ep-job-wrapper .ep-gallery-filter-button{ background-color: #f3f7fa; padding: 35px 30px 30px 30px; border-radius: 10px; text-align: center; } .ep-job-wrapper .ep-gallery-filter-button li{ background-color: #ffffff; padding: 8px 25px; border-radius: 5px; border: 1px solid #cccccc; transition: .3s; font-weight: 500; } .ep-job-wrapper .ep-gallery-filter-button li:hover, .ep-job-wrapper .ep-gallery-filter-button li.active{ color: #ffffff; cursor: pointer; } .ep-job-wrapper .ep-gallery-filter-button li.active{ cursor: default !important; } .ep-job-wrapper .ep-gallery-filter-button li{ margin-right: 10px; } .ep-job-wrapper .ep-gallery-filter-button li:last-child{ margin-right: 0; } .ep-job-box { display: flex; align-items: center; border: 1px solid #e7ebee; padding: 30px; border-radius: 10px; margin-bottom: 30px; } .ep-job-title-and-meta { flex: 1; margin-top: 10px; margin-right: 10px; } .ep-job-image { height: 100px; width: 100px; border-radius: 10px; overflow: hidden; margin-right: 30px; } .ep-job-time { display: inline-block; background: #f3f7fa; font-weight: 500; padding: 2px 20px 1px; border-radius: 5px; font-size: 15px; } .ep-job-title h3 { font-size: 24px; line-height: 32px; margin: 5px 0; } .ep-job-meta li { position: relative; padding-left: 22px; font-size: 15px; margin-right: 10px; font-weight: 500; } .ep-job-meta li, .ep-job-meta li a{ color: #7a7a7a; } .ep-job-meta li:last-child{ margin-right: 0; } .ep-job-meta li i { position: absolute; left: 0; top: 5px; font-size: 15px; } .ep-job-meta li.job-location{ padding-left: 18px; } .ep-job-meta li.job-salary i { top: 6px; font-size: 14px; } .job-apply-btn .ep-button{ padding: 18px 30px 16px 30px; } @media only screen and (max-width: 1024px) { .ep-job-wrapper .ep-gallery-filter-button{ padding: 35px 20px 30px 20px; } .ep-job-wrapper .ep-gallery-filter-button li{ padding: 5px 20px; margin-right: 5px; } .ep-job-box{ padding: 20px; } .job-apply-btn .ep-button { padding: 16px 20px 14px 20px; } .ep-job-title h3 { font-size: 20px; line-height: 28px; } .ep-job-image{ margin-right: 20px; } } @media only screen and (max-width: 767px) { .ep-single-job-item, .ep-filter-button-col{ padding: 0 !important; } .ep-job-box{ display: block; } .ep-job-image { margin-right: 0; margin-bottom: 20px; } .ep-job-title h3{ margin: 15px 0; } .ep-job-title h3{ font-size: 22px; } .job-apply-btn .ep-button { padding: 14px 20px; } .job-apply-btn { margin-top: 25px; } .ep-job-wrapper .ep-filter-mobile-title { background: #f3f7fa; padding: 15px 25px 13px 25px; border-radius: 10px; } .ep-job-wrapper .ep-gallery-filter-button li { display: block; } .ep-job-wrapper .ep-filter-mobile-title::before { height: 10px; width: 10px; right: 25px; top: 24px; } .ep-job-wrapper .ep-filter-mobile-title.active::before{ top: 29px; } } /*=================================== Contact Form 7 CSS ====================================*/ .ep-contact-form-container { background: #f3f7fa; padding: 60px 70px 70px 70px; border-radius: 10px; } .ep-form-title-wrapper h2 { font-size: 45px; line-height: 55px; } .ep-form-title-wrapper .ep-blue-border { margin-bottom: 45px; } .bizmax-contact-form-container .ep-form-control-wrapper { position: relative; margin-bottom: 30px; } .bizmax-contact-form-container input, .bizmax-contact-form-container textarea { margin-bottom: 0 !important; } .bizmax-contact-form-container .ajax-loader { margin: 0 !important; position: absolute !important; } .bizmax-contact-form-container form select { height: 60px; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 15px; border-radius: 5px; } input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; -webkit-appearance: none; padding-left: 100px; } .ep-form-control-wrapper i { position: absolute; font-size: 18px; top: 30px; transform: translateY(-50%); right: 20px; pointer-events: none; color: #7a7a7a; } .bizmax-contact-form-container select, .bizmax-contact-form-container .ep-form-control-wrapper input, .bizmax-contact-form-container textarea { background-color: #ffffff; border-color: #cccccc; color: #7a7a7a; } .bizmax-contact-form-container ::placeholder { color: #7a7a7a; } .bizmax-contact-form-container :-ms-input-placeholder { color: #7a7a7a; } .bizmax-contact-form-container ::-ms-input-placeholder { color: #7a7a7a; } @media only screen and (max-width: 767px) { .ep-contact-form-container { padding: 30px 20px 40px 20px; } .ep-form-title-wrapper h2 { font-size: 36px; line-height: 46px; } } /*=================================== Office Location CSS ====================================*/ .ep-location-icon { height: 100px; width: 100px; line-height: 100px; background: #f3f7fa; text-align: center; font-size: 55px; border-radius: 10px; position: absolute; left: 30px; top: 50%; transform: translateY(-50%); } .ep-location-icon svg,.ep-location-icon img { height: 55px; width: 55px; margin-top: -5px; } .ep-office-location { border: 1px solid #cccccc; margin-bottom: 30px; position: relative; padding: 30px 30px 30px 160px; border-radius: 10px; } .ep-office-location ul { margin: 0; padding: 0; list-style: none; } .ep-office-location ul strong { width: 90px; display: inline-block; } .ep-office-location ul li,.ep-office-location ul li a { color: #7a7a7a; } .ep-office-location:hover .ep-location-icon { background: #ffffff; } .ep-office-location:hover .ep-location-title h4, .ep-office-location:hover ul strong, .ep-office-location:hover ul li, .ep-office-location:hover ul li a{ color: #ffffff; } .ep-blue-border { height: 5px; width: 163px; background-size: cover; margin-bottom: 15px; } .ep-location-title h4 { margin-bottom: 10px; } @media only screen and (max-width: 767px) { .ep-office-location{ padding: 30px; } .ep-location-icon { display: none; } } /*=================================== Service section CSS ====================================*/ .service-section-wrapper .left-content { background-color: #f6f6f6; padding: 100px 100px 100px 190px; border-radius: 0 200px 0 0; } .service-section-wrapper .service-list { height: 100%; background: #16b6ee; border-radius: 0 0 200px 0; padding: 100px 50px 50px 80px; } .service-section-wrapper .left-content h3 { font-size: 32px; text-transform: uppercase; font-weight: 400; color: #333456; } .service-section-wrapper .left-content span { color: #16b6ee; font-size: 18px; } .service-section-wrapper .service-list h2 { font-size: 32px; font-weight: 400; text-transform: uppercase; color: #333456; margin-bottom: 30px; } .service-section-wrapper .left-content .ep-button{ margin-top: 20px; } .service-section-wrapper .service-list ul { margin: 0; padding: 0; list-style: none; } .service-section-wrapper .service-list li { margin-bottom: 10px !important; font-size: 18px; } .service-section-wrapper .service-list li, .service-section-wrapper .service-list li a { color: #ffffff; } .service-section-wrapper .right-image, .service-section-wrapper .right-image img { height: 100%; border-radius: 0 0 0 200px; } @media only screen and (min-width: 1500px) { } @media only screen and (min-width: 1920px) { } @media only screen and (min-width: 1201px) and (max-width: 1366px) { } @media only screen and (min-width: 1025px) and (max-width: 1200px) { } @media only screen and (min-width: 992px) and (max-width: 1024px) { } @media only screen and (min-width: 768px) and (max-width: 991px) { } @media only screen and (max-width: 1200px) { } @media only screen and (max-width: 1024px) { .service-section-wrapper .left-content { padding: 100px 0 100px 60px; } .service-section-wrapper .right-image{ display: none; } } @media only screen and (max-width: 991px) { .service-section-wrapper .left-content { padding: 100px 60px 100px 60px; border-radius: 0; } .service-section-wrapper .service-list { height: auto; border-radius: 0; padding: 100px 60px 80px 60px; } } @media only screen and (max-width: 767px) { .service-section-wrapper .left-content { padding: 100px 25px 100px 25px; } .service-section-wrapper .service-list{ padding: 100px 25px 80px 25px; } } /*=================================== Text With Button CSS ====================================*/ .text-with-button-wrapper h3 { font-size: 32px; text-transform: uppercase; font-weight: 400; color: #333456; letter-spacing: 5px; } .text-with-button-wrapper span{ color: #16b6ee; font-size: 18px; } .text-with-button-wrapper .ep-button { margin-top: 20px; } /*=================================== Project Section CSS ====================================*/ .project-two-wrapper { padding: 110px 0 75px; position: relative; } .project-two-wrapper:before { position: absolute; content: ''; height: 70%; width: 50%; background: #f6f6f6; border-radius: 0 200px 0 0; top: 0; left: 0; } .project-two-left-content { position: relative; } .project-slider-wrapper { margin-left: 140px; margin-top: 50px; } .project-slider-wrapper .slick-item-1 img{ border-radius: 0 115px 0 0; } .project-slider-wrapper .slick-item-2 img, .project-slider-wrapper .slick-item-4 img{ border-radius: 0 0 0 115px; } .project-slider-wrapper .slick-item-3 img, .project-slider-wrapper .slick-item-5 img{ border-radius: 115px 0 0 0 ; } .project-slider-wrapper .slick-item-1 .project-two-slider-content{ text-align: left; } .project-two-slider-content{ text-align: right; margin-top: 30px; } .project-two-slider-content span{ color: #16b6ee; display: block; } .project-two-slider-content h5{ font-size: 22px; font-weight: 400; } .all-project-button { text-align: right; } .project-two-wrapper .title{ font-size: 32px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; } .project-two-wrapper .subtitle{ color: #16b6ee; font-size: 18px; } @media only screen and (max-width: 1024px) { .project-slider-wrapper { margin-left: 0; } .project-slider-wrapper img, .project-slider-wrapper .slick-item-1 img, .project-slider-wrapper .slick-item-2 img, .project-slider-wrapper .slick-item-4 img, .project-slider-wrapper .slick-item-3 img, .project-slider-wrapper .slick-item-5 img{ border-radius: 0; } .project-two-slider-item{ padding: 0 20px; } .project-two-slider-content{ text-align: left; } } @media only screen and (max-width: 991px) { } @media only screen and (max-width: 767px) { .all-project-button{ text-align: left; position: relative; } .project-two-slider-item { padding: 0 15px; } .project-two-wrapper:before{ width: 100%; } } /*=================================== Testimonial Section CSS ====================================*/ .testimonial-section-left { background-color: #16b6ee; padding: 105px 150px 205px 25%; border-radius: 0 0 170px 0; } .testimonial-section-left .subtitle-and-title .subtitle{ color: #ffffff; font-size: 18px; } .testimonial-section-left .subtitle-and-title h3 { font-weight: 400; text-transform: uppercase; letter-spacing: 5px; font-size: 32px; color: #333456; } .testimonial-section-left .subtitle-and-title h3 span{ color: #ffffff; text-decoration: underline; } .testimonial-section-item .fa-quote-left { color: #ffffff; font-size: 60px; height: 60px; width: 60px; position: absolute; left: 0; top: 0; } .testimonial-section-item { position: relative; padding-left: 85px; } .testimonial-section-item .description, .testimonial-section-item .designation{ color: #ffffff; } .testimonial-section-item .name { margin-bottom: 0; font-size: 18px; font-weight: 500; color: #333456; } .testimonial-section-wrapper .slick-arrow { position: absolute; left: 85px; bottom: -110px; right: auto; top: auto; background-color: transparent; border: 2px solid #ffffff; } .testimonial-section-wrapper .slick-arrow.slick-next { margin-left: 75px; } .testimonial-section-left .subtitle-and-title { margin-bottom: 45px; } .testimonial-section-wrapper .right-image img { border-radius: 170px 0 0 0; } @media only screen and (min-width: 1500px) { } @media only screen and (min-width: 1920px) { } @media only screen and (min-width: 1201px) and (max-width: 1366px) { } @media only screen and (min-width: 1025px) and (max-width: 1200px) { } @media only screen and (min-width: 992px) and (max-width: 1024px) { } @media only screen and (min-width: 768px) and (max-width: 991px) { } @media only screen and (max-width: 1200px) { } @media only screen and (max-width: 1024px) { .testimonial-section-left { padding: 105px 100px 205px 100px; border-radius: 0; } .testimonial-section-wrapper .right-image img { border-radius: 0; } } @media only screen and (max-width: 991px) { } @media only screen and (max-width: 767px) { .testimonial-section-left { padding: 105px 20px 205px 20px; } .testimonial-section-item { padding-left: 0; } .testimonial-section-item .fa-quote-left{ display: none; } .testimonial-section-left .subtitle-and-title h3 { font-size: 28px; line-height: 38px; margin-top: 20px; } .testimonial-section-wrapper .slick-arrow{ left: 0; } } /*=================================== Responsive CSS ====================================*/ @media only screen and (max-width: 767px) { .container.small-p-0, .container-fluid.small-p-0{ padding: 0 5px; } } /*=================================== Color CSS ====================================*/ .slide-subtitle:before,.slide-subtitle:after,.ep-home-slider-area .slick-dots .slick-active button, .ep-home-slider-area .slick-dots button:hover,.ep-testimonial-info .designation:before,.ep-dots-style-2 .slick-dots .slick-active button,.ep-dots-style-2 .slick-dots button:hover,.ep-section-subtitle:before,.ep-section-subtitle:after,.ep-service-button .ep-button:hover,.ep-testimonial-designation:before,.ep-testimonial-slider-two .slick-dots li.slick-active button,.ep-recent-post-item .ep-post-read-more .ep-button:hover,.ep-member-social li a:hover,.ep-job-wrapper .ep-gallery-filter-button li:hover,.ep-job-wrapper .ep-gallery-filter-button li.active,.ep-office-location:hover{ background-color: #4fc574; } .ep-service-button .ep-button,.ep-gallery-filter-button-wrapper li.active,.ep-gallery-filter-button-wrapper li:hover,.ep-single-project-box:hover .ep-project-title,.ep-project-subtitle,.call-icon,.ep-recent-post-title:hover,.ep-recent-post-item .ep-post-read-more .ep-button,.ep-accordion-wrapper .accordion-button:hover,.ep-accordion-wrapper .accordion-button:not(.collapsed),.ep-job-meta li a:hover,.ep-job-meta li i,.ep-location-icon,.ep-office-location ul li a:hover{ color: #4fc574; } .ep-service-button .ep-button:hover,.slick-current .ep-testimonial-two-image-wrapper,.ep-recent-post-item .ep-post-read-more .ep-button:hover,.ep-member-social li a:hover,.ep-job-wrapper .ep-gallery-filter-button li:hover,.ep-job-wrapper .ep-gallery-filter-button li.active,.ep-office-location:hover { border-color: #4fc574; } .ep-location-icon svg { fill: #4fc574; }