/*** ==================================================================== Attachment Css Files ==================================================================== ***/ /* @import url('global.css?v=35'); */ @import url("header.css?v=1.6"); @import url("footer.css?v=1.8"); @import url("animate.css"); @import url("rtl.css"); @import url("dark-body.css"); @import url("jquery-ui.css"); @import url("swiper.min.css");  @import url("custom-animate.css"); @import url("magnific-popup.css"); @import url("odometer-theme-default.css"); @import url("jquery.bootstrap-touchspin.css"); /*** ==================================================================== Main Slider ==================================================================== ***/ .slider-one { position: relative; } .slider-one .slider-one_pagination { position: absolute; top: 40%; z-index: 999; left: 40px !important; right: auto !important; width: 60px !important; } .slider-one .slider-one_pagination .swiper-pagination-bullet { position: relative; opacity: 1; width: auto; height: auto; display: block; background: none; font-weight: 600; line-height: 36px; text-align: right; font-size: 26px; opacity: 0.6; padding-right: 0px; color: var(--white-color); margin: 35px 0px !important; transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; } .slider-one .slider-one_pagination .swiper-pagination-bullet::before { position: absolute; content: ""; left: 0px; top: 20px; width: 1px; height: 65px; background-color: var(--white-color); } .slider-one .slider-one_pagination .swiper-pagination-bullet::after { position: absolute; content: ""; left: -5px; top: 14px; width: 10px; height: 10px; outline-offset: 1px; border-radius: 50px; display: inline-block; background-color: var(--white-color); } .slider-one .slider-one_pagination .swiper-pagination-bullet:last-child::before { display: none; } .slider-one .slider-one_pagination .swiper-pagination-bullet:hover, .slider-one .slider-one_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; font-size: 26px; } .slider-one .slider-one_pagination .swiper-pagination-bullet:hover::before, .slider-one .slider-one_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 1; } .slider-one .swiper-slide { position: relative; padding: 130px 0px 140px; } .slider-one_image-layer { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1; opacity: 0; overflow: hidden; background-size: cover; background-position: center center; clip-path: polygon(0 0, 40% 0, 40% 100%, 0% 100%); -webkit-transition: all 1000ms linear; -moz-transition: all 1000ms linear; -ms-transition: all 1000ms linear; -o-transition: all 1000ms linear; transition: all 1000ms linear; } .slider-one_image-layer:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 1.4; background-color: rgb(0 0 0 / 45%); } .slider-one .swiper-slide-active .slider-one_image-layer { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .slider-one_pattern { position: absolute; left: 0px; top: 0px; z-index: 1; width: 306px; height: 306px; background-repeat: no-repeat; } .slider-one_content { position: relative; z-index: 2; text-align: center; } .slider-one_content-inner { position: relative; } .slider-one_title { position: relative; font-size: 16px; font-weight: 600; padding: 11px 25px; border-radius: 50px; display: inline-block; color: var(--white-color); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; background-color: var(--main-color); } .slider-one .swiper-slide-active .slider-one_title { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .slider-one_heading { margin-top: 20px; font-weight: 500; margin-bottom: 35px; color: var(--white-color); font-size: 55px; line-height: 65px; transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .slider-one_heading span { color: transparent; font-weight: 800; font-family: "Lexend Deca", sans-serif; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: rgba(var(--white-color-rgb), 1); } .slider-one .swiper-slide-active .slider-one_heading { -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .slider-one_text { margin-top: 20px; font-weight: 300; font-size: 18px; max-width: 600px; margin: 0 auto; text-align: center; line-height: 32px; margin-bottom: 35px; color: var(--white-color); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .slider-one .swiper-slide-active .slider-one_text { -webkit-transition-delay: 1200ms; -moz-transition-delay: 1200ms; -ms-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); text-transform: capitalize; } .slider-one_arrow { position: absolute; content: ""; right: 0%; bottom: -30px; width: 227px; height: 202px; background-repeat: no-repeat; } .slider-one .slider-one_button { position: relative; gap: 5px; display: inline-block; transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .slider-one_video { position: relative; } .slider-one .slider-one_button .slider-one_video:before { position: absolute; content: ""; left: -18px; top: 50%; height: 20px; width: 20px; transform: translateY(-50%); background-color: var(--white-color); } .slider-one .swiper-slide-active .slider-one_button { -webkit-transition-delay: 1400ms; -moz-transition-delay: 1400ms; -ms-transition-delay: 1400ms; -o-transition-delay: 1400ms; transition-delay: 1400ms; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } /* Play Box */ .slider-one .play-box { position: relative; } .slider-one .play-box:hover .fa { color: var(--white-color); border-color: var(--black-color); background-color: var(--main-color); } .slider-one .play-box .fa { position: relative; width: 62px; height: 62px; margin-top: 3px; font-size: 18px; line-height: 50px; border-radius: 50px; display: inline-block; color: var(--white-color); text-align: center !important; border: 6px solid var(--white-color); transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; background-color: var(--main-color); } /* Slider Socials Box */ .slider-one_socials { position: absolute; left: 0px; bottom: 0px; z-index: 1; padding: 25px 30px; border-radius: 0px 50px 50px 0px; background-color: rgba(var(--white-color-rgb), 0.15); } .slider-one_socials a { position: relative; font-size: 14px; margin: 0px 15px; color: var(--white-color); } .slider-one_socials a::before { position: absolute; content: "-"; right: -20px; font-size: 24px; color: var(--white-color); } .slider-one_socials a:hover { color: var(--main-color); } .slider-one_socials a:last-child::before { display: none; } .slider-two_options { position: absolute; right: 0px; bottom: 0px; z-index: 10; } .slider-two_options .button { position: relative; border-radius: 40px 0px 0px 0px; background-color: var(--white-color); border: 10px solid var(--white-color); border-bottom: none; border-right: none; } .slider-two_options .button a { position: relative; font-weight: 600; font-size: 16px; display: flex; gap: 55px; padding: 15px 30px; color: var(--black-color); } .slider-two_options .button i { position: relative; font-weight: 500; font-family: "Font Awesome 6 Free"; } .slider-two_options .button a:hover { color: var(--main-color); } .slider-two_authors { position: relative; display: flex; gap: 20px; align-items: center; background-color: var(--white-color); border-left: 10px solid var(--white-color); border-right: 25px solid var(--white-color); border-radius: 0px 0px 0px; padding: 5px 0px 20px; } .slider-two_authors ul { position: relative; display: flex; margin-left: 40px; } .slider-two_authors ul li { position: relative; width: 54px; height: 54px; margin-left: -20px; border-radius: 50px; display: inline-block; border: 3px solid var(--white-color); } .slider-two_reviews { position: relative; font-weight: 800; font-size: 26px; color: var(--main-color); } .slider-two_reviews span { position: relative; font-weight: 600; font-size: 16px; color: var(--black-color); } /*** ==================================================================== About One ==================================================================== ***/ .about-one { position: relative; padding: 80px 0px 70px; background-image: linear-gradient( to bottom, #f6f6f6, #f8f8f8, #fafafa, #fdfdfd, #ffffff ); } .about-one_pattern-layer { position: absolute; left: 0px; top: 0px; right: 0px; height: 70px; background-repeat: repeat-x; animation: slideBackground 10s linear infinite; } .about-one_cap { position: absolute; right: 0px; bottom: 100px; width: 348px; height: 205px; } @keyframes slideBackground { 0% { background-position: 0 0; } 100% { background-position: 100% 0; } } .about-one .sec-title_heading { /* position: absolute; */ /* left: 295px; */ /* top: -25px; */ /* line-height: 65px; */ /* letter-spacing: -1px; */ } .about-one_image-column { position: relative; margin-bottom: 30px; } .about-one_image-outer { position: relative; } .about-one_image-outer .image { position: relative; display: block; opacity: 0; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; clip-path: polygon(0 0, 15% 0, 15% 100%, 0% 100%); } .about-one_image-outer .image.now-in-view { opacity: 1; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .about-one_image-outer .image img { position: relative; width: 100%; display: block; overflow: hidden; border-radius: 30px; } .about-one_image-column .column:nth-child(2) .image { position: relative; margin-top: 55px; } .about-construction_image { position: absolute; left: 30px; bottom: 185px; } .about-one_button { position: relative; margin-top: 300px; } .about-one_content-column { position: relative; margin-bottom: 30px; } .about-one_content-outer { position: relative; margin-top: 55px; padding-left: 20px; } /* Feature Block One */ .feature-block_one { position: relative; margin-bottom: 18px; } .feature-block_one-title { position: relative; font-weight: 500; margin-bottom: 12px; color: var(--black-color); font-size: 20px; } .feature-block_one-text { position: relative; font-weight: 300; font-size: 16px; color: #0f0f0f; line-height: 28px; } /* Feature Block Two */ .feature-block_two { position: relative; margin-bottom: 30px; } .feature-block_two-inner { position: relative; overflow: hidden; border-radius: 25px; padding: 12px 25px 30px; background-color: var(--main-color); } /* .feature-block_two-inner:hover { background-image: linear-gradient( to bottom, #fe5d01, #f65a01, #ed5701, #e55401, #dd5101 ); } */ .feature-block_two-title { position: relative; font-size: 20px; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.4; color: var(--white-color); font-family: "Lexend Deca", sans-serif; } .feature-block_two-icon { position: relative; display: block; text-align: right; margin-bottom: 10px; border-bottom: 1px solid var(--white-color); } .feature-block_two-icon i { position: relative; display: inline-block; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .feature-block_two-inner:hover .feature-block_two-icon i { transform: rotateY(180deg); } .feature-block_two_count { position: relative; font-weight: 500; font-size: 48px; line-height: 50px; color: var(--white-color); font-family: "Lexend Deca", sans-serif; } .feature-block_two_count sup { position: relative; color: var(--main-color); } .feature-block_two-inner:hover .feature-block_two_count sup { color: var(--white-color); } .feature-block_two_text { position: relative; font-size: 12px; color: var(--white-color); } /*** ==================================================================== Offer One ==================================================================== ***/ .service-one { position: relative; overflow: hidden; z-index: 1; padding: 20px 0px 40px; } .service-one_pattern-layer { position: absolute; left: 0px; top: 0px; bottom: 0px; width: 150%; overflow: hidden; border-radius: 40px 40px; background-repeat: repeat; } .service-one_shadow { position: absolute; left: 0px; top: 0px; bottom: 0px; width: 100%; z-index: 1; background-position: right bottom; background-repeat: no-repeat; } .service-one .auto-container { max-width: 1450px; } .service-one .inner-container { padding-top: 100px; padding-bottom: 100px; } .service-one .inner-container:before { position: absolute; content: ""; left: 0px; top: 0px; bottom: 0px; width: 150%; border-radius: 0px 0px 0px 0px; background-color: var(--black-color); } .service-one_title { position: relative; margin-bottom: 10px; } .service-one_title .service-one_arrow { position: absolute; right: 8px; top: 9px; width: 70px; height: 70px; font-size: 24px; text-align: center; line-height: 70px; border-radius: 50px; display: inline-block; color: var(--white-color); transform: rotate(-45deg); background-color: var(--black-color); } .service-one_title:last-child { margin-bottom: 0px; } .service-one_heading { font-weight: 600; color: var(--white-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .service-one_heading a { position: relative; display: block; border-radius: 50px; color: var(--white-color); background-color: rgba(var(--white-color-rgb), 0.12); padding: 28px 25px 28px 50px; } .service-one_title.active .service-one_arrow, .service-one_title:hover .service-one_arrow { color: var(--black-color); background-color: var(--white-color); } .service-one_title.active .service-one_heading a, .service-one_title:hover .service-one_heading a { color: var(--white-color); background-color: var(--main-color); } .service-one_image-column { position: relative; z-index: 10; } .service-one_image-outer { position: relative; height: 100%; } .service-one_images_outer { position: relative; height: 100%; } .service-one_title.active .service-one_subtitle, .service-one_title:hover .service-one_subtitle { background-color: var(--color-two); } .service-one_image { position: absolute; right: 15px; top: 0px; opacity: 0; display: block; transition: all 0.5s; -webkit-transition: all 0.5s; -webkit-transform: rotate(-5deg) translateX(0px); transform: rotate(-5deg) translateX(0px); } .service-one_image > img { position: relative; width: 100%; display: block; overflow: hidden; border-radius: 30px; } .service-one_image.active { opacity: 1; -webkit-transform: rotate(0deg) translateX(0px); transform: rotate(0deg) translateX(0px); } .service-one_content-column { position: relative; z-index: 10; } .service-one_content-outer { position: relative; padding-left: 70px; padding-right: 60px; } .service-one_content { position: relative; padding-top: 35px; } .service-one_sub-title { position: relative; font-weight: 600; color: var(--white-color); } .service-one_text { position: relative; font-weight: 300; font-size: 16px; line-height: 28px; margin-top: 12px; color: var(--white-color); } .service-one_button { position: absolute; right: 5px; top: -90px; padding: 10px 10px 0px; border-radius: 50px 0px 50px 50px; } /*** ==================================================================== Project One ==================================================================== ***/ .project-one { position: relative; border-radius: 50px 50px; padding: 120px 0px 100px; background-color: #f5f5f5; } .project-one .auto-container { max-width: 1320px; } .project-block_one.style-two .project-block_one-overlay { display: flex; justify-content: end; } .project-block_one.style-two .project-block_one-image:before { left: -1px; right: auto; background: url(../images/icons/shape-2.png); } .project-block_one { position: relative; margin-bottom: 50px; } .project-block_one-inner { position: relative; } .project-block_one-image { position: relative; } .project-block_one-image img { position: relative; width: 100%; display: block; overflow: hidden; border-radius: 40px 40px 40px 40px; } .project-block_one-image:before { position: absolute; content: ""; right: 0px; top: -1px; width: 393px; height: 111px; z-index: 1; background: url(../images/icons/shape-1.png); background-repeat: no-repeat; } .project-block_one-overlay { position: absolute; left: 100px; top: 110px; right: 130px; } .project-block_one-overlay_inner { position: relative; width: 100%; max-width: 478px; min-height: 332px; padding: 42px 45px 42px; background-size: cover; } .project-block_one-title { position: relative; font-weight: 600; font-size: 18px; color: var(--main-color); } .project-block_one-location { position: relative; font-weight: 600; font-size: 18px; display: flex; gap: 15px; align-items: center; color: var(--black-color); } .project-block_one-location .icon { position: relative; width: 24px; display: inline-block; } .project-block_one-heading { font-weight: 500; margin-top: 18px; } .project-block_one-heading a { position: relative; color: var(--black-color); } .project-block_one-heading a:hover { color: var(--main-color); } .project-block_one-text { position: relative; font-weight: 300; font-size: 16px; color: #0f0f0f; line-height: 30px; margin-top: 25px; } .project-block_one-arrow { position: absolute; right: 66px; bottom: -30px; width: 59px; height: 59px; font-size: 20px; line-height: 59px; text-align: center; border-radius: 50px; display: inline-block; color: var(--white-color); transform: rotate(-45deg); background-color: var(--main-color); } .project-block_one-arrow:hover { background-color: var(--black-color); } /*** ==================================================================== Testimonial One ==================================================================== ***/ .testimonial-one { position: relative; overflow: hidden; padding: 110px 0px 110px; background-color: var(--white-color); } .testimonial-one_circle { position: absolute; right: -250px; top: 80px; width: 536px; height: 536px; border-radius: 550px; border: 80px solid #f5f5f5; } .testimonial-one .single-item_carousel-pagination { position: absolute; top: 5%; z-index: 999; right: 0px !important; left: auto !important; width: 20px !important; } .testimonial-one .single-item_carousel-pagination .swiper-pagination-bullet { position: relative; opacity: 1; width: 10px; height: 10px; display: block; background: none; margin: 30px 0px !important; transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; border-radius: 50px; display: block; background-color: #d9d9d9; } .testimonial-one .single-item_carousel-pagination .swiper-pagination-bullet::before { position: absolute; content: ""; left: -8px; top: -8px; right: -8px; bottom: -8px; opacity: 0; border-radius: 50px; border: 1px solid var(--white-color); } .testimonial-one .single-item_carousel-pagination .swiper-pagination-bullet:hover, .testimonial-one .single-item_carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; background-color: var(--black-color); } .testimonial-one .single-item_carousel-pagination .swiper-pagination-bullet:hover::before, .testimonial-one .single-item_carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 1; border-color: var(--black-color); } .testimonial-one_options { position: relative; font-size: 24px; font-weight: 600; color: var(--black-color); } .testimonial-one_options .rating { position: relative; font-size: 24px; margin-top: 15px; color: var(--main-color); } .testimonial-one__authors { position: relative; margin-top: 10px; margin-left: 60px; } .testimonial-one__authors li { position: relative; width: 74px; height: 74px; margin-left: -30px; border-radius: 50px; display: inline-block; border: 3px solid var(--white-color); } .testimonial-one__trusted { position: relative; font-size: 24px; color: #0f0f0f; font-weight: 500; line-height: 36px; margin-left: 40px; } .testimonial-one__trusted span { position: relative; display: block; font-size: 22px; font-weight: 300; color: var(--black-color); } .testimonial-one_carousel { position: relative; margin-top: 50px; } .testimonial-block_one { position: relative; } .testimonial-block_one-inner { position: relative; } .testimonial-block_one-text { position: relative; font-size: 40px; font-weight: 500; line-height: 55px; max-width: 990px; color: var(--black-color); } .testimonial-block_one-designation { position: relative; font-size: 20px; font-weight: 500; line-height: 30px; margin-top: 30px; color: var(--black-color); } .testimonial-block_one-designation span { position: relative; display: block; font-size: 16px; color: #0f0f0f; font-weight: 300; } /*** ==================================================================== Counter One ==================================================================== ***/ .counter-one { position: relative; overflow: hidden; padding: 76px 20px; } .counter-one_pattern { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-position: center bottom; background-repeat: repeat-x; animation: slideBackground 20s linear infinite; } .counter-one .counter-block_one:nth-child(2n + 1) { transform: translateY(90px); } .counter-block_one { position: relative; margin-bottom: 120px; } .counter-block_one-inner { position: relative; padding-left: 40px; } .counter-block_one-outline { position: absolute; left: 0px; top: 90px; width: 2px; height: 180%; background-image: linear-gradient( to bottom, #ab8b40, #ab8b40, #ab8b40, #ab8b40, #ab8b40 ); } .counter-block_one-outline:before { position: absolute; content: ""; left: -5px; top: 0px; width: 14px; height: 14px; border-radius: 50px; background-color: #ab8b40; outline: 1px dashed rgb(171 139 64); outline-offset: 10px; } .counter-block_one-count { position: relative; font-size: 64px; font-weight: 500; line-height: 1em; color: rgb(255 255 255); font-family: "Lexend Deca", sans-serif; } .counter-block_one-count sup { position: relative; color: var(--main-color); } .counter-block_one p { color: #ffffff; } .counter-block_one-text { position: relative; font-size: 18px; font-weight: 500; line-height: 31px; color: rgb(255 255 255); font-family: "Lexend Deca", sans-serif; text-transform: capitalize; } .counter-block_one-count img { width: 88px; padding-bottom: 14px; margin-top: 5px; } /*** ==================================================================== Faq One ==================================================================== ***/ .faq-one { position: relative; padding: 60px 0px 75px; background-color: #f5f5f5; } .faq-one.style-two { background-color: inherit; background-position: left top; background-repeat: no-repeat; } .faq-one.style-two:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; height: 50%; z-index: -1; background-image: linear-gradient( to bottom, #f5f5f5, #f7f7f7, #fafafa, #fcfcfc, #ffffff ); } .faq-one_pattern { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 70px; background-position: center bottom; background-repeat: repeat-x; animation: slideBackground 10s linear infinite; } .faq-one_image-column { position: relative; margin-bottom: 30px; } .faq-one_image { position: relative; margin-left: -180px; } .faq-one_accordian-column { position: relative; margin-bottom: 30px; } .faq-one_accordian-outer { position: relative; padding-left: 40px; } /*** ==================================================================== Accordion Style ==================================================================== ***/ .accordion-box { position: relative; z-index: 1; } .accordion-box .block { position: relative; border-radius: 50px; margin-bottom: 25px; background-color: var(--white-color); } .accordion-box .block.active-block { border-radius: 35px; } .accordion-box .block:last-child { margin-bottom: 0px; } .accordion-box .block .acc-btn { position: relative; cursor: pointer; line-height: 30px; font-weight: 500; font-size: 20px; border-radius: 50px; padding: 18px 59px 19px 35px; color: var(--black-color); transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; font-family: "Lexend Deca", sans-serif; background-image: linear-gradient( to right, #eeeeee, #f2f2f2, #f6f6f6, #fbfbfb, #ffffff ); } .accordion-box .block .acc-btn.active { background: none; } .accordion-box .block .icon-outer { position: absolute; right: 12px; top: 10px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .accordion-box .block .icon-outer .icon { position: relative; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50px; display: inline-block; transform: rotate(-45deg); color: var(--white-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--main-color); } .accordion-box .block .acc-btn.active .icon-outer .icon { transform: rotate(45deg); background-color: var(--black-color); } .accordion-box .block.active-block .icon { opacity: 1; color: var(--white-color); } .accordion-box .block .acc-content { position: relative; display: none; } .accordion-box .block .acc-content .content-text { } .accordion-box .block .acc-content.current { display: block; } .accordion-box .block .content { position: relative; padding: 0px 30px 30px; } .accordion-box .block .content .text { line-height: 32px; font-size: 18px; color: #0f0f0f; } .accordion-box.style-two .block { border: 1px solid rgba(0, 0, 0, 0.6); } .accordion-box.style-two .block .acc-btn { background: none; } .accordion-box.style-two .block.active-block { background-color: #eeeeee; } .clients-box_one { position: relative; /* margin-top: 80px; */ } .clients-box_one.style-two { position: relative; margin-bottom: 100px; } .clients-box_one .client-image { position: relative; text-align: center; } .clients-box_one .client-image img { height: 100px; object-fit: contain; } .client-one_subtitle { position: relative; padding: 10px 25px; color: #0f0f0f; font-size: 16px; font-weight: 500; margin-top: 70px; border-radius: 50px; display: inline-block; border: 1px solid #0f0f0f; } /*** ==================================================================== Contact One ==================================================================== ***/ .contact-one { position: relative; padding: 65px 0px 90px; } .contact-one .sec-title_text { font-weight: 4 00; font-size: 21px; line-height: 32px; color: var(--black-color); } .info-block_one { position: relative; margin-bottom: 45px; } .info-block_one-inner { position: relative; color: #0f0f0f; font-size: 16px; padding-left: 59px; } .info-block_one-inner a { color: #0f0f0f; } .info-block_one-icon { position: absolute; left: 0px; top: 0px; width: 50px; height: 50px; font-size: 22px; border-radius: 50px; text-align: center; line-height: 50px; display: inline-block; color: var(--white-color); background-color: var(--main-color); } .info-block_one-inner strong { position: relative; display: block; font-size: 24px; line-height: 30px; margin-bottom: 5px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } /* Contact Form */ .contact-form { position: relative; z-index: 10; } .contact-form .form-group { margin-bottom: 20px; } .contact-form .form-group label { color: #000000; margin-bottom: 8px; margin-left: 10px; display: block; } .contact-form .form-group:last-child { margin-bottom: 0px; } .contact-form .form-group input[type="text"], .contact-form .form-group input[type="date"], .contact-form .form-group input[type="file"], .contact-form .form-group input[type="password"], .contact-form .form-group input[type="tel"], .contact-form .form-group input[type="email"], .contact-form .form-group select { position: relative; display: block; width: 100%; height: 60px; line-height: 28px; padding: 10px 30px; font-weight: 300; font-size: 16px; background: none; color: var(--black-color); border-radius: 50px; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; background-color: #f5f5f5; } .contact-form .form-group input[type="text"]:focus, .contact-form .form-group input[type="password"]:focus, .contact-form .form-group input[type="tel"]:focus, .contact-form .form-group input[type="email"]:focus, .contact-form .form-group select:focus, .contact-form .form-group textarea:focus { } .contact-form .form-group textarea { position: relative; display: block; width: 100%; height: 130px; resize: none; font-size: 16px; font-weight: 300; line-height: 26px; padding: 20px 20px; border-radius: 25px; color: var(--black-color); background-color: #f5f5f5; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { } .contact-form input.error, .contact-form select.error, .contact-form textarea.error { border-color: #ff0000 !important; } .contact-form label.error { display: block; line-height: 24px; padding: 5px 0px 0px; margin: 0px; font-size: 12px; color: #ff0000; font-weight: 500; } .contact-form_text { position: relative; font-weight: 600; font-size: 18px; line-height: 32px; color: var(--black-color); } .contact-one .video-image { position: relative; margin-top: -70px; z-index: 1; } .contact-one .video-image img { position: relative; width: 100%; display: block; overflow: hidden; border-radius: 40px; } .contact-one .video-image:before { position: absolute; content: ""; right: 0px; top: 0px; z-index: 1; width: 724px; height: 156px; background: url(../images/background/pattern-5.png); background-repeat: no-repeat; } .contact-one_video { position: absolute; right: 90px; bottom: -90px; width: 176px; height: 176px; font-size: 40px; text-align: center; border-radius: 100px; line-height: 176px; display: inline-block; color: var(--white-color); background-color: var(--black-color); } .contact-one_video:before { position: absolute; content: ""; right: 7px; top: 7px; left: -7px; bottom: -7px; z-index: -1; border-radius: 150px; background-color: var(--main-color); } .contact-one_video .ripple, .contact-one_video .ripple:before, .contact-one_video .ripple:after { position: absolute; top: 50%; left: 50%; width: 176px; height: 176px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -moz-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -ms-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -o-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .contact-one_video .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .contact-one_video .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } @-webkit-keyframes ripple { 70% { box-shadow: 0 0 0 70px rgba(253, 167, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 167, 0, 0); } } @keyframes ripple { 70% { box-shadow: 0 0 0 70px rgba(253, 167, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 167, 0, 0); } } /*** ==================================================================== Marketing One ==================================================================== ***/ .marketing-one { position: relative; z-index: 1; overflow: hidden; } .marketing-one .animation_mode { position: relative; min-height: 100px; margin-left: -10px; } .marketing-one .animation_mode h1 { font-weight: 800; font-size: 64px; line-height: 1em; padding: 20px 0px 6px; display: inline-block; color: var(--black-color); } .marketing-one .animation_mode h1.light { color: transparent; font-weight: 800; opacity: 0.7; -webkit-text-stroke-width: 2px; font-family: "Lexend Deca", sans-serif; -webkit-text-stroke-color: rgba(var(--black-color-rgb), 1); } .marketing-one .animation_mode .marketing-one_icon { position: relative; top: -15px; line-height: 1em; margin: 0px 15px; } .marketing-one .animation_mode-two { position: relative; min-height: 100px; top: 0px; margin-left: -10px; transform: rotate(0deg); background-color: var(--color-five); } .marketing-one .animation_mode-two::before { position: absolute; content: ""; left: 0px; top: 8px; right: 0px; bottom: 8px; background-color: var(--main-color); } .marketing-one .animation_mode-two h1 { font-weight: 800; font-size: 36px; line-height: 1em; padding: 30px 0px 15px; display: inline-block; color: var(--white-color); } .marketing-one .animation_mode-two .marketing-one_icon { position: relative; top: -8px; line-height: 1em; margin: 0px 15px; } /*** ==================================================================== Blog One ==================================================================== ***/ .news-one { position: relative; padding: 110px 0px 60px; } .news-one.style-two { padding-top: 60px; background-color: #f5f5f5; } .news-block_one { position: relative; z-index: 2; margin-bottom: 30px; } .news-block_one-inner { position: relative; } .news-block_one-image_outer { position: relative; } .news-block_one-image { position: relative; overflow: hidden; border-radius: 30px; display: flex; align-items: center; justify-content: center; } .news-block_one-image .theme-btn { position: absolute; opacity: 0; } .news-block_one:hover .news-block_one-image .theme-btn { opacity: 1; z-index: 100; } .news-block_one-image:before { position: absolute; /* content: ''; */ right: 0px; bottom: 0px; width: 174px; height: 66px; z-index: 9; background: url(../images/icons/shape-3.png); background-repeat: no-repeat; } .news-block_one-image img:first-child { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .news-block_one-inner:hover .news-block_one-image img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .news-block_one-inner:hover .news-block_one-image img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .news-block_one-image img { position: relative; width: 100%; display: block; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; height: 280px; object-fit: cover; } .news-block_one-content { position: relative; padding-top: 30px; } .news-block_one-date { position: absolute; right: 10px; bottom: 0px; z-index: 10; font-size: 16px; font-weight: 600; padding: 9px 35px; border-radius: 50px; letter-spacing: 1px; color: var(--white-color); font-family: "Lexend Deca", sans-serif; background-color: var(--black-color); } .news-block_one-meta { position: relative; } .news-block_one-meta li { position: relative; font-size: 16px; padding-left: 30px; margin-right: 15px; display: inline-block; color: var(--black-color); } .news-block_one-meta li .icon { position: absolute; left: 0px; top: 2px; line-height: 1em; color: var(--main-color); } .news-block_one-meta li:last-child { margin-right: 0px; padding-right: 0px; } .news-block_one-title { position: relative; margin-top: 0; margin-bottom: 5px; } .news-block_one-title a { position: relative; color: var(--black-color); } .news-block_one-title a:hover { color: var(--main-color); } .news-block_one-text { position: relative; color: #0f0f0f; font-size: 16px; line-height: 28px; margin-top: 15px; } .news-block_one-button { position: relative; margin-top: 25px; } .news-block_one-button:before { position: absolute; content: ""; left: 25px; bottom: 0px; right: 0px; border-bottom: 2px solid #d6d6d6; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .news-block_one-button:after { position: absolute; content: "\f0da"; right: 0px; bottom: -10px; color: #d6d6d6; font-size: 20px; font-weight: 800; font-family: "Font Awesome 6 Free"; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .news-block_one-more { position: relative; font-weight: 500; letter-spacing: 1px; padding: 17px 35px; border-radius: 50px 50px 0px 50px; display: inline-block; background-color: #d6d6d6; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .news-block_one-inner:hover .news-block_one-button:after { color: var(--main-color); } .news-block_one-inner:hover .news-block_one-button:before { border-color: var(--main-color); } .news-block_one-inner:hover .news-block_one-more { color: var(--white-color); background-color: var(--main-color); } /*** ==================================================================== Banner One ==================================================================== ***/ .banner-one { position: relative; overflow: hidden; padding: 270px 0px 70px; } .banner-one_image { position: absolute; right: 0px; top: 0px; width: 50%; bottom: 0px; overflow: hidden; border-radius: 0px 0px 0px 75px; } .banner-one_content { position: relative; } .banner-one_text { position: relative; font-weight: 600; font-size: 20px; line-height: 34px; margin-bottom: 45px; color: var(--black-color); } .banner-one_title { position: relative; font-size: 100px; line-height: 1em; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .banner-one_subtitle { position: relative; font-size: 276px; font-weight: 800; line-height: 1em; color: var(--main-color); font-family: "Lexend Deca", sans-serif; } .banner-one_subtitle span { position: relative; color: var(--white-color); } .banner-one_button { position: relative; } .banner-one_video { position: absolute; left: 46%; top: 10%; width: 126px; height: 126px; font-size: 30px; text-align: center; border-radius: 100px; line-height: 126px; display: inline-block; color: var(--white-color); background-color: var(--black-color); } .banner-one_video:before { position: absolute; content: ""; right: 7px; top: 7px; left: -7px; bottom: -7px; z-index: -1; border-radius: 150px; background-color: var(--main-color); } .banner-one_video .ripple, .banner-one_video .ripple:before, .banner-one_video .ripple:after { position: absolute; top: 50%; left: 50%; width: 126px; height: 126px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -moz-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -ms-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -o-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .banner-one_video .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .banner-one_video .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } /*** ==================================================================== Service Two ==================================================================== ***/ .service-two { position: relative; overflow: hidden; padding: 110px 0px 140px; background-position: right bottom; background-repeat: no-repeat; } .service-two .auto-container { max-width: 1650px; } .service-two .service-block_one { width: 20%; padding: 0px 15px; } .service-block_one { position: relative; margin-bottom: 30px; } .service-block_one-inner { position: relative; padding: 35px 35px; border-radius: 15px; border: 1px solid rgba(0, 0, 0, 0.1); } .service-block_one-icon { position: relative; width: 80px; height: 80px; line-height: 80px; border-radius: 50px; text-align: center; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--main-color); } .service-block_one-inner:hover .service-block_one-icon { transform: rotateY(180deg); } .service-block_one-heading { position: relative; margin-top: 40px; } .service-block_one-heading a { position: relative; color: var(--black-color); } .service-block_one-text { position: relative; font-size: 15px; color: #0f0f0f; line-height: 27px; margin-top: 20px; margin-bottom: 28px; } .service-block_one-more { position: relative; font-size: 15px; margin-top: 20px; font-weight: 500; color: var(--main-color); font-family: "Lexend Deca", sans-serif; } .service-block_one_image { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0; overflow: hidden; border-radius: 15px; background-size: cover; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transform: scale(0.2, 1); } .service-block_one-inner:hover .service-block_one_image { opacity: 1; transform: scale(1, 1); } .service-block_one-inner:hover .service-block_one-text, .service-block_one-inner:hover .service-block_one-heading a { color: var(--white-color); } .service-block_one_hover-image { position: absolute; right: -30px; top: 40px; z-index: 1; opacity: 0; width: 210px; height: 100px; border-radius: 15px; transform: scale(1, 0.2); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .service-block_one-inner:hover .service-block_one_hover-image { opacity: 1; transform: scale(1, 1); } .service-two_btn { position: relative; margin-top: 30px; } /*** ==================================================================== Fluid One ==================================================================== ***/ .fluid-one { position: relative; } .fluid-one:before { position: absolute; content: ""; right: 0px; top: 90px; bottom: 0px; left: 0px; background-color: #f5f5f5; } .fluid-one .outer-container { position: relative; } .fluid-one .left-box { position: absolute; left: 0px; top: 0px; width: 50%; height: 100%; background-size: cover; border-radius: 0px 50px 50px 0px; } .fluid-one_image { position: relative; display: none; } .fluid-one_image img { position: relative; width: 100%; display: block; } .fluid-one .right-box { position: relative; float: right; width: 50%; padding: 210px 15px 40px 80px; } .fluid-one .right-box_inner { position: relative; max-width: 650px; } .fluid-one .sec-title_text { max-width: 550px; } .fluid-one_list { position: relative; margin-bottom: 50px; } .fluid-one_list li { position: relative; font-size: 18px; font-weight: 500; margin-bottom: 20px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .fluid-one_list li i { position: relative; margin-right: 20px; color: var(--main-color); } .fluid-one_list li:last-child { margin-bottom: 0px; } .fluid-one_experiance { position: relative; line-height: 1em; font-size: 120px; font-weight: 500; color: #ffffff; -webkit-text-stroke-width: 2px; font-family: "Lexend Deca", sans-serif; -webkit-text-stroke-color: rgba(var(--black-color-rgb), 1); } .fluid-one_experiance span { position: relative; font-size: 16px; font-weight: 300 !important; margin-left: -30px; letter-spacing: 2px; color: var(--black-color); text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); } .fluid-one_author { position: relative; } .fluid-one_author-inner { position: relative; font-size: 20px; min-height: 98px; font-weight: 500; padding-top: 22px; padding-left: 125px; color: var(--main-color); font-family: "Lexend Deca", sans-serif; } .fluid-one_author-image { position: absolute; left: 0px; top: 0px; width: 98px; height: 98px; border-radius: 150px; border: 3px solid var(--white-color); } .fluid-one_author-inner span { position: relative; color: #0f0f0f; font-size: 14px; display: block; margin-top: 5px; } .fluid-one_video { position: relative; padding: 8px 8px; border-radius: 200px; background-color: var(--main-color); } .fluid-one_video-text { position: relative; font-size: 16px; color: var(--white-color); font-family: "Lexend Deca", sans-serif; } .fluid-one_author { position: relative; display: inline-block; } .fluid-one_video-play { position: relative; width: 80px; height: 80px; font-size: 22px; text-align: center; border-radius: 100px; line-height: 80px; display: inline-block; color: var(--white-color); background-color: var(--black-color); } .fluid-one_video-play:before { position: absolute; content: ""; right: 7px; top: 7px; left: -7px; bottom: -7px; z-index: -1; border-radius: 150px; background-color: var(--main-color); } .fluid-one_video-play .ripple, .fluid-one_video-play .ripple:before, .fluid-one_video-play .ripple:after { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .fluid-one_video-play .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .fluid-one_video-play .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } /*** ==================================================================== Counter Two ==================================================================== ***/ .counter-two { position: relative; padding: 100px 0px 120px; background-color: #f5f5f5; } .counter-two_pattern { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 70px; background-position: center bottom; background-repeat: repeat-x; animation: slideBackground 10s linear infinite; } .counter-block_two { position: relative; margin-bottom: 30px; } .counter-block_two-inner { position: relative; padding: 35px 30px 30px; border-radius: 25px; background-color: rgba(0, 0, 0, 0.05); } .counter-block_two-count { position: relative; font-size: 60px; font-weight: 600; line-height: 1em; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .counter-block_two-count sup { position: relative; color: var(--main-color); } .counter-block_two-text { position: relative; font-size: 15px; font-weight: 500; line-height: 28px; margin-bottom: 100px; padding-bottom: 10px; color: var(--black-color); border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-family: "Lexend Deca", sans-serif; } .counter-block_two-icon { position: relative; margin-bottom: 20px; } /*** ==================================================================== Project Two ==================================================================== ***/ .project-two { position: relative; /* border-radius: 0px 0px 50px 50px; */ padding: 110px 0px 110px; } .project-two_bg { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-size: cover; } .project-two .outer-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-left: -150px; margin-right: -150px; overflow: hidden; } @media only screen and (max-width: 1699px) { .project-two .outer-box { margin: 0 -50px; padding: 0 10px; } } @media (max-width: 1399.98px) { .project-two .outer-box { margin: 0; } } @media (max-width: 991.98px) { .project-two .outer-box { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; } } .project-two .project-block-four { min-height: 470px; margin-right: 5px; margin-left: 5px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; will-change: flex; } .project-two .project-block-four:hover, .project-two .project-block-four.active { -webkit-box-flex: 2; -ms-flex: 2; flex: 2; } @media (max-width: 991.98px) { .project-two .project-block-four { width: 50%; -webkit-box-flex: 0 !important; -ms-flex: 0 0 50% !important; flex: 0 0 50% !important; padding: 0 15px; margin-left: 0; margin-right: 0; } } @media (max-width: 767.98px) { .project-two .project-block-four { width: 100%; -webkit-box-flex: 0 !important; -ms-flex: 0 0 100% !important; flex: 0 0 100% !important; } .h1 { height: auto !important; object-fit: cover; } .wh { height: auto !important; width: auto !important; } .wh1 { width: auto !important; height: auto !important; object-fit: cover; } } .project-block-four { position: relative; margin-bottom: 30px; -webkit-transition: 0.8s cubic-bezier(0.29, 0, 0.2, 1); transition: 0.8s cubic-bezier(0.29, 0, 0.2, 1); } .project-block-four .active .image-box .image:before { opacity: 0.3; -webkit-transform: scale(1); transform: scale(1); } .project-block-four .active .icon { background-color: var(--theme-color-light); color: var(--theme-color-dark); } .project-block-four .active .content-box .float-text { opacity: 1; } .project-block-four .active .content-box .cat { opacity: 1; -webkit-transform: translate(0); transform: translate(0); -webkit-transition-delay: 600ms; transition-delay: 600ms; } .project-block-four .active .content-box .title { opacity: 1; -webkit-transform: translate(0); transform: translate(0); -webkit-transition-delay: 900ms; transition-delay: 900ms; } .project-block-four .active .content-box .button { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .project-block-four .active .content-box-hover .title { opacity: 0; -webkit-transform: translateY(100); transform: translateY(100); -webkit-transition-delay: 200ms; transition-delay: 200ms; } .project-block-four .inner-box { position: relative; overflow: hidden; border-radius: 30px; } .project-block-four .inner-box:hover .image-box .image:before { opacity: 0.3; -webkit-transform: scale(1); transform: scale(1); } .project-block-four .inner-box:hover .icon { background-color: var(--theme-color-light); color: var(--theme-color-dark); } .project-block-four .inner-box:hover .content-box .float-text { opacity: 1; } .project-block-four .inner-box:hover .content-box .cat { opacity: 1; -webkit-transform: translate(0); transform: translate(0); -webkit-transition-delay: 600ms; transition-delay: 600ms; } .project-block-four .inner-box:hover .content-box .title { opacity: 1; -webkit-transform: translate(0); transform: translate(0); -webkit-transition-delay: 900ms; transition-delay: 900ms; } .project-block-four .inner-box:hover .content-box .button { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .project-block-four .inner-box:hover .content-box-hover .title { opacity: 0; -webkit-transform: translateY(100); transform: translateY(100); -webkit-transition-delay: 200ms; transition-delay: 200ms; } .project-block-four .image-box { position: relative; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .project-block-four .image-box .image { position: relative; margin-bottom: 0; } .project-block-four .image-box .image::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; background: #1d1d29; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; z-index: 2; } .project-block-four .image-box .image::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; background: -webkit-gradient( linear, left top, left bottom, from(rgba(29, 29, 41, 0)), color-stop(75%, rgba(29, 29, 41, 0.75)) ); background: linear-gradient( to bottom, rgba(29, 29, 41, 0) 0%, rgba(29, 29, 41, 0.75) 75% ); -webkit-transition: all 300ms ease; transition: all 300ms ease; z-index: 2; } .project-block-four .image-box .image img { width: 100%; height: 470px; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .project-block-four .content-box-hover { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; z-index: 2; padding: 30px 30px; } .project-block-four .content-box-hover .title { -webkit-transform: rotate(180deg); -khtml-transform: rotate(180deg); transform: rotate(180deg); -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0; color: var(--white-color); -webkit-transition: all 300ms ease; transition: all 300ms ease; } .project-block-four .content-box-hover .title span { position: relative; display: block; font-size: 16px; color: var(--white-color); } .project-block-four .content-box-hover .title a { color: var(--white-color); } .project-block-four .content-box { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 3; padding: 30px 25px; } .project-block-four .content-box .float-text { position: relative; font-size: 16px; letter-spacing: 0.02em; opacity: 0; color: var(--white-color); -webkit-transition: all 300ms ease; transition: all 300ms ease; } .project-block-four .content-box .cat { position: relative; font-weight: 500; color: var(--white-color); display: inline-block; opacity: 0; font-size: 20px; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all 300ms ease; transition: all 300ms ease; padding-bottom: 15px; margin-top: 18px; border-bottom: 1px solid var(--white-color); } .project-block-four .content-box .cat:before { position: absolute; content: ""; right: 0px; bottom: -5px; width: 10px; height: 10px; border-radius: 50px; background-color: var(--white-color); } .project-block-four .content-box .cat .icon { position: relative; margin-right: 10px; } .project-block-four .content-box .title { position: relative; font-weight: 600; margin-bottom: 0; color: var(--white-color); -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 0; margin-top: 15px; margin-bottom: 15px; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .project-block-four .content-box .title a { position: relative; color: var(--white-color); } @media (max-width: 991.98px) { .project-block-four .content-box .title { font-size: 30px; } } .project-block-four .button { position: relative; margin-top: 15px; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } /*** ==================================================================== Price One ==================================================================== ***/ .price-one { position: relative; overflow: hidden; padding: 80px 0px 80px; } .price-one .auto-container { max-width: 1100px; } .price-one_circle { position: absolute; right: -250px; top: 25%; width: 536px; height: 536px; border-radius: 550px; border: 80px solid #f5f5f5; -webkit-animation: icon-bounce 0.8s ease-out infinite; animation: icon-bounce 0.8s ease-out infinite; } .price-one_shadow { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-position: left center; background-repeat: no-repeat; } .price-block_one { position: relative; margin-bottom: 30px; } .price-block_one-inner { position: relative; padding: 69px 34px 49px 34px; overflow: hidden; border-radius: 30px; background-color: #f5f5f5; } .price-block_one-inner:before { position: absolute; /* content: ''; */ top: 0px; left: 0px; right: 0px; bottom: 0px; opacity: 0; background-color: #121212; transform: scale(1, 0.2); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .price-block_one-inner:hover::before { opacity: 1; transform: scale(1, 1); } .price-block_one.active .price-block_one-list li, .price-block_one.active .price-block_one-title, .price-block_one.active .price-block_one-text, .price-block_one.active .price-block_one-price { color: var(--white-color); } .price-block_one.active .price-block_one-inner:before { /* opacity: 1; */ /* transform: scale(1, 1); */ } .price-block_one-featured { top: 15px; font-weight: 600; padding: 7px 20px; border-radius: 50px; display: inline-block; color: var(--main-color); font-family: "Lexend Deca", sans-serif; background-color: var(--white-color); } ul.price-block_one-list { margin-top: 28px; } .price-block_one-shadow { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-position: left bottom; background-repeat: no-repeat; } .price-block_one-title { position: relative; font-weight: 500; margin-top: 40px; color: var(--black-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .price-block_one-text { position: relative; font-weight: 600; font-size: 16px; line-height: 28px; margin-top: 10px; color: var(--black-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .price-block_one-inner:hover .price-block_one-title, .price-block_one-inner:hover .price-block_one-text, .price-block_one-inner:hover .price-block_one-price { color: var(--white-color); } .price-block_one-list { position: relative; } .price-block_one-list li { position: relative; font-size: 16px; padding-left: 30px; margin-bottom: 18px; color: var(--black-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .price-block_one-list li:before { position: absolute; content: ""; left: 0px; top: 0px; width: 87px; background-size: 18px !important; height: 93px; background: url(../images/icons/right-arrow.png) no-repeat; } .price-block_one-list li:last-child { margin-bottom: 0px; } .price-block_one-price { position: relative; font-size: 48px; font-weight: 500; line-height: 42px; text-align: center; margin-bottom: 15px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .price-block_one-price span { position: relative; display: block; font-size: 16px; font-weight: 500; } /*** ==================================================================== Marketing Two ==================================================================== ***/ .marketing-two { position: relative; z-index: 1; overflow: hidden; padding-bottom: 100px; } .marketing-two.style-two { margin-top: 110px; } .marketing-two .brands-mode { position: relative; display: flex; align-items: center; } .marketing-two .brand-conetnt { display: flex; align-items: center; justify-content: center; animation: slide-left 50s linear infinite; } .marketing-two .brand-conetnt.two { animation: slide-right 50s linear infinite; } .marketing-two .brand-conetnt.two h1 { color: var(--black-color); } .marketing-two .brand-conetnt h1 { font-weight: 800; font-size: 96px; line-height: 1em; padding: 0px 0px 6px; display: inline-block; color: transparent; font-weight: 800; -webkit-text-stroke-width: 2px; font-family: "Lexend Deca", sans-serif; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -webkit-text-stroke-color: rgba(var(-rgb), 1); } .marketing-two .brand-conetnt .marketing-two_icon { position: relative; top: 0px; width: 20px; height: 20px; line-height: 1em; margin: 0px 15px; border-radius: 50px; display: inline-block; border: 2px solid var(--main-color); } .marketing-two .brand-conetnt .animation_mode-two { position: relative; min-height: 100px; top: 0px; margin-left: -10px; } .marketing-two .brand-conetnt h1:hover { color: #000000; } .marketing-two .brand-conetnt h1 { font-weight: 800; font-size: 96px; line-height: 1em; padding: 0px 0px 6px; display: inline-block; color: transparent; font-weight: 800; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -webkit-text-stroke-width: 2px; font-family: "Lexend Deca", sans-serif; -webkit-text-stroke-color: rgba(var(--black-color-rgb), 1); } .marketing-two .brand-conetnt .marketing-two_icon { position: relative; top: 0px; width: 20px; height: 20px; line-height: 1em; margin: 0px 15px; border-radius: 50px; display: inline-block; border: 2px solid var(--main-color); } @-webkit-keyframes slide-left { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide-right { 0% { -webkit-transform: translateX(-90%); transform: translateX(-90%); } 100% { -webkit-transform: translateX(90%); transform: translateX(90%); } } /*** ==================================================================== Award One ==================================================================== ***/ .award-one { position: relative; overflow: hidden; padding: 140px 15px 130px; background-color: #f5f5f5; } .award-one .auto-container { position: relative; max-width: 1750px; } .award-one .inner-container { position: relative; } .award-one_pattern { position: absolute; left: 0px; right: 0px; top: 0px; height: 70px; background-position: center bottom; background-repeat: repeat-x; animation: slideBackground 10s linear infinite; } .award-one .animation_mode { min-height: 70px; } .award-one .animation_mode-two { min-height: 70px; margin-top: 30px; } .award-block_one { position: relative; display: inline-block; margin-bottom: 30px; margin: 0px 10px; } .award-block_one-inner { position: relative; padding: 10px 10px; align-items: center; border-radius: 50px; display: inline-block; background-color: var(--white-color); } .award-block_one-icon { position: relative; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 18px; border-radius: 50px; display: inline-block; color: var(--white-color); background-color: var(--main-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .award-block_one-title { position: relative; font-weight: 500; font-size: 20px; margin: 0px 15px; display: inline-block; color: var(--black-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; font-family: "Lexend Deca", sans-serif; } .award-block_one-title i { position: relative; font-weight: 300; color: #0f0f0f; font-size: 16px; margin-right: 10px; margin-left: 10px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; font-family: "Lexend Deca", sans-serif; } .award-block_one-inner:hover .award-block_one-title i, .award-block_one-inner:hover .award-block_one-title { color: var(--white-color); } .award-block_one-inner:hover .award-block_one-icon { color: var(--white-color); background-color: var(--black-color); } .award-block_one-inner:hover { background-color: var(--main-color); } /*** ==================================================================== Team One ==================================================================== ***/ .team-one { position: relative; overflow: hidden; padding: 110px 0px 110px; } .team-one.style-two { background-position: left top; background-repeat: no-repeat; } .team-one.style-two:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; height: 50%; z-index: -1; background-image: linear-gradient( to bottom, #f5f5f5, #f7f7f7, #fafafa, #fcfcfc, #ffffff ); } .team-one .auto-container { position: relative; } .team-one_pattern { position: absolute; left: 0px; bottom: 0px; right: 0px; height: 266px; background-position: center bottom; background-repeat: repeat-x; animation: slideBackground 10s linear infinite; } .team-block_one { position: relative; margin-bottom: 30px; } .team-block_one-inner { position: relative; } .team-block_one-image { position: relative; padding-top: 15px; padding-right: 15px; } .team-block_one-image:before { position: absolute; content: ""; right: 0px; top: 0px; left: 20px; bottom: 20px; border-radius: 25px; border: 1px solid rgba(0, 0, 0, 0.1); } .team-block_one-image:after { position: absolute; content: ""; right: 15px; top: 15px; width: 97px; height: 97px; background: url(../images/icons/team-shape.png) no-repeat; } .team-block_one-image img { position: relative; width: 100%; display: block; overflow: hidden; border-radius: 25px 0px 25px 25px; } .team-block_one-content { position: absolute; left: 30px; bottom: 30px; right: 50px; padding: 20px 15px; text-align: center; overflow: hidden; border-radius: 15px; } .team-block_one-content:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; -webkit-filter: blur(10px); filter: blur(10px); background-color: rgba(0, 0, 0, 0.5); } .team-block_one-title { position: relative; font-size: 28px; } .team-block_one-title a { position: relative; color: var(--white-color); } .team-block_one-title a:hover { color: var(--main-color); } .team-block_one-designation { position: relative; font-size: 16px; margin-top: 8px; color: var(--white-color); } .team-block_one-shares { position: absolute; right: 18px; top: 17px; } .team-block_one-inner:hover .team-block_one-share_icon { color: var(--white-color); background-color: var(--black-color); } .team-block_one-share_icon { position: relative; width: 54px; height: 54px; z-index: 10; font-size: 24px; line-height: 54px; border-radius: 50px; border-radius: 50px; display: inline-block; color: var(--white-color); background-color: var(--main-color); } .team-block_one-inner:hover .team-block_one-socials { top: 140%; opacity: 1; } .team-block_one-socials { position: absolute; right: 2px; top: -150%; width: 50px; z-index: 1; opacity: 0; padding: 10px 0px; text-align: center; border-radius: 50px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--white-color); } .team-block_one-socials a { position: relative; font-size: 16px; display: block; width: 40px; height: 40px; margin: 1px 0px; margin: 0 auto; line-height: 40px; border-radius: 50px; color: var(--black-color); } .team-block_one-socials a:hover { color: var(--white-color); background-color: var(--main-color); } .team-one .three-item_carousel-prev { position: absolute; top: 50%; z-index: 1; left: -80px; width: 60px; height: 60px; cursor: pointer; font-size: 18px; line-height: 58px; text-align: center; display: inline-block; border-radius: 50px 50px; color: var(--main-color); transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; border: 1px solid var(--main-color); } .team-one .three-item_carousel-prev:hover { color: var(--white-color); background-color: var(--main-color); } .team-one .three-item_carousel-prev.swiper-button-disabled { opacity: 0; visibility: hidden; } .team-one .three-item_carousel-next.swiper-button-disabled { opacity: 0; visibility: hidden; } .team-one .three-item_carousel-next:hover { color: var(--white-color); background-color: var(--main-color); } .team-one .three-item_carousel-next::after, .team-one .three-item_carousel-next::after { display: none; } .team-one .three-item_carousel-next { position: absolute; right: -80px; top: 50%; z-index: 1; width: 60px; height: 60px; cursor: pointer; font-size: 18px; line-height: 58px; text-align: center; display: inline-block; border-radius: 50px 50px; color: var(--main-color); transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; border: 1px solid var(--main-color); } .team-one .lower-box { position: relative; margin-top: 20px; } .team-one_text { position: relative; font-size: 16px; color: #0f0f0f; line-height: 28px; } /*** ==================================================================== Testimonial Two ==================================================================== ***/ .testimonial-two { position: relative; padding: 60px 0px 20px; background-color: var(--black-color); } .testimonial-two_circle-image { position: absolute; left: 50%; bottom: -105px; width: 487px; height: 192px; transform: translateX(-50%); background-repeat: no-repeat; } .testimonial-two .sec-title { display: inline-block; } .testimonial-two .swiper-container { margin-top: -100px; padding-top: 120px; padding-bottom: 30px; } .testimonial-two_arrow { /* position: absolute; */ /* right: 0px; */ top: 0px; z-index: 1; text-align: center; } .testimonial-two_arrow .four-item_carousel-next, .testimonial-two_arrow .four-item_carousel-prev { position: relative; width: 60px; height: 60px; font-size: 22px; line-height: 58px; text-align: center; margin-left: 10px; border-radius: 50px; color: var(--main-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; border: 1px solid var(--main-color); } .testimonial-two_arrow .four-item_carousel-next:hover, .testimonial-two_arrow .four-item_carousel-prev:hover { color: var(--white-color); background-color: var(--main-color); } .testimonial-two .auto-container { max-width: 1780px; } .testimonial-two_pattern { position: absolute; left: 0px; bottom: 0px; right: 0px; top: 0px; background-size: cover; } .testimonial-block_two { position: relative; margin-bottom: 30px; } .testimonial-block_two-inner { position: relative; padding: 40px 25px; border-radius: 30px; background-color: rgba(255, 255, 255, 0.07); } .testimonial-block_two-rating { position: relative; font-size: 16px; color: var(--main-color); } .testimonial-block_two-text { position: relative; font-size: 16px; line-height: 30px; margin-top: 35px; margin-bottom: 0; color: var(--white-color); height: 250px; overflow-y: scroll; padding-right: 4px; } .testimonial-block_two-text::-webkit-scrollbar { width: 4px; } .testimonial-block_two-text::-webkit-scrollbar-track { background: #f1f1f100; } .testimonial-block_two-author { position: relative; font-weight: 500; font-size: 24px; line-height: 34px; color: var(--main-color); font-family: "Lexend Deca", sans-serif; } .testimonial-block_two-author span { position: relative; display: block; font-size: 16px; font-weight: 300; color: var(--white-color); } .testimonial-block_two-image { position: absolute; right: 50px; bottom: -33px; width: 80px; height: 80px; border-radius: 50px; } /*** ==================================================================== About Two ==================================================================== ***/ .about-two { position: relative; padding: 75px 0px 60px; } .about-two_image-column { position: relative; margin-bottom: 30px; } .about-two_image-outer { position: relative; padding-right: 40px; } .about-two_image:before { position: absolute; content: ""; right: -1px; top: 0px; z-index: 1; width: 267px; height: 85px; background: url(../images/icons/about-1.png) no-repeat; } .about-two_image { position: relative; display: block; overflow: hidden; border-radius: 30px; } .about-two_image img { position: relative; width: 100%; display: block; } .about-two_content-column { position: relative; margin-bottom: 30px; } .about-two_content-outer { position: relative; padding-left: 30px; } /* Feature Block One */ .feature-block_three { position: relative; margin-bottom: 40px; } .feature-block_three-inner { position: relative; padding-left: 100px; } .feature-block_three-icon { position: absolute; left: 0px; top: 0px; line-height: 1em; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .feature-block_three-inner:hover .feature-block_three-icon { transform: rotateY(180deg); } .feature-block_three-title { position: relative; font-weight: 500; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .feature-block_three-text { position: relative; font-size: 16px; color: #0f0f0f; line-height: 28px; margin-top: 10px; } /*** ==================================================================== Blog Two ==================================================================== ***/ .news-two { position: relative; padding: 0px 0px 90px; background-color: var(--white-color); } .news-two.style-two { padding-top: 110px; } .news-block_two { position: relative; z-index: 2; margin-bottom: 30px; } .news-block_two-inner { position: relative; } .news-block_two-image_outer { position: relative; } .news-block_two-image { position: relative; overflow: hidden; border-radius: 20px; } .news-block_two-image img:first-child { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .news-block_two-inner:hover .news-block_two-image img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .news-block_two-inner:hover .news-block_two-image img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .news-block_two-image img { position: relative; width: 100%; display: block; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .news-block_two-content { position: relative; padding-top: 30px; } .news-block_two-date { position: absolute; right: 20px; bottom: 20px; width: 65px; height: 65px; z-index: 10; padding-top: 8px; line-height: 28px; font-size: 28px; font-weight: 600; text-align: center; color: var(--white-color); border-radius: 8px 8px 8px 0px; background-color: var(--main-color); font-family: "Lexend Deca", sans-serif; } .news-block_two-date span { position: relative; display: block; font-size: 16px; } .news-block_two-meta { position: relative; } .news-block_two-meta li { position: relative; font-size: 16px; padding-left: 30px; margin-right: 15px; display: inline-block; color: var(--black-color); } .news-block_two-meta li .icon { position: absolute; left: 0px; top: 2px; line-height: 1em; color: var(--main-color); } .news-block_two-meta li:last-child { margin-right: 0px; padding-right: 0px; } .news-block_two-title { position: relative; margin-top: 15px; } .news-block_two-title a { position: relative; color: var(--black-color); } .news-block_two-title a:hover { color: var(--main-color); } .news-block_two-text { position: relative; margin-top: 15px; color: #0f0f0f; display: block; font-size: 16px; line-height: 28px; } .news-block_two-more { position: relative; margin-top: 25px; font-size: 14px; font-weight: 500; display: flex; padding: 15px 25px; border-radius: 50px; justify-content: space-between; align-items: center; color: var(--black-color); background-color: rgba(0, 0, 0, 0.06); font-family: "Lexend Deca", sans-serif; } .news-block_two-more:hover { color: var(--white-color); background-color: var(--main-color); } /*** ==================================================================== Slider Three ==================================================================== ***/ .slider-three { position: relative; margin: 15px 15px 0px; } .slider-three_big-title { position: absolute; left: 0px; right: 0px; top: 260px; z-index: 10; opacity: 0.1; font-size: 182px; color: transparent; font-weight: 800; text-align: center; font-family: "Lexend Deca", sans-serif; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: rgba(var(--white-color-rgb), 1); } .slider-three .slider-one_pagination { position: absolute; top: 40%; z-index: 999; left: 40px !important; right: auto !important; width: 60px !important; } .slider-three .slider-one_pagination { position: absolute; top: 46%; z-index: 999; padding: 15px 0px; padding-left: 25px; left: auto !important; right: 0px !important; bottom: auto !important; width: 60px !important; border-radius: 30px 0px 0px 30px; background-color: var(--white-color); } .slider-three .slider-one_pagination .swiper-pagination-bullet { position: relative; opacity: 1; width: 10px; height: 10px; display: block; font-size: 0px; background: none; color: var(--white-color); margin: 30px 0px !important; transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; border-radius: 50px; display: block; background-color: #bbbbbb; } .slider-three .slider-one_pagination .swiper-pagination-bullet::before { position: absolute; content: ""; left: -8px; top: -8px; right: -8px; bottom: -8px; opacity: 0; border-radius: 50px; border: 1px solid var(--white-color); } .slider-three .slider-one_pagination .swiper-pagination-bullet:hover, .slider-three .slider-one_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; background-color: var(--main-color); } .slider-three .slider-one_pagination .swiper-pagination-bullet:hover::before, .slider-three .slider-one_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 1; border-color: var(--main-color); } .slider-three .swiper-slide { position: relative; overflow: hidden; border-radius: 25px 25px 0px 0px; padding: 380px 0px 170px; } .slider-three .swiper-slide:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; height: 100%; z-index: 10; background-image: linear-gradient( to bottom, #000000, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ); } .slider-three_image-layer { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1; opacity: 0; overflow: hidden; background-size: cover; background-position: center center; clip-path: polygon(0 0, 40% 0, 40% 100%, 0% 100%); -webkit-transition: all 1000ms linear; -moz-transition: all 1000ms linear; -ms-transition: all 1000ms linear; -o-transition: all 1000ms linear; transition: all 1000ms linear; } .slider-three_image-layer:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0.3; background-color: var(--black-color); } .slider-three .swiper-slide-active .slider-three_image-layer { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .slider-three_color-layer { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1; opacity: 0.3; background-color: var(--black-color); } .slider-three_button { position: relative; } .slider-three .swiper-slide-active .slider-three_button { -webkit-transition-delay: 1400ms; -moz-transition-delay: 1400ms; -ms-transition-delay: 1400ms; -o-transition-delay: 1400ms; transition-delay: 1400ms; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .slider-three_content { position: relative; z-index: 20; } .slider-three_content-inner { position: relative; display: inline-block; padding: 90px 60px 55px; border-radius: 36px 36px; border-left: 6px solid var(--white-color); background-image: linear-gradient( to right, #000000, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) ); } .slider-three_title { position: relative; font-size: 76px; display: block; z-index: 1; font-weight: 600; color: var(--white-color); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; font-family: "Lexend Deca", sans-serif; } .slider-three_title span { position: relative; font-weight: 500; } .slider-three_title span:before { position: absolute; content: ""; left: 0px; top: 0px; width: 452px; height: 109px; z-index: -1; background: url(../images/main-slider/slider-three_vector.png) no-repeat; } .slider-three .swiper-slide-active .slider-three_title { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .slider-three_heading { font-size: 116px; line-height: 166px; margin-top: 10px; font-weight: 500; margin-bottom: 25px; color: var(--main-color); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .slider-three .swiper-slide-active .slider-three_heading { -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .slider-three_text { font-weight: 300; font-size: 16px; max-width: 600px; line-height: 30px; max-width: 520px; margin-bottom: 35px; color: var(--white-color); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .slider-three .swiper-slide-active .slider-three_text { -webkit-transition-delay: 1200ms; -moz-transition-delay: 1200ms; -ms-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .slider-three_arrow { position: absolute; content: ""; left: 95%; bottom: 80px; width: 211px; height: 115px; background-repeat: no-repeat; } .slider-three .slider-three_button { position: relative; transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .slider-three .slider-three_button .theme-btn { } /* Play Box */ .slider-three .play-box { position: absolute; right: 0px; top: 75px; display: inline-block; } .slider-three .play-box:before { position: absolute; content: ""; right: -6px; top: -6px; bottom: 6px; left: 6px; border-radius: 150px; background-color: var(--main-color); } .slider-three .play-box:hover::before { background-color: var(--black-color); } .slider-three .play-box:hover .fa { color: var(--white-color); border-color: var(--black-color); background-color: var(--main-color); } .slider-three .play-box .fa { position: relative; width: 126px; height: 126px; font-size: 32px; line-height: 126px; border-radius: 150px; display: inline-block; color: var(--white-color); text-align: center !important; transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; background-color: var(--black-color); } .slider-three_video .ripple, .slider-three_video .ripple:before, .slider-three_video .ripple:after { position: absolute; top: 50%; left: 50%; width: 126px; height: 126px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .slider-three_video .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .slider-three_video .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .slider-three_construction { position: absolute; right: 70px; z-index: 1; bottom: -60px; -webkit-animation: icon-bounce 0.8s ease-out infinite; animation: icon-bounce 0.8s ease-out infinite; } /*** ==================================================================== Counter Three ==================================================================== ***/ .counter-three { position: relative; overflow: hidden; padding: 100px 0px 120px; background-color: #f5f5f5; } .counter-three_pattern { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 70px; background-position: center bottom; background-repeat: repeat-x; animation: slideBackground 10s linear infinite; } .counter-block_three { position: relative; margin-bottom: 30px; } .counter-block_three-inner { position: relative; } .counter-block_three-count { position: relative; font-size: 96px; font-weight: 800; line-height: 1em; color: transparent; padding-bottom: 15px; font-family: "Lexend Deca", sans-serif; -webkit-text-stroke-width: 2px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); -webkit-text-stroke-color: rgba(var(--main-color-rgb), 1); } .counter-block_three-inner:hover .counter-block_three-count { border-color: var(--main-color); } .counter-block_three-title { position: relative; font-weight: 600; font-size: 24px; margin-top: 22px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .counter-block_three-text { position: relative; font-size: 16px; color: #0f0f0f; font-weight: 300; line-height: 28px; margin-top: 10px; } /*** ==================================================================== About Three ==================================================================== ***/ .about-three { position: relative; overflow: hidden; padding: 110px 0px 90px; } .about-three_pattern { position: absolute; right: 80px; top: 80px; width: 395px; height: 286px; background-repeat: no-repeat; } .about-three_big-title { position: absolute; left: 0px; top: 0px; font-size: 182px; font-weight: 800; line-height: 1em; transform: rotate(-90deg); transform-origin: 37% 230%; color: transparent; letter-spacing: 1px; font-family: "Lexend Deca", sans-serif; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: rgba(var(--black-color-rgb), 0.3); } .about-three .auto-container { position: relative; } .about-three_content-column { position: relative; margin-bottom: 30px; } .about-three_content-outer { position: relative; } .about-three_list { position: relative; margin-bottom: 50px; margin-top: 16px; } .about-three_list li { position: relative; font-size: 16px; font-weight: 300; margin-bottom: 20px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .about-three_list li i { position: relative; margin-right: 10px; color: var(--main-color); } .about-three_list li:last-child { margin-bottom: 0px; } .about-three_info { position: relative; padding: 15px 40px; border-radius: 25px; background-color: #f5f5f5; border: 1px solid var(--black-color); } .about-three_text { position: relative; font-size: 18px; font-weight: 500; line-height: 34px; max-width: 365px; color: var(--black-color); } .about-three_author { position: relative; font-size: 18px; top: 40px; font-weight: 500; text-align: center; color: var(--main-color); font-family: "Lexend Deca", sans-serif; } .about-three_author i { position: relative; font-size: 14px; display: block; color: #0f0f0f; font-weight: 500; margin-top: 5px; } .about-three_author span { position: relative; width: 92px; height: 92px; display: block; margin: 0 auto; margin-top: 15px; border-radius: 150px; } .about-three .lower-box { position: relative; margin-top: 50px; gap: 30px; } .about-three_button { position: relative; } .about-three_phone { position: relative; } .about-three_phone-inner { position: relative; padding-left: 75px; font-size: 16px; color: #0f0f0f; line-height: 30px; } .about-three_phone-icon { position: absolute; left: 0px; top: 0px; width: 60px; height: 60px; font-size: 22px; line-height: 60px; text-align: center; border-radius: 50px; color: var(--white-color); background-color: var(--main-color); } .about-three_phone a { position: relative; font-weight: 500; font-size: 24px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .about-three_phone a:hover { color: var(--main-color); } .about-three_images-column { position: relative; margin-bottom: 30px; } .about-three_images-outer { position: relative; padding-left: 0; padding-bottom: 0px; } .about-three_image { position: relative; overflow: hidden; border-radius: 280px; width: 51%; display: inline-block; opacity: 0; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; clip-path: polygon(0 0, 15% 0, 15% 100%, 0% 100%); } .about-three_image.now-in-view { opacity: 1; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .about-three_image-two { position: absolute; right: -120px; top: 0px; overflow: hidden; border-radius: 280px; display: inline-block; border: 10px solid var(--white-color); -webkit-animation: icon-bounce 0.8s ease-out infinite; animation: icon-bounce 0.8s ease-out infinite; } .about-three_image-three { position: absolute; right: -120px; bottom: -45px; width: 40%; right: 24px !important; overflow: hidden; border-radius: 280px; display: inline-block; border: 10px solid rgb(171 139 64 / 35%); } .about-three_award { position: relative; padding-left: 100px; font-weight: 500; font-size: 20px; line-height: 30px; padding-top: 22px; margin-top: 20px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .about-three_award span { position: absolute; left: 0px; top: 0px; line-height: 1em; } /*** ==================================================================== Service Three ==================================================================== ***/ .service-three { position: relative; overflow: hidden; padding: 0px 0px 0px; } .service-three.style-two { padding-top: 0px; } .service-three .outer-container { position: relative; max-width: 100%; padding: 110px 0px 110px; background-color: #f5f5f5; background-position: left top; background-repeat: no-repeat; } .service-block_three { position: relative; margin-bottom: 30px; } .service-block_three-inner { position: relative; padding: 40px 35px; border-radius: 15px; background-color: var(--white-color); border: 1px solid rgba(0, 0, 0, 0.1); } .service-block_three-icon { position: absolute; left: 0px; top: 0px; width: 80px; height: 80px; line-height: 80px; border-radius: 50px; text-align: center; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--main-color); } .service-block_three-inner:hover .service-block_three-icon { transform: rotateY(180deg); } .service-block_three-heading { position: relative; } .service-block_three-heading a { position: relative; color: var(--black-color); } .service-block_three-text { position: relative; font-size: 15px; color: #0f0f0f; line-height: 27px; margin-top: 20px; margin-bottom: 28px; } .service-block_three-more { position: relative; font-size: 15px; margin-top: 20px; font-weight: 500; color: var(--main-color); font-family: "Lexend Deca", sans-serif; } .service-block_three-pattern { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0; overflow: hidden; border-radius: 15px; background-size: cover; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transform: scale(0.2, 1); } .service-block_three-inner:hover .service-block_three-pattern { opacity: 1; transform: scale(1, 1); } .service-block_three-inner:hover .service-block_three-text, .service-block_three-inner:hover .service-block_three-heading a { color: var(--white-color); } .service-block_three-upper { position: relative; padding-left: 105px; min-height: 80px; } .service-block_three_hover-image { position: absolute; right: -30px; bottom: -10px; z-index: 1; opacity: 0; width: 288px; height: 184px; border-radius: 15px; transform: scale(1, 0.2); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .service-block_three-inner:hover .service-block_three_hover-image { opacity: 1; transform: scale(1, 1) rotate(-20deg); } .service-three_btn { position: relative; margin-top: 30px; } /*** ==================================================================== Choose One ==================================================================== ***/ .choose-one { position: relative; } .choose-one .outer-container { position: relative; max-width: 100%; padding: 80px 0px 80px; background-position: left top; background-repeat: repeat; } .choose-one_pattern { position: absolute; left: 0px; bottom: 0px; width: 438px; height: 597px; background-position: left bottom; background-repeat: no-repeat; } .choose-one_image-column { position: relative; /* margin-bottom: 30px; */ } .choose-one_image-outer { position: relative; text-align: right; } .choose-one_image { position: relative; overflow: hidden; border-radius: 30px; display: inline-block; opacity: 0; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; clip-path: polygon(0 0, 15% 0, 15% 100%, 0% 100%); } .choose-one_image.now-in-view { opacity: 1; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .choose-one_image-two { position: relative; overflow: hidden; /* margin-left: 29%; */ margin-top: -167px; border-radius: 35px; display: inline-block; /* border: 8px solid var(--black-color); */ } .choose-one_content-column { position: relative; /* margin-bottom: 30px; */ padding-left: 40px; } F .choose-one_content-outer { position: relative; padding-left: 40px; } .choose-block_one { position: relative; margin-bottom: 50px; } .choose-block_one-inner { position: relative; padding-left: 85px; } .choose-block_one-icon { position: absolute; left: 0px; top: 5px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .choose-block_one-inner:hover .choose-block_one-icon { transform: rotateY(180deg); } .choose-block_one-title { position: relative; color: var(--white-color); } .choose-block_one-text { position: relative; font-size: 16px; line-height: 27px; margin-top: 12px; color: rgb(17 17 17); } .choose-block_one-number { position: absolute; right: -120px; top: 0px; line-height: 1em; font-size: 96px; font-weight: 800; color: transparent; font-family: "Lexend Deca", sans-serif; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: rgba(var(--white-color-rgb), 0.2); } /*** ==================================================================== Project Three ==================================================================== ***/ .project-three { position: relative; overflow: hidden; padding: 110px 0px 110px; } .project-three_pattern { position: absolute; left: 50px; bottom: 25%; width: 50px; height: 132px; background-repeat: no-repeat; } .project-one_circle { position: absolute; right: -250px; top: -150px; width: 536px; height: 536px; border-radius: 550px; border: 80px solid #f5f5f5; } .project-block_two { position: relative; margin-bottom: 50px; } .project-block_two-inner { position: relative; } .project-block_two-image { position: relative; overflow: hidden; border-radius: 20px 20px 50px 20px; } .project-block_two-image img { position: relative; width: 100%; display: block; } .project-block_two-content { position: relative; margin-right: 50px; margin-top: -96.5px; padding: 0px 80px 40px 50px; border-radius: 0px 150px 150px 50px; background-image: linear-gradient( to right, #020202, #0d0d0d, #151515, #1b1b1b, #212121 ); } .project-block_two-tag { position: relative; font-size: 14px; top: -20px; padding: 10px 20px; letter-spacing: 0.5px; border-radius: 50px; display: inline-block; color: var(--white-color); background-color: var(--main-color); } .project-block_two-title { position: relative; margin: 0px 0px 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.8); } .project-block_two-title a { position: relative; color: var(--white-color); } .project-block_two-title:before { position: absolute; content: "\f105"; right: 0px; bottom: -7px; font-size: 14px; line-height: 1em; color: var(--white-color); font-family: "Font Awesome 6 Free"; } .project-block_two-title a:hover { color: var(--main-color); } .project-block_two-meta { position: relative; margin-top: 25px; } .project-block_two-meta li { position: relative; margin-right: 40px; font-weight: 500; font-size: 16px; display: inline-block; color: var(--white-color); font-family: "Lexend Deca", sans-serif; } .project-block_two-meta li span { position: relative; color: var(--main-color); } .project-block_two-meta li { margin-right: 15px; } .project-block_two-meta li:last-child { margin-right: 0px; } /*** ==================================================================== Customer One ==================================================================== ***/ .customer-one { position: relative; } .customer-one.style-two { position: relative; margin-bottom: 110px; } .customer-one .inner-container { position: relative; border-radius: 30px; background: #f5f5f5; overflow: hidden; padding: 77px 15px 57px; } .customer-one_bg { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; border-radius: 0px; background-color: #f5f5f5; } .customer-one_pattern { position: absolute; left: 0px; right: 0px; top: 0px; height: 70px; background-position: center bottom; background-repeat: repeat-x; animation: slideBackground 10s linear infinite; } .customer-block_one { position: relative; margin-bottom: 30px; } .customer-block_one-inner { position: relative; padding: 39px 21px; overflow: hidden; border-radius: 25px; height: 100%; background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } .customer-block_one-bg { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0; background-size: cover; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transform: scale(0.2, 1); } .customer-block_one-inner:hover .customer-block_one-bg { opacity: 1; transform: scale(1, 1); } .customer-block_one-icon { position: relative; line-height: 1em; } .customer-block_one-icon img { width: 60px; } .customer-block_one-number { position: absolute; right: 40px; top: 65px; font-size: 110px; line-height: 1em; font-weight: 800; color: transparent; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; font-family: "Lexend Deca", sans-serif; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: rgba(var(--main-color-rgb), 1); } .customer-block_one-inner:hover .customer-block_one-number { opacity: 0.4; -webkit-text-stroke-color: rgba(var(--white-color-rgb), 1); } .customer-block_one-title { position: relative; font-weight: 500; line-height: 20px; font-size: 19px; margin: 26px 0px 11px; } .customer-block_one-title a { position: relative; color: var(--black-color); } .customer-block_one-inner:hover .customer-block_one-text, .customer-block_one-inner:hover .customer-block_one-title a { color: var(--white-color); } .customer-block_one-text { position: relative; color: #0f0f0f; font-size: 16px; line-height: 28px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .customer-block_one-more { position: relative; font-weight: 500; font-size: 18px; margin-top: 30px; display: inline-block; color: var(--main-color); font-family: "Lexend Deca", sans-serif; } .customer-block_one-more i { position: relative; font-size: 16px; } /*** ==================================================================== Testimonial Three ==================================================================== ***/ .testimonial-three { position: relative; } .testimonial-three.style-two { /* margin-top:110px; */ margin-bottom: 110px; } .testimonial-three.style-two .testimonial-block_three { margin-bottom: 80px; } .testimonial-three .inner-container { position: relative; border-radius: 30px; overflow: hidden; padding: 140px 15px 110px; } .testimonial-three_bg { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; border-radius: 0px; } .testimonial-one_shadow { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-size: cover; } .testimonial-three .sec-title { display: inline-block; } .testimonial-three .swiper-container { margin-top: -100px; padding-top: 120px; padding-bottom: 30px; } .testimonial-block_three { position: relative; margin-bottom: 30px; } .testimonial-block_three-inner { position: relative; padding: 40px 55px; border-radius: 25px; background-size: cover; background-color: var(--white-color); } .testimonial-block_three-rating { position: relative; font-size: 16px; color: var(--main-color); } .testimonial-block_three-title { position: relative; margin-top: 25px; margin-bottom: 15px; } .testimonial-block_three-text { position: relative; font-size: 18px; color: #0f0f0f; line-height: 32px; margin-top: 18px; margin-bottom: 35px; } .testimonial-block_three-author { position: relative; font-weight: 500; font-size: 24px; line-height: 34px; padding-left: 100px; min-height: 82px; padding-top: 7px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .testimonial-block_three-author span { position: relative; display: block; font-size: 16px; font-weight: 300; color: var(--black-color); } .testimonial-block_three-image { position: absolute; left: 0px; top: 0px; width: 82px; height: 82px; overflow: hidden; border-radius: 150px; border: 3px solid var(--main-color); } .testimonial-block_three-quote { position: absolute; right: 50px; bottom: -53px; width: 106px; height: 106px; overflow: hidden; text-align: center; line-height: 90px; border-radius: 150px; background-color: var(--main-color); border: 8px solid var(--black-color); } .testimonial-three_arrow { position: absolute; right: 0px; top: 0px; z-index: 1; } .testimonial-three_arrow .two-item_carousel-next, .testimonial-three_arrow .two-item_carousel-prev { position: relative; width: 60px; height: 60px; font-size: 22px; line-height: 58px; text-align: center; margin-left: 10px; border-radius: 50px; color: var(--main-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; border: 1px solid var(--main-color); } .testimonial-three_arrow .two-item_carousel-next:hover, .testimonial-three_arrow .two-item_carousel-prev:hover { color: var(--white-color); background-color: var(--main-color); } /*** ==================================================================== Team Two ==================================================================== ***/ .team-two { position: relative; overflow: hidden; padding: 70px 0px 70px; } .team-two .auto-container { position: relative; } .team-two_pattern { position: absolute; left: 0px; bottom: 0px; right: 0px; height: 266px; background-position: center bottom; background-repeat: repeat-x; animation: slideBackground 10s linear infinite; } .team-block_two { position: relative; /* margin-bottom: 30px; */ height: 100%; } .team-block_two-inner { position: relative; padding: 15px 15px 15px; border-radius: 30px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); height: 100%; } .team-block_two-inner:before { position: absolute; content: ""; left: 0px; bottom: 0px; right: 0px; height: 50px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; border-radius: 0px 0px 25px 25px; border-bottom: 10px solid transparent; } .team-block_two-inner:after { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; height: 0px; z-index: -1; opacity: 0; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-image: linear-gradient( to bottom, var(--main-color), var(--white-color) ); } .team-block_two-inner:hover::after { height: 250px; opacity: 1; } .team-block_two-inner:hover::before { border-bottom-color: var(--main-color); } .team-block_two-image { position: relative; } .team-block_two-image img { position: relative; width: 100%; display: block; overflow: hidden; border-radius: 25px 0px 25px 25px; height: 350px; object-fit: cover; } .team-block_two-content { position: relative; padding: 20px 15px 10px; } .team-block_two-title { position: relative; font-size: 23px; } .team-block_two-title a { position: relative; color: var(--black-color); } .team-block_two-title a:hover { color: var(--main-color); } .team-block_two-designation { position: relative; font-size: 16px; margin-top: 5px; color: #0f0f0f; } .team-block_two-shares { position: absolute; right: 40px; bottom: -21px; } .team-block_two-inner:hover .team-block_two-share_icon { color: var(--white-color); background-color: var(--black-color); } .team-block_two-share_icon { position: relative; height: 45px; z-index: 10; font-size: 15px; line-height: 45px; border-radius: 50px; border-radius: 50px; display: inline-block; color: var(--white-color); background-color: var(--main-color); padding: 0 9px; cursor: pointer; } .team-block_two-inner:hover .team-block_two-socials { bottom: 140%; opacity: 1; } .team-block_two-socials { position: absolute; right: 2px; bottom: -150%; width: 50px; z-index: 1; opacity: 0; padding: 10px 0px; text-align: center; border-radius: 50px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--white-color); } .team-block_two-socials a { position: relative; font-size: 16px; display: block; width: 40px; height: 40px; margin: 1px 0px; margin: 0 auto; line-height: 40px; border-radius: 50px; color: var(--black-color); } .team-block_two-socials a:hover { color: var(--white-color); background-color: var(--main-color); } .team-two .three-item_carousel-prev { position: absolute; top: 55%; z-index: 1; left: -80px; width: 60px; height: 60px; cursor: pointer; font-size: 18px; line-height: 58px; text-align: center; display: inline-block; border-radius: 50px 50px; color: var(--main-color); transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; border: 1px solid var(--main-color); } .team-two .three-item_carousel-prev:hover { color: var(--white-color); background-color: var(--main-color); } .team-two .three-item_carousel-prev.swiper-button-disabled { opacity: 0; visibility: hidden; } .team-two .three-item_carousel-next.swiper-button-disabled { opacity: 0; visibility: hidden; } .team-two .three-item_carousel-next:hover { color: var(--white-color); background-color: var(--main-color); } .team-two .three-item_carousel-next::after, .team-two .three-item_carousel-next::after { display: none; } .team-two .three-item_carousel-next { position: absolute; right: -80px; top: 55%; z-index: 1; width: 60px; height: 60px; cursor: pointer; font-size: 18px; line-height: 58px; text-align: center; display: inline-block; border-radius: 50px 50px; color: var(--main-color); transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; border: 1px solid var(--main-color); } .team-two .lower-box { position: relative; margin-top: 20px; } .team-two_text { position: relative; font-size: 16px; color: #0f0f0f; line-height: 28px; } /*** ==================================================================== Video One ==================================================================== ***/ .video-one { position: relative; z-index: 1; overflow: hidden; padding: 260px 0px 50px; background-attachment: fixed; background-size: cover; border-radius: 0px 0px 35px 35px; } .video-one_play { position: relative; width: 176px; height: 176px; font-size: 50px; text-align: center; border-radius: 100px; line-height: 176px; display: block; margin: 0 auto; color: var(--white-color); background-color: var(--black-color); } .video-one_play:before { position: absolute; content: ""; right: 7px; top: 7px; left: -7px; bottom: -7px; z-index: -1; border-radius: 150px; background-color: var(--main-color); } .video-one_play:after { position: absolute; content: ""; right: 14px; top: 10px; left: -16px; bottom: -10px; z-index: -10; border-radius: 150px; background-color: var(--white-color); } .video-one_play .ripple, .video-one_play .ripple:before, .video-one_play .ripple:after { position: absolute; top: 50%; left: 50%; width: 176px; height: 176px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -moz-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -ms-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -o-box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); box-shadow: 0 0 0 0 rgba(255, 101, 12, 0.3); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .video-one_play .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .video-one_play .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .video-one h1 { position: relative; font-size: 260px; line-height: 1em; font-weight: 800; color: #ffffff; opacity: 0.4; margin: 150px 25px 0px; display: inline-block; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ffffff; font-family: "Lexend Deca", sans-serif; } /*** ==================================================================== Contact Two ==================================================================== ***/ .contact-two { position: relative; z-index: 1; } .contact-two .auto-container { position: relative; max-width: 1650px; } .contact-two .inner-container { position: relative; margin-top: -70px; border-radius: 50px 50px; padding: 90px 40px 0px 160px; background-size: cover; background-color: var(--black-color); } .contact-two_form-column { position: relative; } .contact-two_form-outer { position: relative; padding: 45px 60px 100px; border-radius: 30px 30px 0px 0px; background-position: right bottom; background-repeat: no-repeat; background-color: rgba(var(--white-color-rgb), 0.05); } .contact-two_form-outer .title-box { position: relative; margin-bottom: 30px; } .contact-two_form-outer .title-box h2 { position: relative; color: var(--white-color); } .contact-two_form-outer .title-box .text { position: relative; font-size: 16px; line-height: 28px; margin-top: 15px; color: var(--white-color); } /* Contact Form */ .contact-form_two { position: relative; z-index: 10; } .contact-form_two .form-group { margin-bottom: 30px; } .contact-form_two .form-group label { position: relative; font-size: 16px; color: var(--white-color); } .contact-form_two .form-group:last-child { margin-bottom: 0px; } .contact-form_two .form-group input[type="text"], .contact-form_two .form-group input[type="password"], .contact-form_two .form-group input[type="tel"], .contact-form_two .form-group input[type="email"], .contact-form_two .form-group select { position: relative; display: block; width: 100%; height: 60px; line-height: 28px; padding: 10px 15px; font-weight: 300; font-size: 16px; background: none; color: var(--white-color); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; background: none; border-bottom: 1px solid rgba(var(--white-color-rgb), 0.2); } .contact-form_two .form-group input[type="text"]:focus, .contact-form_two .form-group input[type="password"]:focus, .contact-form_two .form-group input[type="tel"]:focus, .contact-form_two .form-group input[type="email"]:focus, .contact-form_two .form-group select:focus, .contact-form_two .form-group textarea:focus { } .contact-form_two .form-group textarea { position: relative; display: block; width: 100%; height: 130px; resize: none; font-size: 16px; line-height: 26px; padding: 20px 20px; border-radius: 25px; color: var(--black-color); background-color: #f5f5f5; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .contact-form_two input:focus, .contact-form_two select:focus, .contact-form_two textarea:focus { } .contact-two_info-column { position: relative; } .contact-two_info-outer { position: relative; z-index: 1; padding-left: 30px; } .info-block_two { position: relative; margin-bottom: 45px; } .info-block_two-inner { position: relative; font-size: 16px; padding-left: 75px; color: var(--white-color); } .info-block_two-icon { position: absolute; left: 0px; top: 0px; width: 60px; height: 60px; font-size: 22px; border-radius: 50px; text-align: center; line-height: 60px; display: inline-block; color: var(--white-color); background-color: var(--main-color); } .info-block_two-inner strong { position: relative; display: block; font-size: 24px; line-height: 30px; margin-bottom: 5px; color: var(--white-color); font-family: "Lexend Deca", sans-serif; } .contact-two_image { position: absolute; right: 0px; bottom: 0px; } /*** ==================================================================== Page Title ==================================================================== ***/ .page-title { position: relative; background-size: cover; padding: 76px 0px 28px; background-attachment: fixed; } .page-title:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0.2; background-color: var(--black-color); } .page-title h2 { font-weight: 500; margin-bottom: 50px; color: var(--white-color); } .page-title .bread-crumb { position: relative; display: inline-block; } .page-title .bread-crumb li { position: relative; font-weight: 600; display: inline-block; font-size: 16px; color: var(--white-color); margin-right: 15px; padding-right: 15px; } .page-title .bread-crumb li:before { position: absolute; right: -6px; top: 0px; content: "-"; color: var(--white-color); } .page-title .bread-crumb li:last-child { padding-right: 0; margin-right: 0; } .page-title .bread-crumb li:last-child:before { display: none; } .page-title .bread-crumb li a { color: var(--white-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .page-title .bread-crumb li a:hover { color: var(--main-color); } .page-title_text { position: relative; font-size: 16px; line-height: 28px; max-width: 320px; color: var(--white-color); } /*** ==================================================================== Project Detail ==================================================================== ***/ .project-detail { position: relative; padding: 110px 0px 110px; background-position: left top; background-repeat: no-repeat; } .project-detail:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; height: 50%; z-index: -1; background-image: linear-gradient( to bottom, #f5f5f5, #f7f7f7, #fafafa, #fcfcfc, #ffffff ); } .project-detail_location { position: relative; font-size: 16px; display: flex; gap: 10px; font-weight: 500; color: var(--black-color); } .project-detail_heading { position: relative; font-weight: 500; margin-top: 15px; margin-bottom: 35px; color: var(--black-color); } .project-detail_image { position: relative; display: block; overflow: hidden; border-radius: 25px; } .project-detail_image img { position: relative; width: 100%; display: block; } .project-detail_list { position: relative; margin-top: 60px; margin-bottom: 20px; } .project-detail_list li { position: relative; padding-left: 80px; color: #1e1e1e; min-height: 62px; font-size: 16px; margin-right: 45px; margin-bottom: 25px; display: inline-block; } .project-detail_list li:last-child { margin-right: 0px; } .project-detail_list li .icon { position: absolute; left: 0px; top: 0px; width: 62px; height: 62px; line-height: 60px; text-align: center; border-radius: 50px; border: 1px solid rgba(0, 0, 0, 0.5); } .project-detail_list li strong { position: relative; display: block; font-weight: 600; margin-top: 5px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .project-detail h3 { position: relative; margin-bottom: 20px; } .project-detail p { position: relative; font-size: 16px; color: #0f0f0f; line-height: 28px; margin-bottom: 15px; } .project-detail_list-two { position: relative; } .project-detail_list-two li { position: relative; color: #0f0f0f; font-size: 16px; line-height: 28px; margin-bottom: 15px; } .project-detail_list-two li span { position: relative; font-weight: 500; color: var(--black-color); } .project-detail .middle-box { position: relative; margin-top: 35px; margin-bottom: 40px; } .more-projects { position: relative; margin-top: 40px; border-radius: 50px; border: 1px solid rgba(0, 0, 0, 0.2); } .more-projects:before { position: absolute; content: ""; left: 50%; top: 0px; width: 1px; opacity: 0.2; bottom: 0px; background-color: var(--black-color); } .more-projects a { position: relative; display: block; font-weight: 600; padding: 22px 30px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .more-projects i { position: relative; color: var(--main-color); } .more-projects a:hover { color: var(--main-color); } /*** ==================================================================== Sidebar Page Container ==================================================================== ***/ .sidebar-page-container { position: relative; padding: 110px 0px 100px; } .sidebar-page-container.alternate { padding-bottom: 100px; } .sidebar-page-container .content-side, .sidebar-page-container .sidebar-side { margin-bottom: 0px; } .sticky-top { z-index: 1; top: 110px; } /* Sidebar Title */ .sidebar-widget { position: relative; margin-bottom: 40px; } .sidebar-title { position: relative; margin-bottom: 15px; } .sidebar-title h4 { position: relative; color: var(--black-color); } /* Category List */ .category-list { position: relative; z-index: 1; } .category-list li { position: relative; z-index: 1; margin-bottom: 15px; } .category-list li a { position: relative; display: block; font-size: 18px; z-index: 1; font-weight: 600; border-radius: 50px; color: var(--black-color); padding: 22px 15px 22px 30px; font-family: "Lexend Deca", sans-serif; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(0, 0, 0, 0.5); } .category-list li a:hover::before { opacity: 1; } .category-list li a:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: -1; opacity: 0; border-radius: 50px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; background-image: linear-gradient( to right, #f9630c, #b54c0f, #773610, #3e1f0d, #040201 ); } .category-list li span { position: absolute; right: 6px; top: 6px; width: 55px; height: 55px; padding: 0px 0px; line-height: 55px; border-radius: 50px; display: inline-block; color: var(--white-color); background-color: var(--black-color); } .category-list li a:hover span { color: var(--black-color); background-color: var(--white-color); } .category-list li a:hover { color: var(--white-color); transform: rotate(2deg); } .category-list li:last-child { margin-bottom: 0px; } .rating-widget .widget-content { position: relative; border-radius: 50px; padding: 35px 50px 50px; background-position: center top; background-repeat: no-repeat; background-color: var(--black-color); } .rating-widget_rating { position: relative; font-size: 128px; font-weight: 500; line-height: 1em; text-align: center; color: var(--white-color); } /* Rating Widget Authors */ .rating-widget_authors { position: relative; display: flex; gap: 20px; margin-top: 25px; align-items: center; justify-content: center; flex-wrap: wrap; } .rating-widget_authors ul { position: relative; display: flex; margin-left: 20px; } .rating-widget_authors ul li { position: relative; width: 54px; height: 54px; margin-left: -20px; border-radius: 50px; display: inline-block; border: 3px solid var(--white-color); } .rating-widget_reviews { position: relative; font-weight: 600; font-size: 16px; color: var(--white-color); } .rating-widget .company-logo { position: relative; text-align: center; margin-top: 40px; } .rating-widget_phone { position: relative; text-align: center; margin-top: 30px; font-size: 16px; line-height: 40px; color: var(--white-color); } .rating-widget_phone a { position: relative; display: block; font-weight: 500; font-size: 32px; color: var(--white-color); font-family: "Lexend Deca", sans-serif; } .rating-widget_title-button { position: relative; text-align: center; margin-top: 35px; } .rating-widget_title-button .theme-btn { position: relative; } .service-detail { position: relative; } .service-detail_inner { position: relative; } .service-detail_image { position: relative; overflow: hidden; border-radius: 25px; } .service-detail_image img { position: relative; width: 100%; display: block; } .service-detail_tag { position: absolute; right: 0px; bottom: 60px; font-size: 18px; font-weight: 600; padding: 18px 30px; display: inline-block; color: var(--main-color); border-radius: 50px 0px 0px 50px; background-color: var(--white-color); font-family: "Lexend Deca", sans-serif; } .service-detail_tag:before { position: absolute; content: ""; right: 0px; top: -48px; width: 57px; height: 49px; background: url(../images/icons/shape-8.png) no-repeat; } .service-detail_tag:after { position: absolute; content: ""; right: -2px; bottom: -50px; width: 68px; height: 54px; background: url(../images/icons/shape-9.png) no-repeat; } .service-detail_title { position: relative; margin-top: 30px; margin-bottom: 20px; } .service-detail p { position: relative; color: #0f0f0f; font-size: 16px; line-height: 28px; } .service-detail_subtitle { position: relative; margin-bottom: 15px; } .service-block_two { position: relative; margin-bottom: 30px; } .service-block_two-inner { position: relative; color: #0f0f0f; font-size: 16px; line-height: 28px; padding-left: 105px; } .service-block_two-number { position: absolute; left: 0px; top: 0px; width: 80px; height: 80px; font-size: 24px; font-weight: 600; border-radius: 50px; text-align: center; line-height: 80px; color: var(--white-color); font-family: "Lexend Deca", sans-serif; background-image: linear-gradient( to bottom, #f7620c, #e0590b, #ca510a, #b44809, #9f4008 ); } .service-block_two strong { position: relative; display: block; font-size: 24px; padding-bottom: 15px; margin-bottom: 15px; color: var(--black-color); border-bottom: 1px solid rgba(0, 0, 0, 0.2); font-family: "Lexend Deca", sans-serif; } .service-detail_blocks { position: relative; margin-top: 30px; } .service-detail_image-two { position: relative; margin-top: 30px; } .service-detail_image-two { position: relative; overflow: hidden; border-radius: 25px; margin-bottom: 30px; } .service-detail_image-two img { position: relative; width: 100%; display: block; } .service-detail_list { position: relative; } .service-detail_list li { position: relative; font-size: 16px; color: #0f0f0f; line-height: 28px; padding-left: 35px; margin-bottom: 25px; } .service-detail_list li i { position: absolute; left: 0px; top: 7px; font-size: 20px; line-height: 1em; color: var(--main-color); } .service-detail_list li span { position: relative; font-weight: 500; font-size: 18px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .service-detail_accordian { position: relative; margin-top: 40px; } /*** ==================================================================== Project Detail ==================================================================== ***/ .project-four { position: relative; padding: 110px 0px 110px; background-position: left top; background-repeat: no-repeat; } .project-four:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; height: 50%; z-index: -1; background-image: linear-gradient( to bottom, #f5f5f5, #f7f7f7, #fafafa, #fcfcfc, #ffffff ); } .project-block_three { position: relative; margin-bottom: 30px; } .project-block_three-inner { position: relative; } .project-block_three-image::before { position: absolute; content: ""; left: 0px; top: 30%; right: 0px; bottom: 0px; z-index: 1; background: rgba(var(--black-color-rgb), 0); background: linear-gradient( to top, rgba(var(--black-color-rgb), 1) 0%, rgba(var(--white-color-rgb), 0) 100% ); } .project-block_three-image { position: relative; border-radius: 25px; overflow: hidden; } .project-block_three-image > img { position: relative; width: 100%; display: block; } .project-block_three-overlay { position: absolute; left: 35px; bottom: -65px; right: 35px; z-index: 2; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .project-block_three-inner:hover .project-block_three-overlay { bottom: 35px; } .project-block_three-inner:hover .project-block_three_button { opacity: 1; } .project-block_three-title { position: relative; } .project-block_three-title a { position: relative; color: var(--white-color); } .project-block_three-designation { position: relative; font-size: 16px; margin-bottom: 20px; letter-spacing: 0.5px; color: var(--white-color); } .project-block_three-location { position: relative; font-size: 16px; display: flex; gap: 10px; margin-bottom: 15px; align-items: center; color: var(--white-color); } .project-block_three-location > i { position: relative; width: 20px; display: inline-block; } .project-block_three_button { position: relative; margin-top: 30px; opacity: 0; } .project-block_three_button .theme-btn { position: relative; } /*** ==================================================================== Styled Pagination ==================================================================== ***/ .styled-pagination { position: relative; margin-top: 40px; } .styled-pagination li { position: relative; display: inline-block; margin: 0px 5px 10px 0px; } .styled-pagination li a { position: relative; display: inline-block; line-height: 58px; height: 60px; width: 60px; font-size: 20px; min-width: 50px; font-weight: 600; text-align: center; border-radius: 50px; transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; color: var(--black-color); border: 1px solid rgba(0, 0, 0, 0.4); } .styled-pagination li.prev a, .styled-pagination li.next a { height: 60px; width: 60px; color: var(--white-color); background-image: none; background-color: var(--black-color); } .styled-pagination li a:hover, .styled-pagination li a.active { color: var(--white-color); border-color: var(--main-color); background-color: var(--main-color); } /*** ==================================================================== Faq One ==================================================================== ***/ .team-detail { position: relative; padding: 110px 0px 90px; background-position: left top; background-repeat: no-repeat; } .team-detail:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; height: 50%; z-index: -1; background-image: linear-gradient( to bottom, #f5f5f5, #f7f7f7, #fafafa, #fcfcfc, #ffffff ); } .team-detail_image-column { position: relative; margin-bottom: 30px; } .team-detail_image-outer { position: relative; } .team-detail_image { position: relative; padding-top: 20px; width: 76%; border-radius: 10px; overflow: hidden; height: 400px; margin-left: 15%; padding-right: 20px; } .team-detail_image:before { position: absolute; content: ""; right: 0px; top: 0px; left: 30px; bottom: 30px; border-radius: 25px; background-color: var(--white-color); border: 1px solid rgba(0, 0, 0, 0.1); } .team-detail_image img { position: relative; width: 100%; overflow: hidden; border-radius: 25px; } .team-detail_image:after { position: absolute; content: ""; right: 15px; top: 15px; width: 97px; height: 97px; background: url(../images/icons/team-shape.png) no-repeat; } .team-block_detail-shares { position: absolute; right: 18px; top: 17px; } .team-detail_image:hover .team-block_detail-share_icon { color: var(--white-color); background-color: var(--black-color); } .team-block_detail-share_icon { position: relative; width: 54px; height: 54px; z-index: 10; font-size: 24px; line-height: 54px; border-radius: 50px; border-radius: 50px; display: inline-block; color: var(--white-color); background-color: var(--main-color); } .team-detail_image:hover .team-block_detail-socials { top: 140%; opacity: 1; } .team-block_detail-socials { position: absolute; right: 7px; top: -150%; width: 50px; z-index: 1; opacity: 0; padding: 10px 0px; text-align: center; border-radius: 50px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--white-color); } .team-block_detail-socials a { position: relative; font-size: 16px; display: block; width: 40px; height: 40px; margin: 1px 0px; margin: 0 auto; line-height: 40px; border-radius: 50px; color: var(--black-color); } .team-block_detail-socials a:hover { color: var(--white-color); background-color: var(--main-color); } .team-detail_tag { position: relative; font-size: 16px; padding: 8px 20px; border-radius: 50px; display: inline-block; color: var(--white-color); background-color: var(--main-color); } .team-detail_title { position: relative; font-weight: 500; margin-top: 8px; font-size: 38px; margin-bottom: 12px; color: var(--black-color); } .team-detail p { position: relative; font-size: 16px; color: #0f0f0f; line-height: 28px; margin-bottom: 15px; } .team-detail_info-outer { position: relative; margin-top: 30px; } .team-detail_info { position: relative; } .team-detail_info li { position: relative; display: block; font-size: 16px; color: #0f0f0f; line-height: 26px; margin-bottom: 30px; } .team-detail_info li span { position: relative; display: block; font-size: 20px; margin-bottom: 10px; font-weight: 500; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .team-detail .lower-box { position: relative; margin-top: 40px; } .team-detail .lower-box h3 { position: relative; margin-bottom: 20px; } /*** ==================================================================== Team Tabs Style ==================================================================== ***/ .team-tabs { position: relative; margin-top: 30px; } .team-tabs .tab-btns { position: relative; } .team-tabs .tab-btns .tab-btn { position: relative; line-height: 24px; cursor: pointer; font-weight: 500; padding: 13px 36px; font-size: 16px; margin-right: 10px; border-radius: 50px; display: inline-block; transition: all 500ms ease; background-color: #f5f5f5; color: var(--black-color); } .team-tabs .tab-btns .tab-btn:last-child { margin-right: 0px; } .team-tabs .tab-btns .tab-btn:hover, .team-tabs .tab-btns .tab-btn.active-btn { color: var(--white-color); background-color: var(--main-color); } .team-tabs .tabs-content { position: relative; padding: 30px 0px 0px; } .team-tabs .tabs-content .tab { position: relative; display: none; border-top: 0px; } .team-tabs .tabs-content .tab.active-tab { display: block; } .team-detail_contact { position: relative; margin-top: 60px; border-radius: 30px; padding: 35px 35px 50px; border: 1px solid rgba(var(--black-color-rgb), 0.15); } /* Skills Section */ .default-skills { position: relative; } .default-skill-item { position: relative; margin-bottom: 25px; } .default-skill-item:last-child { margin-bottom: 0px; } .default-skill-title { position: relative; font-weight: 500; font-size: 18px; margin-bottom: 10px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .default-skill-bar { position: relative; width: 100%; height: 12px; border-radius: 50px; } .default-skill-bar:before { position: absolute; content: ""; left: 0px; bottom: 0px; right: 0px; height: 12px; border-radius: 50px; background-color: #dddddd; } .default-bar-inner { position: relative; width: 100%; height: 12px; overflow: hidden; border-radius: 50px; } .default-bar { position: absolute; left: 0px; top: 0px; height: 12px; width: 0px; border-radius: 50px; background-color: var(--main-color); -webkit-transition: all 2000ms ease; -ms-transition: all 2000ms ease; -o-transition: all 2000ms ease; -moz-transition: all 2000ms ease; transition: all 2000ms ease; } .default-count-box { position: absolute; right: 0px; top: 0px; font-weight: 500; font-size: 18px; color: var(--black-color); } .team-detail_subtext { position: relative; color: #0f0f0f; font-size: 16px; line-height: 28px; margin-top: -10px; margin-bottom: 25px; } /* Search Widget */ .sidebar .search-box .form-group { position: relative; margin: 0px; } .sidebar .search-box .form-group input:focus + button { background-color: var(--main-color); } .sidebar .search-box .form-group input[type="text"], .sidebar .search-box .form-group input[type="search"] { position: relative; line-height: 28px; font-size: 14px; padding: 10px 50px 10px 25px; background: none; display: block; width: 100%; height: 64px; border-radius: 50px; color: var(--black-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--white-color); } .sidebar .search-box .form-group input::placeholder, .sidebar .search-box .form-group textarea::placeholder { color: #0f0f0f; } .sidebar .search-box .form-group button { position: absolute; right: 0px; top: 0px; bottom: 0px; width: 64px; width: 64px; display: block; cursor: pointer; line-height: 50px; font-weight: normal; border-radius: 50px; font-size: 16px; color: var(--white-color); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--main-color); } .sidebar .search-box .form-group button:hover { background-color: var(--main-color); color: var(--white-color); } .page-top_pattern { position: absolute; left: 0px; top: 0px; right: 0px; height: 100%; background-position: left top; background-repeat: no-repeat; } .page-top_pattern:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; height: 50%; z-index: -1; background-image: linear-gradient( to bottom, #f5f5f5, #f7f7f7, #fafafa, #fcfcfc, #ffffff ); } /* Post Widget */ .post-widget .widget-content { position: relative; } .post-widget .post { position: relative; min-height: 160px; padding-left: 160px; margin-bottom: 32px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .post-widget .post:last-child { margin-bottom: 0px; padding-bottom: 0px; } .post-widget .post .thumb { position: absolute; left: 0; top: 0; height: 120px; width: 141px; overflow: hidden; border-radius: 6px; } .post-widget .post .thumb a { display: block; } .post-widget .post .thumb img { display: block; width: 100%; height: auto; } .post-widget .post h4 a { color: var(--black-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .post-widget .post h4 a:hover { color: var(--main-color); } .post-widget .post .post-date { position: relative; display: block; font-weight: 300; font-size: 14px; color: #0f0f0f; margin-bottom: 5px; display: inline-block; } /* Category List */ .category-list_two { position: relative; z-index: 1; } .category-list_two li { position: relative; z-index: 1; margin-bottom: 10px; } .category-list_two li a { position: relative; display: block; font-size: 18px; z-index: 1; font-weight: 500; border-radius: 50px; color: var(--black-color); padding: 24px 25px 24px 40px; background-color: #f5f5f5; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; font-family: "Lexend Deca", sans-serif; } .category-list_two li a:hover::before { color: var(--white-color); } .category-list_two li a:before { position: absolute; content: "\f105"; right: 35px; top: 22px; z-index: 98; color: var(--black-color); font-family: "Font Awesome 6 Free"; } .category-list_two li a:hover { background-color: var(--main-color); color: var(--white-color); } .category-list_two li:last-child { margin-bottom: 0px; } /* Tags */ .popular-tags a { position: relative; padding: 10px 25px; font-size: 14px; font-weight: 300; border-radius: 50px; margin-right: 5px; margin-bottom: 10px; display: inline-block; color: var(--black-color); border: 1px solid rgba(var(--black-color-rgb), 0.5); } .popular-tags a:hover { color: var(--white-color); border-color: var(--main-color); background-color: var(--main-color); } .blog-detail { position: relative; } .blog-detail_inner { position: relative; } .blog-detail_image-outer { position: relative; } .news-detail_image { position: relative; overflow: hidden; border-radius: 30px; } .news-detail_image:before { position: absolute; content: ""; right: 0px; bottom: 0px; width: 174px; height: 66px; z-index: 9; background: url(../images/icons/shape-3.png); background-repeat: no-repeat; } .news-detail_image img:first-child { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1; -webkit-transform: translatex(50%) scalex(2); transform: translatex(50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .blog-detail_inner:hover .news-detail_image img:first-child { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .blog-detail_inner:hover .news-detail_image img:nth-child(2) { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .news-detail_image img { position: relative; width: 100%; display: block; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .blog-detail_content { position: relative; padding-top: 30px; } .blog-detail_date { position: absolute; right: 10px; bottom: 0px; z-index: 10; font-size: 16px; font-weight: 600; padding: 9px 35px; border-radius: 50px; letter-spacing: 1px; color: var(--white-color); font-family: "Lexend Deca", sans-serif; background-color: var(--black-color); } .blog-detail_meta { position: relative; } .blog-detail_meta li { position: relative; font-size: 16px; padding-left: 30px; margin-right: 15px; display: inline-block; color: var(--black-color); } .blog-detail_meta li .icon { position: absolute; left: 0px; top: 2px; line-height: 1em; color: var(--main-color); } .blog-detail_meta li:last-child { margin-right: 0px; padding-right: 0px; } .blog-detail_title { position: relative; margin-top: 15px; color: var(--black-color); } .blog-detail p { position: relative; color: #0f0f0f; font-size: 16px; line-height: 28px; margin-top: 15px; } .blog-detail_list { position: relative; margin-left: 15px; } .blog-detail_list li { position: relative; color: #0f0f0f; font-size: 16px; margin-bottom: 15px; padding-left: 15px; } .blog-detail_list li:before { position: absolute; content: ""; left: 0px; top: 8px; width: 6px; height: 6px; border-radius: 50px; background-color: #000000; } .blog-detail blockquote { position: relative; padding: 34px 30px; border-radius: 20px; margin-top: 30px; margin-bottom: 30px; background-color: #f5f5f5; } .blog-detail blockquote .blockquote-inner { position: relative; padding-left: 95px; font-size: 18px; line-height: 30px; padding-top: 5px; font-weight: 500; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .blog-detail blockquote:before { position: absolute; content: ""; left: -6px; top: -6px; bottom: 40px; width: 60%; z-index: -1; border-radius: 20px; background-color: var(--black-color); } .blog-detail blockquote .quote { position: absolute; left: 0px; top: 0px; width: 68px; height: 68px; line-height: 68px; border-radius: 10px; text-align: center; display: inline-block; background-color: var(--main-color); } .blog-detail blockquote i { position: relative; display: block; text-align: right; font-size: 16px; font-weight: 500; color: var(--main-color); font-family: "Lexend Deca", sans-serif; } .news-detail_image-two { position: relative; margin-top: 30px; overflow: hidden; margin-bottom: 25px; } .news-detail_image-two img { position: relative; border-radius: 25px; } .post-share-options { position: relative; padding-top: 20px; margin-top: 30px; margin-bottom: 50px; border-top: 1px solid rgba(0, 0, 0, 0.2); } .post-share-options .post-tags { position: relative; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .post-share-options .post-tags strong { position: relative; font-weight: 500; font-size: 24px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .post-share-options .post-tags a { position: relative; font-size: 16px; padding: 12px 22px; border-radius: 50px; display: inline-block; color: var(--black-color); border: 1px solid rgba(0, 0, 0, 0.2); } .post-share-options .post-tags a:hover { color: var(--white-color); border-color: var(--main-color); background-color: var(--main-color); } .post-share-options .social-links { position: relative; } .post-share-options .social-links span { position: relative; font-weight: 500; font-size: 20px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .post-share-options .social-links a { position: relative; font-size: 18px; margin-left: 10px; color: var(--black-color); } .post-share-options .social-links a:hover { color: var(--black-color); } /* Blog Author Post */ .blog-author-post { position: relative; margin-top: 30px; padding-bottom: 60px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .blog-author-post_inner { position: relative; padding-left: 300px; } .blog-detail_author-image { position: absolute; left: 0px; top: 0px; width: 266px; overflow: hidden; border-radius: 15px; } .blog-author-post h5 { font-weight: 500; color: var(--black-color); } .blog-author-post .text { position: relative; line-height: 30px; font-size: 16px; margin-top: 10px; color: #0f0f0f; } .blog-author-post_socials { position: relative; margin-top: 15px; } .blog-author-post_socials li { position: relative; margin-right: 5px; display: inline-block; } .blog-author-post_socials li a { position: relative; font-size: 16px; font-weight: 600; color: var(--main-color); } .blog-author-post_socials li a:hover { color: var(--main-color); } /*** ==================================================================== Comments Area ==================================================================== ***/ .sidebar-page-container .comments-area { position: relative; margin-top: 50px; margin-bottom: 50px; border-radius: 20px; } .sidebar-page-container .group-title { position: relative; margin-bottom: 30px; } .sidebar-page-container .group-title h4 { font-weight: 500; color: var(--black-color); } .sidebar-page-container .group-title .text { position: relative; font-size: 16px; color: var(--color-five); margin-top: 5px; } .sidebar-page-container .comments-area .comment-box { position: relative; margin-bottom: 40px; border-radius: 20px; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .sidebar-page-container .comments-area .comment-box:last-child { margin-bottom: 20px; } .sidebar-page-container .comments-area .comment { position: relative; font-size: 14px; padding: 0px 0px 0px 120px; } .sidebar-page-container .comments-area .reply-comment { margin-left: 120px; } .sidebar-page-container .comments-area .comment-box .author-thumb { position: absolute; left: 0px; top: 0px; width: 90px; height: 90px; overflow: hidden; border-radius: 50%; margin-bottom: 20px; } .sidebar-page-container .comments-area .comment-box .author-thumb img { width: 100%; display: block; } .sidebar-page-container .comments-area .comment-info { gap: 15px; margin-bottom: 15px; } .sidebar-page-container .comments-area .comment-box strong { position: relative; font-weight: 500; display: block; font-size: 18px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .sidebar-page-container .comments-area .comment-box .text { line-height: 28px; font-size: 16px; color: #0f0f0f; margin-bottom: 15px; } .sidebar-page-container .comments-area .comment-info .comment-time { position: relative; font-weight: 500; display: block; font-size: 14px; color: var(--main-color); } .sidebar-page-container .comments-area .comment-box .reply-btn { position: absolute; right: 0px; top: -20px; padding: 7px 20px; font-weight: 500; font-size: 14px; border-radius: 50px; color: var(--white-color); background-color: var(--main-color); } .sidebar-page-container .comments-area .comment-box .reply-btn:hover { color: var(--white-color); background-color: var(--black-color); } /*** ==================================================================== Comment Form ==================================================================== ***/ .comment-form-outer { position: relative; } .comment-form-outer .rating { position: relative; } .comment-form-outer .rating strong { position: relative; font-weight: 600; font-size: 18px; margin-left: 25px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .comment-form-outer .rating span { position: relative; color: #fece50; } .comment-form .form-group { margin-bottom: 25px; } .comment-form .form-group:last-child { margin-bottom: 0px; } .comment-form .form-group input[type="text"], .comment-form .form-group input[type="password"], .comment-form .form-group input[type="tel"], .comment-form .form-group input[type="email"], .comment-form .form-group select { position: relative; display: block; width: 100%; line-height: 28px; padding: 10px 25px; height: 54px; border-radius: 50px; font-size: 16px; color: #0f0f0f; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; background-color: var(--white-color); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .comment-form .form-group textarea::-webkit-input-placeholder, .comment-form .form-group input::-webkit-input-placeholder { color: var(--color-five); } .comment-form .form-group input[type="text"]:focus, .comment-form .form-group input[type="password"]:focus, .comment-form .form-group input[type="tel"]:focus, .comment-form .form-group input[type="email"]:focus, .comment-form .form-group select:focus, .comment-form .form-group textarea:focus { border-color: var(--main-color); } .comment-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 24px; padding: 15px 25px 25px; font-size: 16px; color: #0f0f0f; height: 120px; resize: none; border-radius: 25px; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; background-color: var(--white-color); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .comment-form .theme-btn { padding: 17px 40px; } /*** ==================================================================== Contact Three ==================================================================== ***/ .contact-three { position: relative; padding: 64px 0px 70px; } .contact-three_form-column { position: relative; margin-bottom: 30px; } .contact-three_form-outer { position: relative; } .contact-three_info-column { position: relative; margin-bottom: 30px; margin-top: 50px; } .contact-three_info-outer { position: relative; padding-left: 50px; } .contact-three.style-two .contact-three_info-outer { padding-left: 0px; } .contact-info_text { position: relative; color: #0f0f0f; font-size: 16px; line-height: 26px; margin-top: 15px; margin-bottom: 30px; } .contact-info_block { position: relative; margin: 15px; background-color: #ab8b40; } .contact-info_block-inner { position: relative; } .contact-info_block-icon { position: relative; width: 50px; margin-right: 20px; height: 50px; font-size: 20px; line-height: 52px; font-weight: 500; text-align: center; border-radius: 50px; display: inline-block; color: rgb(255 255 255); font-family: "Font Awesome 6 Free"; border: 2px solid rgb(255 255 255); } .contact-info_block-inner h4 { margin: 15px 0px 10px; color: rgb(255 255 255); } .contact-three_info-column p { position: relative; line-height: 1.7em; color: #ffffff; font-size: 16px; } /*** ==================================================================== Map One ==================================================================== ***/ .map-one { position: relative; padding: 0px 0px 110px; } .map-one iframe { width: 100%; height: 450px; border-radius: 20px; } /*** ==================================================================== Coming Soon ==================================================================== ***/ .coming-soon { position: relative; display: block; text-align: center; padding-bottom: 100px; } .coming-soon .content { position: relative; } .coming-soon .content .content-inner { position: relative; padding: 110px 15px 0px; } .coming-soon .content .content-inner .logo { position: relative; z-index: 1; margin-bottom: 60px; } .time-counter { position: relative; } .time-counter .time-countdown { position: relative; margin-bottom: 150px; } .time-counter .time-countdown .counter-column { position: relative; display: inline-block; width: 180px; height: 180px; line-height: 1em; color: var(--white-color); font-size: 20px; font-weight: 500; text-align: center; z-index: 7; border-radius: 20px; background-color: var(--main-color); margin: 0 15px 20px; font-family: "Lexend Deca", sans-serif; } .time-counter .time-countdown .counter-column:nth-child(2) { background-color: #f5f5f5; color: var(--black-color); border: 2px solid rgba(0, 0, 0, 0.2); } .time-counter .time-countdown .counter-column:nth-child(2) .count { color: var(--black-color); } .time-counter .time-countdown .counter-column:nth-child(3) { background-color: #000000; } .time-counter .time-countdown .counter-column:nth-child(4) { background-color: var(--main-color); } .time-counter .time-countdown .counter-column .count { position: relative; display: block; font-size: 70px; line-height: 30px; padding: 60px 0px 30px; color: var(--white-color); font-weight: 600; } .coming-soon .emailed-form { position: relative; } .coming-soon .emailed-form h3 { color: var(--black-color); margin-bottom: 20px; } .coming-soon .emailed-form .text { display: block; color: var(--black-color); font-size: 18px; margin-bottom: 40px; } .coming-soon .emailed-form .form-group { position: relative; display: block; max-width: 540px; width: 100%; margin: 0 auto; } .coming-soon .emailed-form .form-group input[type="text"], .coming-soon .emailed-form .form-group input[type="tel"], .coming-soon .emailed-form .form-group input[type="email"], .coming-soon .emailed-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 28px; height: 60px; color: var(--black-color); font-size: 16px; overflow: hidden; border-radius: 50px; padding: 15px 50px 15px 25px; background: var(--white-color); border: 1px solid rgba(var(--black-color-rgb), 0.15); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .coming-soon .emailed-form .form-group input:focus, .coming-soon .emailed-form .form-group select:focus, .coming-soon .emailed-form .form-group textarea:focus { border-color: var(--main-color); } .coming-soon .emailed-form .form-group input[type="submit"], .coming-soon .emailed-form button { position: absolute; right: 10px; top: 0px; width: 60px; height: 60px; line-height: 40px; font-size: 18px; color: var(--main-color); background-color: transparent; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .coming-soon .emailed-form .form-group input[type="submit"]:hover, .coming-soon .emailed-form button:hover { color: var(--color-two); } .coming-soon .copyright-text { position: relative; font-size: 18px; line-height: 26px; color: var(--white-color); font-weight: 300; } .coming-soon .copyright-text a { color: var(--main-color); } .coming-soon .copyright-text a:hover { text-decoration: underline; } .clock-wrapper { position: absolute; top: 50%; right: 0; left: 0; width: 250px; height: 250px; margin: auto; margin-top: -145px; border-radius: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); background-color: rgba(var(--black-color-rgb), 0.2); transform: scale(2); } .clock-base { width: 250px; height: 250px; border-radius: 50%; } .click-indicator { position: absolute; z-index: 1; top: 10px; left: 10px; width: 230px; height: 230px; } .click-indicator div { position: absolute; width: 2px; height: 4px; margin: 113px 114px; } .click-indicator div > span { height: 5px; width: 5px; background-color: #00022a; display: inline-block; border-radius: 50%; margin-left: -1px; margin-top: -1px; } .click-indicator div:nth-child(1) { transform: rotate(30deg) translateY(-120px); } .click-indicator div:nth-child(2) { transform: rotate(60deg) translateY(-120px); } .click-indicator div:nth-child(3) { transform: rotate(90deg) translateY(-120px); background-color: var(--main-color); } .click-indicator div:nth-child(4) { transform: rotate(120deg) translateY(-120px); } .click-indicator div:nth-child(5) { transform: rotate(150deg) translateY(-120px); } .click-indicator div:nth-child(6) { transform: rotate(180deg) translateY(-120px); background-color: var(--main-color); } .click-indicator div:nth-child(7) { transform: rotate(210deg) translateY(-120px); } .click-indicator div:nth-child(8) { transform: rotate(240deg) translateY(-120px); } .click-indicator div:nth-child(9) { transform: rotate(270deg) translateY(-120px); background-color: var(--main-color); } .click-indicator div:nth-child(10) { transform: rotate(300deg) translateY(-120px); } .click-indicator div:nth-child(11) { transform: rotate(330deg) translateY(-120px); } .click-indicator div:nth-child(12) { transform: rotate(360deg) translateY(-120px); background-color: var(--main-color); } .clock-hour { position: absolute; z-index: 2; top: 75px; left: 123px; width: 4px; height: 65px; background-color: var(--main-color); border-radius: 2px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); transform-origin: 2px 50px; transition: 0.5s; -webkit-animation: rotate-hour 43200s linear infinite; -moz-animation: rotate-hour 43200s linear infinite; } .clock-minute { position: absolute; z-index: 3; top: 55px; left: 123px; width: 4px; height: 85px; background-color: var(--main-color); border-radius: 2px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); transform-origin: 2px 70px; transition: 0.5s; -webkit-animation: rotate-minute 3600s linear infinite; -moz-animation: rotate-minute 3600s linear infinite; } .clock-second { position: absolute; z-index: 4; top: 15px; left: 124px; width: 2px; height: 130px; background-color: var(--black-color); opacity: 0.9; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); transform-origin: 1px 110px; transition: 0.5s; -webkit-animation: rotate-second 60s linear infinite; -moz-animation: rotate-second 60s linear infinite; } .clock-second:after { content: ""; display: block; position: absolute; left: -3px; bottom: 16px; width: 8px; height: 8px; background-color: var(--black-color); border: solid 2px var(--black-color); border-radius: 50%; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } .clock-center { position: absolute; z-index: 1; width: 150px; height: 150px; top: 50px; left: 50px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); border-radius: 50%; } .clock-center:after { content: ""; display: block; width: 20px; height: 20px; margin: 65px; /* background-color: var(--black-color); */ border-radius: 50%; } /*** ==================================================================== Error One ==================================================================== ***/ .error-one { position: relative; overflow: hidden; text-align: center; padding: 120px 0px 80px; } .error-one_image { position: relative; margin-top: 0px; } .error-one_content { position: relative; text-align: center; margin-top: 30px; } .error-one h2 { line-height: 1em; } .error-one_text { position: relative; margin-top: 30px; color: #0f0f0f; font-size: 18px; } .error-one_button { position: relative; margin-top: 30px; } /*** ==================================================================== Privacy Section ==================================================================== ***/ .privacy-section { position: relative; padding: 100px 0px 100px; } .privacy-section .privacy-content { position: relative; padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #e2e2e2; } .privacy-section .privacy-content:last-child { padding-bottom: 0px; margin-bottom: 0px; border: none; } .privacy-section h3 { color: var(--black-color); margin-bottom: 20px; } .privacy-section p { margin-bottom: 20px; } .privacy-section .date { position: relative; font-weight: 500; font-size: 18px; margin-bottom: 15px; color: var(--main-color); } .privacy-section h4 { color: var(--black-color); margin-bottom: 20px; } .privacy-section .privacy-list { position: relative; margin-left: 20px; } .privacy-section .privacy-list li { position: relative; font-weight: 300; padding-left: 26px; line-height: 1.7em; font-size: 18px; margin-bottom: 10px; color: var(--black-color); } .privacy-section .privacy-list li:before { position: absolute; content: ""; left: 0px; top: 10px; width: 7px; height: 7px; border-radius: 50px; background-color: var(--main-color); } /* Shop Cat */ .shop-cat { position: relative; } .shop-cat li { position: relative; margin-bottom: 15px; } .shop-cat li a { position: relative; font-size: 17px; display: block; color: var(--black-color); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; padding: 15px 50px 15px 20px; margin-bottom: 2px; border: 1px solid #eee; display: block; border-radius: 8px; } .shop-cat li a span { position: absolute; right: 20px; } .shop-cat li a:hover { color: var(--main-color); } /*Sidebar Realated Posts */ .sidebar .related-posts .post { position: relative; padding-top: 40px; min-height: 156px; padding-left: 150px; margin-bottom: 20px; } .sidebar .related-posts .post:last-child { margin-bottom: 0px; min-height: inherit; } .sidebar .related-posts .post .post-thumb { position: absolute; left: 0px; top: 0px; width: 130px; background-color: rgba(0, 0, 0, 0.05); } .sidebar .related-posts .post .post-thumb img { display: block; width: 100%; } .sidebar .related-posts .post h4 { top: -2px; font-size: 22px; font-weight: 500; line-height: 1.3em; color: var(--black-color); } .sidebar .related-posts .post h4 a { color: var(--black-color); transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; } .sidebar .related-posts .post h4 a:hover { opacity: 1; color: var(--main-color); text-decoration: underline; } .sidebar .related-posts .post .price { font-size: 18px; letter-spacing: 1px; font-weight: 300; margin-top: 5px; color: var(--main-color); } /* Shop Section */ .shop-section { position: relative; } .shop-section .items-sorting { position: relative; margin-bottom: 30px; } .shop-section .items-sorting .total-items { position: relative; font-size: 18px; color: var(--black-color); } .shop-section .items-sorting .total-items span { color: var(--main-color); } /* Shop Item */ .shop-item { position: relative; margin-bottom: 40px; } .shop-item .inner-box { position: relative; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .shop-item .inner-box:hover .image .overlay-box { opacity: 1; } .shop-item .inner-box .image { position: relative; text-align: center; background-color: rgba(0, 0, 0, 0.04); } .shop-item .inner-box .image .overlay-link { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; display: block; z-index: 1; } .shop-item .inner-box .image .sale { position: absolute; right: 10px; top: 10px; z-index: 2; padding: 8px 20px; display: inline-block; color: var(--white-color); background-color: var(--black-color); } .shop-item .inner-box .image .overlay-box { position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; text-align: center; background-color: rgba(0, 0, 0, 0.5); transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .shop-item .inner-box .image .overlay-box .cart-option { position: relative; top: 50%; margin-top: -25px; } .shop-item .inner-box .image .overlay-box .cart-option li { position: relative; margin: 0px 3px; color: var(--black-color); display: inline-block; } .shop-item .inner-box .image .overlay-box .cart-option li a { position: relative; color: var(--black-color); font-size: 56px; font-weight: 500; display: block; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .shop-item .inner-box .image .overlay-box .cart-option li a .fa { margin-bottom: 8px; display: inline-block; } .shop-item .inner-box .image .overlay-box .cart-option li a:hover { color: var(--main-color); } .shop-item .inner-box .image img { width: 100%; display: inline-block; } .shop-item .inner-box .lower-content { position: relative; padding: 20px 0px 0px; } .shop-item .inner-box .lower-content h3 { position: relative; font-size: 22px; font-weight: 500; margin-bottom: 6px; } .shop-item .inner-box .lower-content h3 a { color: var(--black-color); transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .shop-item .inner-box .lower-content h3 a:hover { color: var(--main-color); } .shop-item .inner-box .lower-content .price { position: relative; font-size: 18px; font-weight: 300; opacity: 0.9; color: var(--black-color); } .shop-item .inner-box .lower-content .cart { position: relative; display: inline-block; font-size: 28px; width: 40px; color: var(--black-color); } .shop-section .lower-text { position: relative; margin-top: 30px; } .shop-section .lower-text .products { position: relative; color: var(--black-color); font-size: 16px; font-weight: 600; z-index: 1; padding-bottom: 4px; letter-spacing: 2px; display: inline-block; border-bottom: 1px solid var(--black-color); -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; } .shop-section .lower-text .products:before { position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 100%; display: block; z-index: -1; background-color: var(--black-color); -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; } .shop-section .lower-text .products:hover::before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .shop-section .lower-text .products:hover { color: var(--white-color); } /*** ==================================================================== Shop Detail ==================================================================== ***/ .shop-detail { position: relative; padding: 100px 0px 70px; } .shop-detail_gallery-column { position: relative; margin-bottom: 30px; } .shop-detail_gallery-column .image { position: relative; overflow: hidden; text-align: center; border-radius: 10px; margin-bottom: 30px; background-color: rgba(var(--color-two-rgb), 0.03); } .shop-detail_gallery-column .image img { position: relative; width: 100%; display: block; } .shop-detail_gallery-column .thumb { position: relative; cursor: pointer; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; border: 2px solid rgba(var(--black-color-rgb), 0.05); } .shop-detail_gallery-column .thumb img { width: 100%; display: block; } .shop-detail_gallery-column .thumb:hover { border-color: rgba(var(--black-color-rgb), 0.01); background-color: rgba(var(--black-color-rgb), 0.05); } .shop-detail_content-column { position: relative; margin-bottom: 30px; } .shop-detail_content-column .inner-column { position: relative; padding-left: 20px; } .shop-detail_title { font-weight: 500; line-height: 1em; font-size: 40px; color: var(--black-color); } .shop-detail_rating { position: relative; margin-top: 20px; } .shop-detail_rating .fa-star { position: relative; font-size: 14px; color: var(--black-color); } .shop-detail_rating .fa-star.light { opacity: 0.4; color: var(--black-color); } .shop-detail_rating i { position: relative; font-size: 18px; margin-left: 10px; color: var(--black-color); } .shop-detail_price { position: relative; font-weight: 600; font-size: 24px; margin-top: 20px; color: var(--black-color); } .shop-detail_text { position: relative; line-height: 28px; font-size: 16px; opacity: 0.8; margin-top: 20px; margin-bottom: 30px; color: var(--black-color); } /* Item Quantity */ .item-quantity { position: relative; width: 100%; max-width: 115px; padding: 0px 45px; border-radius: 5px; display: inline-block; margin-right: 30px; border: 1px solid rgba(var(--black-color-rgb), 0.05); } .quantity-box .item-quantity .input-group { position: relative; display: table; border-collapse: separate; max-width: 144px; width: 100%; height: 42px; } .quantity-box .item-quantity input.qty-spinner { line-height: 40px; height: 40px; width: 20px !important; padding: 0px !important; box-shadow: none !important; border: none; text-align: center; font-size: 16px; font-weight: 500; color: var(--black-color); border: none; border-radius: 0; background: none; margin-right: 0px; } .quantity-box .item-quantity input.qty-spinner:focus { background: none; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-down { position: absolute; height: 44px; width: 44px; background: none; padding: 6px 0px !important; line-height: 30px; left: -40px; top: -40px; border: none !important; border-radius: 0px; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-up { position: absolute; height: 44px; width: 44px; background: none; padding: 6px 0px !important; line-height: 30px; right: -25px; top: -40px; border: none !important; border-radius: 0px; margin-top: 0px; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-down:hover, .quantity-box .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-up:hover { } .quantity-box .bootstrap-touchspin .glyphicon-chevron-up:before { content: "\2b"; color: var(--black-color); font-weight: 500; font-style: normal; font-size: 12px; font-family: "Font Awesome 6 Free"; } .quantity-box .bootstrap-touchspin .glyphicon-chevron-down:before { content: "\f068"; color: var(--black-color); font-weight: 500; font-style: normal; font-size: 12px; font-family: "Font Awesome 6 Free"; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical { position: absolute; width: 100%; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical i { top: 6px; left: 14px; font-size: inherit !important; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { margin-top: 0px; } .shop-detail_list { position: relative; margin-top: 25px; } .shop-detail_list li { position: relative; font-weight: 500; font-size: 16px; margin-bottom: 15px; color: var(--black-color); } .shop-detail_list li span { position: relative; font-weight: 500; color: var(--black-color); margin-right: 10px; } .shop-detail_socials { position: relative; } .shop-detail_socials .share { position: relative; font-weight: 600; display: inline-block; color: var(--black-color); font-size: 16px; } .shop-detail_socials { position: relative; margin-top: 30px; } .shop-detail_socials li { position: relative; display: inline-block; margin-right: 5px; } .shop-detail_socials li a { position: relative; width: 40px; height: 40px; line-height: 38px; text-align: center; border-radius: 5px; display: inline-block; color: var(--black-color); font-size: 16px; font-family: "Font Awesome 5 Brands"; border: 1px solid rgba(var(--black-color-rgb), 0.05); } .shop-detail_socials li a:hover { color: var(--white-color); border-color: var(--main-color); background-color: var(--main-color); } /*** ==================================================================== Product Tabs Style ==================================================================== ***/ .shop-detail .prod-tabs { position: relative; margin-top: 30px; } .shop-detail .prod-tabs .tab-btns { position: relative; } .shop-detail .prod-tabs .tab-btns::before { position: absolute; content: ""; left: 0px; top: 30px; right: 0px; border-bottom: 1px solid rgba(var(--black-color-rgb), 0.1); } .shop-detail .prod-tabs .tab-btns .tab-btn { position: relative; display: inline-block; color: var(--black-color); line-height: 24px; cursor: pointer; font-weight: 500; padding: 16px 30px; font-size: 20px; margin-right: 20px; transition: all 500ms ease; background: var(--white-color); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .shop-detail .prod-tabs .tab-btns .tab-btn:last-child { margin-right: 0px; } .shop-detail .prod-tabs .tab-btns .tab-btn:hover, .shop-detail .prod-tabs .tab-btns .tab-btn.active-btn { color: var(--white-color); background-color: var(--main-color); } .shop-detail .prod-tabs .tabs-content { position: relative; padding: 40px 0px 0px; } .shop-detail .prod-tabs .tabs-content .tab { position: relative; display: none; border-top: 0px; } .shop-detail .prod-tabs .tabs-content .tab.active-tab { display: block; } .prod-tabs .tabs-content p { line-height: 28px; font-size: 16px; color: var(--black-color); margin-bottom: 20px; } .prod-tabs .tabs-content .tab .title { position: relative; font-weight: 300; margin-bottom: 25px; color: var(--black-color); } /* Comments Area */ .comments-area { position: relative; padding: 40px 40px; background-color: rgba(var(--black-color-rgb), 0.03); } .comments-area .group-title { position: relative; margin-bottom: 25px; } .comments-area .group-title h4 { position: relative; font-weight: 500; color: var(--black-color); } .comments-content { position: relative; padding: 45px 40px; margin-bottom: 30px; background-color: var(--black-color); } .comment-box { position: relative; margin-bottom: 25px; } .comment-box:last-child { margin-bottom: 0px; } .comment-box .comment { position: relative; padding-left: 80px; } .comment-box .author-thumb { position: absolute; left: 0px; top: 0px; width: 60px; height: 60px; overflow: hidden; } .comment-options { position: absolute; right: 0px; top: 0px; z-index: 1; } .comment-options li { position: relative; display: inline-block; margin-left: 15px; } .comment-options li a { position: relative; font-size: 14px; color: var(--color-two); } .comment-options li a:hover { color: var(--black-color); } .comment-box .comment-info { position: relative; font-size: 18px; padding-bottom: 5px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; } .comment-box .comment-time { position: relative; font-size: 14px; margin-top: 5px; color: var(--black-color); } .comment-box .text { position: relative; line-height: 28px; font-size: 16px; opacity: 0.7; color: var(--black-color); margin-top: 15px; margin-bottom: 15px; } .likes-option { position: absolute; right: 0px; bottom: 0px; } .likes-option li { position: relative; display: inline-block; color: var(--black-color); margin-left: 15px; padding-left: 25px; } .likes-option li span { position: absolute; left: 0px; font-family: "Font Awesome 5 Pro"; } .comment-reply { position: relative; font-size: 14px; color: var(--black-color); } .comment-reply span { position: relative; font-family: "Font Awesome 5 Pro"; margin-right: 10px; } .reply-comment { position: relative; margin-left: 40px; padding: 30px 30px; background-color: var(--white-color); } .related-products { position: relative; margin-top: 70px; } .related-products h3 { position: relative; margin-bottom: 25px; color: var(--black-color); } /*** ==================================================================== Cart Section ==================================================================== ***/ .shoping-cart-section { position: relative; padding: 110px 0px 50px; } .shoping-cart-section .cart-column { position: relative; margin-bottom: 30px; } .shoping-cart-section .cart-column .inner-column { position: relative; } .shoping-cart-section .cart-table { width: 100%; min-width: 740px; } .cart-total-outer { position: relative; } .cart-section .cart-table { width: 100%; min-width: 900px; } .cart-table .cart-header { position: relative; width: 100%; border-radius: 0px; font-size: 16px; color: var(--color-two); } .cart-table thead tr th { line-height: 24px; padding: 0px 15px 20px; min-width: 120px; font-weight: 500; font-size: 18px; color: var(--black-color); } .cart-table thead tr th.prod-column { text-align: left; padding-left: 40px; } .cart-table tbody tr td { line-height: 24px; min-width: 100px; vertical-align: middle; padding: 20px 10px 5px; } .cart-table .prod-title { font-weight: 500; font-size: 16px; color: var(--black-color); } .cart-table .prod-text { font-weight: 300; font-size: 16px; color: rgba(var(--black-color-rgb), 0.8); } .cart-table tbody tr .prod-column .column-box { position: relative; min-height: 90px; padding-left: 90px; text-align: left; } .cart-table tbody tr .prod-column .column-box .prod-thumb { position: absolute; width: 70px; left: 0px; top: 0px; padding: 10px 10px; border: 1px solid #f0f0f0; } .cart-table .cross-icon { position: absolute; right: -8px; top: -8px; width: 16px; height: 16px; font-size: 6px; font-weight: 500; cursor: pointer; line-height: 16px; text-align: center; border-radius: 50px; color: var(--white-color); font-family: "Font Awesome 6 Free"; background-color: var(--main-color); } .cart-table tbody tr .prod-column .column-box .prod-thumb img { display: block; max-width: 100%; } .cart-table tbody tr .prod-column .column-box h3 { margin-bottom: 10px; } .cart-table tbody tr .remove-btn { position: relative; font-size: 18px; color: var(--color-two); width: 34px; height: 34px; text-align: center; line-height: 30px; display: inline-block; border: 2px solid #ececec; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease; } .cart-table tbody tr .remove-btn .fa { position: relative; top: 2px; font-size: 14px; line-height: 14px; width: 14px; height: 14px; margin-right: 5px; background: #f0f0f0; color: var(--white-color); text-align: center; overflow: hidden; text-indent: 100px; } .cart-table tbody tr .remove { text-align: center; } .cart-table tbody tr .remove-btn:hover { color: var(--main-color); border-color: var(--main-color); } .cart-table tbody tr .remove-btn:hover .fa { text-indent: 0px; background: var(--main-color); } .cart-table tbody tr { border-bottom: 1px solid #f0f0f0; } .cart-table tbody tr td.price { font-weight: 500; font-size: 15px; color: var(--black-color); } .cart-table tbody tr td.sub-total { font-weight: 500; font-size: 15px; color: var(--black-color); } .shoping-cart-section .total-column { position: relative; margin-bottom: 25px; } .shoping-cart-section .total-column .inner-column { position: relative; } .shoping-cart-section .total-column .title-box { position: relative; text-align: center; margin-bottom: 20px; color: var(--black-color); } .shoping-cart-section .total-column .title-box h6 { color: var(--black-color); } .cart-total-box { position: relative; padding: 30px 30px; margin-bottom: 30px; border: 1px solid rgba(var(--black-color-rgb), 0.06); } /* Cart Totals */ .cart-totals { position: relative; } .cart-totals li { position: relative; padding: 15px 0px; font-size: 18px; color: var(--black-color); margin-bottom: 5px; border-bottom: 1px solid rgba(var(--black-color-rgb), 0.06); } .cart-totals li span { position: absolute; right: 0px; } .shoping-cart-section .check-box { position: relative; margin-bottom: 25px; margin-top: 20px; } .shoping-cart-section .check-box label { color: #2b2b2b; } .shoping-cart-section .check-box label { position: relative; display: block; width: 100%; cursor: pointer; margin-bottom: 0; font-weight: 300; line-height: 22px; padding: 4px 10px 0px; padding-left: 30px; font-size: 16px; color: var(--black-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shoping-cart-section .check-box input[type="checkbox"]:checked + label { border-color: 0px; } .shoping-cart-section .form-group .check-box label { padding-left: 30px; padding-top: 1px; cursor: pointer; } .shoping-cart-section .check-box label:before { position: absolute; left: 0; top: 6px; height: 20px; width: 20px; background: #ffffff; content: ""; border-radius: 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .shoping-cart-section .check-box label:after { position: absolute; left: 0px; top: 0; height: 15px; line-height: 15px; max-width: 0; font-size: 14px; color: #ffffff; font-weight: 800; overflow: hidden; background: transparent; text-align: center; font-family: "FontAwesome"; -webkit-transition: max-width 500ms ease; -moz-transition: max-width 500ms ease; -ms-transition: max-width 500ms ease; -o-transition: max-width 500ms ease; transition: max-width 500ms ease; } .shoping-cart-section .check-box input[type="checkbox"] { display: none; } .shoping-cart-section .check-box input[type="checkbox"]:checked + label:before { border: 8px solid var(--main-color); background-color: var(--white-color); } .shoping-cart-section .check-box input[type="checkbox"]:checked + label:after { max-width: 20px; opacity: 1; } /* Shipping Outer */ .shipping-outer { position: relative; } .shipping-outer .cart-shipping-box { position: relative; padding: 20px 30px 20px; margin-bottom: 30px; border: 1px solid rgba(var(--black-color-rgb), 0.06); } /* Cart Totals */ .shipping-list { position: relative; } .shipping-list li { position: relative; padding: 15px 0px; font-size: 16px; margin-bottom: 5px; color: var(--black-color); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.06); } .shipping-outer .buttons-box { position: relative; margin-top: 25px; } /* Checkout Section */ .checkout-section { position: relative; padding: 100px 0px 80px; } .checkout-section h4 { margin-bottom: 25px; color: var(--black-color); } .checkout-section .form-column { position: relative; margin-bottom: 30px; } .checkout-section .form-column .inner-column { position: relative; } .checkout-section .order-column { position: relative; margin-bottom: 30px; } .checkout-section .order-column .inner-column { position: relative; } /*** ==================================================================== Shipping Form ==================================================================== ***/ .shipping-form .form-group { margin-bottom: 30px; } .shipping-form .form-group:last-child { margin-bottom: 0px; } .shipping-form .form-group input[type="text"], .shipping-form .form-group input[type="password"], .shipping-form .form-group input[type="tel"], .shipping-form .form-group input[type="email"], .shipping-form .form-group select, .shipping-form .form-group .ui-selectmenu-button.ui-button { position: relative; display: block; width: 100%; line-height: 45px; padding: 10px 25px; height: 70px; border-radius: 0px; font-size: 16px; color: var(--black-color); background: var(--white-color); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.06); } .shipping-form .form-group .ui-button .ui-icon { top: 11px; } .shipping-form .form-group textarea::-webkit-input-placeholder, .shipping-form .form-group input::-webkit-input-placeholder { color: var(--black-color); } .shipping-form .form-group input[type="text"]:focus, .shipping-form .form-group input[type="password"]:focus, .shipping-form .form-group input[type="tel"]:focus, .shipping-form .form-group input[type="email"]:focus, .shipping-form .form-group select:focus, .shipping-form .form-group textarea:focus { border-color: var(--main-color); } .shipping-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 24px; font-size: 16px; height: 200px; resize: none; font-size: 16px; border-radius: 0px; padding: 20px 25px 25px; color: var(--black-color); background: var(--white-color); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.06); } .shipping-form .check-box { position: relative; } .shipping-form .check-box label { color: var(--black-color); } .shipping-form .check-box label { position: relative; display: block; width: 100%; cursor: pointer; margin-bottom: 0; font-weight: 300; line-height: 22px; padding: 4px 10px 0px; padding-left: 30px; font-size: 18px; display: inline; color: var(--black-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shipping-form .check-box input[type="checkbox"]:checked + label { border-color: var(--main-color); } .shipping-form .check-box label { padding-left: 30px; padding-top: 1px; cursor: pointer; } .shipping-form .check-box label:before { position: absolute; left: 0; top: 2px; height: 20px; width: 20px; background: #ffffff; content: ""; border-radius: 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .shipping-form .check-box label:after { position: absolute; left: 0px; top: 0; height: 15px; line-height: 15px; max-width: 0; font-size: 14px; color: #ffffff; font-weight: 800; overflow: hidden; background: transparent; text-align: center; font-family: "FontAwesome"; -webkit-transition: max-width 500ms ease; -moz-transition: max-width 500ms ease; -ms-transition: max-width 500ms ease; -o-transition: max-width 500ms ease; transition: max-width 500ms ease; } .shipping-form .check-box input[type="checkbox"] { display: none; } .shipping-form .check-box input[type="checkbox"]:checked + label:before { border: 8px solid var(--main-color); background-color: var(--white-color); } .shipping-form .check-box input[type="checkbox"]:checked + label:after { max-width: 20px; opacity: 1; } .shipping-form .theme-btn { cursor: pointer; } .order-box { position: relative; padding: 25px 25px; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .order-totals { position: relative; } .order-totals li { position: relative; font-weight: 600; padding: 18px 25px; border-radius: 3px; font-size: 14px; margin-bottom: 30px; border: 1px solid rgba(var(--black-color-rgb), 0.07); } .order-totals li span { position: absolute; right: 25px; font-weight: 500; color: var(--black-color); } .order-totals li:last-child { color: var(--white-color); background-color: var(--black-color); } .order-totals li:last-child span { color: var(--white-color); } /* Voucher Box */ .voucher-box { position: relative; } .voucher-box .form-group { position: relative; margin: 0px; width: 100%; max-width: 100%; padding-right: 100px; } .voucher-box .form-group input[type="text"], .voucher-box .form-group input[type="email"] { position: relative; line-height: 38px; display: block; height: 54px; width: 100%; font-weight: 500; border-radius: 0px; box-shadow: inherit; font-size: 14px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; padding: 10px 15px 10px 25px; color: var(--black-color); background-color: rgba(var(--white-color-rgb), 1); border: 1px solid rgba(var(--black-color-rgb), 0.07); } .voucher-box .form-group input::placeholder, .voucher-box .form-group textarea::placeholder { color: var(--black-color); } .voucher-box .form-group button { position: absolute; right: 0px; top: 0px; font-weight: 500; padding: 16px 24px; font-size: 14px; color: var(--white-color); background-color: var(--black-color); } .order-box .order-total { position: relative; font-weight: 500; font-size: 18px; color: var(--black-color); margin-top: 30px; } .order-box .order-total span { position: absolute; right: 0px; } .order-box .button-box { position: relative; margin-top: 30px; } .order-box .pay-btn { position: relative; width: 100%; text-align: center; padding: 17px 15px; border-radius: 6px; font-weight: 600; color: var(--white-color); background-color: var(--black-color); } .order-box .pay-btn:hover { letter-spacing: 2px; background-color: var(--black-color); } /*** ==================================================================== Register One ==================================================================== ***/ .register-one { position: relative; padding: 100px 0px 80px; } .register-one .form-column { position: relative; margin-bottom: 30px; } .register-one .form-column .inner-column { position: relative; padding: 30px 30px; border-radius: 5px; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .register-one h3 { position: relative; margin-bottom: 20px; color: var(--black-color); } .expand-section { width: 80%; margin: 0 auto; margin-top: 0px; border-radius: 72px; } .logo a svg { /* height: 80px; */ width: 134px; } .h-1 { object-fit: cover; height: 465px; } .h-12 { object-fit: contain; height: 465px; } .h-2 { height: 508px; object-fit: cover; } .tf-top-bar { background-color: #ab8b40; } .tf-top-bar .top-bar-inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; padding: 7px 40px 7px 33px; } .tf-top-bar .top-bar-info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 30px; } .wrap-social { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .tf-top-bar .wrap-social { gap: 14px; } .tf-social { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 8px; } .tf-social.style-2 { gap: 15px; } .tf-top-bar .top-bar-info li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; gap: 6px; } ul.top-bar-info span { color: white; } ul.top-bar-info span, a { color: #ffffff; } ul.top-bar-info i { color: #ffffff; font-size: 16px; } ul.tf-social.style-2 i { font-size: 16px; } .counter-one .sec-title_heading { margin-top: 5px; color: rgb(255 255 255); margin-bottom: 8px; } .counter-one p { position: relative; line-height: 1.7em; color: #ffffff; font-size: 16px; } .choose-one .sec-title.light .sec-title_heading { color: rgb(17 17 17); } .choose-one .sec-title.light .sec-title_text { opacity: 1; color: rgb(0 0 0); } .choose-one .left-box { display: flex; flex-direction: column; align-content: center; align-items: center; } .orpartner { position: relative; font-weight: 500; font-size: 18px; color: var(--black-color); font-family: "Lexend Deca", sans-serif; text-transform: capitalize; } .choose-one .sec-title_text { line-height: 30px; font-size: 16px; margin-top: 13px; margin-bottom: 30px; color: #666666; } .price-block_one-btn img { width: 80%; position: relative; /* right: 74px; */ bottom: 0; z-index: 999; } .price-one .column { position: relative; } .teamn2 .team-detail_image { margin-left: 10%; } .contact-info_block-inner { display: flex; align-items: center; } .contact-info_block { position: relative; margin: 15px; border-radius: 26px; padding: 17px; background-color: #ab8b40; } .breacrum { background-image: url(../images/background/6.png); /* background-image: url(assets/images/background/6.jpg); */ background-size: 100%; background-position: center 30px; background-color: #00000069; background-blend-mode: multiply; } .swiper-container { height: 100%; } b, strong { font-weight: 500; } .text-color { color: var(--main-color); } .modal { z-index: 99999999; } .modal-backdrop { z-index: 9999999; } .hide { display: none; } .h1 { height: 550px; object-fit: cover; } .wh { height: 400px; width: 400px; } .wh1 { width: 450px; height: 280px; object-fit: cover; } .check-box, .form-check { position: relative; margin-bottom: 20px; } .check-box .text-danger, .form-check .text-danger { position: absolute; bottom: -85%; width: 373px; } /* Brochure design css */ .brochure-1 { background-image: url(../images/brochure/background33.webp); background-size: cover; background-position: center; position: relative; padding: 125px 0; display: flex; align-items: center; } .brochure-1::before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; background-color: #0000009e; } .brochure-1 h1 { line-height: 3.8rem; text-wrap: balance; } .brochure-1 h2 { font-size: 27px; line-height: 2.8rem; text-wrap: balance; } /* global css */ .brochure-2, .brochure-3, .brochure-4, .brochure-6, .brochure-7 { padding-top: 72px; } .brochure-2 h2, .brochure-3 h2, .brochure-4 h2, .brochure-5 h2, .brochure-6 h2, .brochure-7 h2, .brochure-8 h2 { line-height: 45px; font-size: 30px; } .brochure-4 ul li, .brochure-6 ul li, .brochure-4 ul li, .brochure-5 td, .brochure-5 th, .brochure-7 td, .brochure-7 th, .brochure-7 ul li { font-size: 16px; } /* global css end */ .brochure-2 h3 { line-height: 39px; font-size: 28px; } .brochure-2 ul li { font-size: 16px; color: #222222; font-weight: 300; } .brochure-2 .border-custom { content: ""; height: 56%; width: 80%; border: 18px solid var(--main-color); position: absolute; top: 31%; right: 0; left: 0; margin: auto; display: flex; align-items: center; } .brochure-2 .card img { height: 450px; object-fit: cover; width: 100%; } .table-content .accordion-button:focus { box-shadow: none; } .table-content .accordion-button:not(.collapsed) { background-color: #ffffff00; border-bottom: 1px solid #cecece; } .brochure-3 .about-one_image-outer .image img { height: 519px; object-fit: contain; border-radius: 0; object-position: left; } .brochure-3 .feature-block_one-text ul, .brochure-4 ul { padding-left: 30px; } .brochure-3 .feature-block_one-text ul li, .brochure-4 ul li { list-style: disc; } .brochure-4 .brochure-4-img img { border: 4px solid var(--main-color); border-radius: 50%; } .brochure-5 { padding-top: 100px; } .brochure-5 h2 { font-size: 30px; } .brochure-5 { /* position: sticky; */ top: 130px; background-color: #fff; box-shadow: 0 0 19px 0 #ddd; border-radius: 36px; padding: 20px; margin-bottom: 20px; } .brochure-5.monthly { top: 140px; } .brochure-5.annual-income { top: 0; } .brochure-6 .news-block_two-image img { height: 420px; object-fit: cover; } .brochure-7 .card { position: relative; height: 100%; } .brochure-7 .card .card-body { position: relative; z-index: 10; } .brochure-7 .card .card-body ul li { color: #fff; } .brochure-7 .card:before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: var(--main-color); transform: skew(369deg); height: 100%; } .brochure-7 .card:after { content: ""; position: absolute; top: -9px; bottom: 0; right: -9px; left: 0; border: 2px solid var(--main-color); transform: skew(369deg); height: 100%; z-index: 8; } .brochure-8 .contact-info_block-icon { border: 2px solid rgb(30, 0, 0); color: rgb(30, 0, 0); } .download-brochure { position: fixed; right: -82px; bottom: 50%; z-index: 100; transform: rotate(-90deg); background-color: var(--main-color); padding: 8px 12px; border-radius: 17px 17px 0 0; } /* .bounce2 { animation: bounce2 2s ease infinite; } @keyframes bounce2 { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } */ .popup-image { float: right; width: 31%; margin: 0 0 11px 23px; border: 1px solid var(--main-color); padding: 6px; } @media only screen and (max-width: 767px) { .popup-image { display: none; } }