/* === ASSET CSS HASH: 85c6ae457bfdb73719cfd2cdaa4dd298bdece243 | SCOPE: section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] === */ /* Main Slider Widget Styles - Scoped under .slider-wrapper */ section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper{ overflow: hidden; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper a{ text-decoration: none; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider{ position: relative; display: block; background-color: var(--primary_color_font); z-index: 91; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide{ position: relative; background-color: var(--primary_color_font); } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-size: cover; background-position: center; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 1000ms ease-in, -webkit-transform 7000ms ease; transition: opacity 1000ms ease-in, -webkit-transform 7000ms ease; transition: transform 7000ms ease, opacity 1000ms ease-in; transition: transform 7000ms ease, opacity 1000ms ease-in, -webkit-transform 7000ms ease; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__bg:before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(17, 17, 17, .95); z-index: -1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__bg{ -webkit-transform: scale(1.1); transform: scale(1.1); } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__img{ position: absolute; bottom: 0px; right: 0px; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateX(400px) scale(0.9); -ms-transform: perspective(400px) rotateY(0deg) translateX(400px) scale(0.9); transform: perspective(400px) rotateY(0deg) translateX(400px) scale(0.9); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; visibility: hidden; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__img img{ width: auto; animation: leftRight 4s ease-in-out infinite; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__img{ visibility: visible; opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateX(0px) scale(1); -ms-transform: perspective(400px) rotateY(0deg) translateX(0px) scale(1); transform: perspective(400px) rotateY(0deg) translateX(0px) scale(1); -webkit-transition-delay: 2600ms; -moz-transition-delay: 2600ms; -ms-transition-delay: 2600ms; -o-transition-delay: 2600ms; transition-delay: 2600ms; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-1{ position: absolute; top: 0; right: 0; width: 570px; height: 50%; background-color: var(--primary_color); clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 0%); mix-blend-mode: soft-light; -moz-transform: skew(0deg, 0deg) translateX(100%); -webkit-transform: skew(0deg, 0deg) translateX(100%); -o-transform: skew(0deg, 0deg) translateX(100%); -ms-transform: skew(0deg, 0deg) translateX(100%); transform: skew(0deg, 0deg) translateX(100%); opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; z-index: -1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__shape-1, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__shape-2, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__shape-3, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__shape-4{ opacity: 1; -moz-transform: skew(0deg, 0deg) translate(0); -webkit-transform: skew(0deg, 0deg) translate(0); -o-transform: skew(0deg, 0deg) translate(0); -ms-transform: skew(0deg, 0deg) translate(0); transform: skew(0deg, 0deg) translate(0); -webkit-transition-delay: 2000ms; -moz-transition-delay: 2000ms; -ms-transition-delay: 2000ms; -o-transition-delay: 2000ms; transition-delay: 2000ms; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-2{ position: absolute; top: 0; right: 0; width: 590px; height: 53%; background-color: var(--primary_color); clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 0%); mix-blend-mode: soft-light; -moz-transform: skew(0deg, 0deg) translateX(100%); -webkit-transform: skew(0deg, 0deg) translateX(100%); -o-transform: skew(0deg, 0deg) translateX(100%); -ms-transform: skew(0deg, 0deg) translateX(100%); transform: skew(0deg, 0deg) translateX(100%); opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; z-index: -1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-3{ position: absolute; bottom: 0; right: 0; width: 570px; height: 50%; background-color: var(--primary_color); clip-path: polygon(100% 0, 0 100%, 100% 100%); mix-blend-mode: soft-light; -moz-transform: skew(0deg, 0deg) translateX(100%); -webkit-transform: skew(0deg, 0deg) translateX(100%); -o-transform: skew(0deg, 0deg) translateX(100%); -ms-transform: skew(0deg, 0deg) translateX(100%); transform: skew(0deg, 0deg) translateX(100%); opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; z-index: -1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-4{ position: absolute; bottom: 0; right: 0; width: 590px; height: 53%; background-color: var(--primary_color); clip-path: polygon(100% 0, 0 100%, 100% 100%); mix-blend-mode: soft-light; -moz-transform: skew(0deg, 0deg) translateX(100%); -webkit-transform: skew(0deg, 0deg) translateX(100%); -o-transform: skew(0deg, 0deg) translateX(100%); -ms-transform: skew(0deg, 0deg) translateX(100%); transform: skew(0deg, 0deg) translateX(100%); opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; z-index: -1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-5{ position: absolute; bottom: 45px; left: -85px; -moz-transform: skew(0deg, 0deg) translateX(-100%); -webkit-transform: skew(0deg, 0deg) translateX(-100%); -o-transform: skew(0deg, 0deg) translateX(-100%); -ms-transform: skew(0deg, 0deg) translateX(-100%); transform: skew(0deg, 0deg) translateX(-100%); opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; z-index: -1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-5 img{ width: auto; animation: topBottom 3s ease-in-out infinite; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__shape-5{ opacity: 1; -moz-transform: skew(0deg, 0deg) translate(0); -webkit-transform: skew(0deg, 0deg) translate(0); -o-transform: skew(0deg, 0deg) translate(0); -ms-transform: skew(0deg, 0deg) translate(0); transform: skew(0deg, 0deg) translate(0); -webkit-transition-delay: 3200ms; -moz-transition-delay: 3200ms; -ms-transition-delay: 3200ms; -o-transition-delay: 3200ms; transition-delay: 3200ms; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-6{ position: absolute; bottom: 0; right: 0; -moz-transform: skew(0deg, 0deg) translateX(100%); -webkit-transform: skew(0deg, 0deg) translateX(100%); -o-transform: skew(0deg, 0deg) translateX(100%); -ms-transform: skew(0deg, 0deg) translateX(100%); transform: skew(0deg, 0deg) translateX(100%); opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; z-index: -1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-6 img{ width: auto; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__shape-6{ opacity: 1; -moz-transform: skew(0deg, 0deg) translate(0); -webkit-transform: skew(0deg, 0deg) translate(0); -o-transform: skew(0deg, 0deg) translate(0); -ms-transform: skew(0deg, 0deg) translate(0); transform: skew(0deg, 0deg) translate(0); -webkit-transition-delay: 3000ms; -moz-transition-delay: 3000ms; -ms-transition-delay: 3000ms; -o-transition-delay: 3000ms; transition-delay: 3000ms; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .container{ position: relative; z-index: 30; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__content{ position: relative; display: block; padding-top: 318px; padding-bottom: 180px; z-index: 15; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__sub-title{ position: relative; display: block; font-size: 16px; color: var(--primary_color); font-weight: 600; line-height: 1em; text-transform: uppercase; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateY(-80px); -ms-transform: perspective(400px) rotateY(0deg) translateY(-80px); transform: perspective(400px) rotateY(0deg) translateY(-80px); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__sub-title{ opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px); -ms-transform: perspective(400px) rotateY(0deg) translateY(0px); transform: perspective(400px) rotateY(0deg) translateY(0px); -webkit-transition-delay: 1200ms; -moz-transition-delay: 1200ms; -ms-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__title{ position: relative; font-size: 60px; color: #fff; font-weight: 700; line-height: 1.2em; text-transform: capitalize; margin-top: 24px; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateY(-80px); -ms-transform: perspective(400px) rotateY(0deg) translateY(-80px); transform: perspective(400px) rotateY(0deg) translateY(-80px); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__title span{ color: var(--primary_color); } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__title{ opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px); -ms-transform: perspective(400px) rotateY(0deg) translateY(0px); transform: perspective(400px) rotateY(0deg) translateY(0px); -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; -ms-transition-delay: 900ms; -o-transition-delay: 900ms; transition-delay: 900ms; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__text{ position: relative; display: block; font-size: 18px; color: rgba(255, 255, 255, .70); font-weight: 400; margin-top: 20px; margin-bottom: 44px; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateY(80px); -ms-transform: perspective(400px) rotateY(0deg) translateY(80px); transform: perspective(400px) rotateY(0deg) translateY(80px); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; z-index: 1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__text{ opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px); -ms-transform: perspective(400px) rotateY(0deg) translateY(0px); transform: perspective(400px) rotateY(0deg) translateY(0px); -webkit-transition-delay: 1400ms; -moz-transition-delay: 1400ms; -ms-transition-delay: 1400ms; -o-transition-delay: 1400ms; transition-delay: 1400ms; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__btn-and-review-box{ position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 30px; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateY(80px); -ms-transform: perspective(400px) rotateY(0deg) translateY(80px); transform: perspective(400px) rotateY(0deg) translateY(80px); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider .swiper-slide-active .main-slider__btn-and-review-box{ opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px); -ms-transform: perspective(400px) rotateY(0deg) translateY(0px); transform: perspective(400px) rotateY(0deg) translateY(0px); -webkit-transition-delay: 2000ms; -moz-transition-delay: 2000ms; -ms-transition-delay: 2000ms; -o-transition-delay: 2000ms; transition-delay: 2000ms; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__btn-box{ position: relative; display: block; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__btn-box .thm-btn::before, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__btn-box .thm-btn::after{ background-color: #fff; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__btn-box .thm-btn:hover{ color: var(--primary_color); } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__btn-box .thm-btn:hover>span{ background-color: var(--primary_color); color: #fff; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box{ position: relative; display: flex; align-items: center; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box ul{ position: relative; display: block; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box ul li{ position: relative; display: block; float: left; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box ul li+li{ margin-left: -20px; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box ul li .img-box{ position: relative; display: block; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 2px solid var(--primary_color); } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box ul li .img-box img{ width: 100%; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box .text-box{ position: relative; display: block; margin-left: 10px; flex: 1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box .text-box h2{ color: #fff; font-size: 22px; line-height: 30px; font-weight: 600; text-transform: capitalize; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box .text-box p{ color: #fff; font-size: 16px; line-height: 22px; font-weight: 500; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination{ position: absolute; left: 60px; right: auto; top: 55%; bottom: 0; transform: translateY(-50%); padding: 0; margin: 0; height: 80px; width: auto; z-index: 100; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination::before{ position: absolute; top: -105px; left: 50%; width: 4px; height: 85px; background: rgb(255, 255, 255); background: linear-gradient(0deg, rgba(255, 255, 255, 1) 14%, rgba(255, 255, 255, 0.7595413165266106) 35%, rgba(255, 255, 255, 0.5746673669467788) 57%, rgba(255, 255, 255, 0.19371498599439774) 95%); transform: translateX(-50%); opacity: 0.3; content: ""; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination::after{ position: absolute; bottom: -105px; left: 50%; width: 4px; height: 85px; background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 1) 14%, rgba(255, 255, 255, 0.7595413165266106) 35%, rgba(255, 255, 255, 0.5746673669467788) 57%, rgba(255, 255, 255, 0.19371498599439774) 95%); transform: translateX(-50%); opacity: 0.3; content: ""; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination .swiper-pagination-bullet{ position: relative; display: block; width: 10px; height: 10px; padding: 0; margin: 0; background: rgba(255, 255, 255, 0.4); border-radius: 50%; opacity: 1; transition: all 200ms linear; transition-delay: 0.1s; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: rgba(255, 255, 255, 1); } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination .swiper-pagination-bullet::before{ position: absolute; top: -8px; left: -8px; bottom: -8px; right: -8px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; transform: scaleX(0); transition: all 200ms linear; transition-delay: 0.1s; content: ""; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination .swiper-pagination-bullet:hover{ transform: scaleX(1.0); border: 1px solid rgba(255, 255, 255, 1.0); } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination .swiper-pagination-bullet+.swiper-pagination-bullet{ margin-top: 25px; } /* Button Styles */ section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .thm-btn{ position: relative; display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; -webkit-appearance: none; outline: none !important; background-color: var(--primary_color); color: #fff; font-size: 17px; line-height: 17px; font-weight: 600; padding: 5px 30px 5px; padding-right: 8px; overflow: hidden; border-radius: 30px; transition: all 0.5s linear; text-transform: capitalize; z-index: 1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .thm-btn>span{ position: relative; font-size: 18px; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; background-color: var(--primary_color_font); border-radius: 50%; color: #fff; transition: all 0.5s linear; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .thm-btn:hover>span{ background-color: #fff; color: var(--primary_color); } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .thm-btn::before{ position: absolute; top: 0; left: 0; content: ""; width: 50%; height: 0; visibility: hidden; background-color: var(--primary_color_font); opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .thm-btn:hover:before{ width: 100%; height: 100%; visibility: visible; opacity: 1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .thm-btn::after{ position: absolute; background-color: var(--primary_color_font); bottom: 0; right: 0; content: ""; width: 50%; height: 0; visibility: hidden; opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .thm-btn:hover::after{ width: 100%; height: 100%; visibility: visible; opacity: 1; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .thm-btn:hover{ color: #fff; } /* Clearfix */ section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .clearfix::after{ content: ""; display: table; clear: both; } /* Responsive Styles for Main Slider */ /* Medium Large: 1200px - 1319px */ @media only screen and (min-width: 1200px) and (max-width: 1319px) { section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__img{ right: -190px; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__img img{ width: 80%; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination{ left: auto; right: 60px; } } /* Medium: 992px - 1199px */ @media only screen and (min-width: 992px) and (max-width: 1199px) { section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__img, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-5{ display: none; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination{ left: auto; right: 60px; } } /* Tablet: 768px - 991px */ @media only screen and (min-width: 768px) and (max-width: 991px) { section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__img, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-5{ display: none; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination{ left: auto; right: 25px; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__content{ padding-top: 268px; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-1{ width: 400px; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-2{ width: 420px; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-3{ width: 400px; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-4{ width: 420px; } } /* Mobile: max-width 767px */ @media only screen and (max-width: 767px) { section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-1, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-2, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-3, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-4{ display: none; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__img, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-5, section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-6{ display: none; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper #main-slider-pagination{ display: none; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__title{ font-size: 25px; line-height: 1.5em; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__text br{ display: none; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__content{ padding-top: 188px; padding-bottom: 100px; } } /* Small Mobile: max-width 500px */ @media only screen and (max-width: 500px) { section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__title br{ display: none; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box{ flex-direction: column; align-items: baseline; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__review-box .text-box{ margin-left: 0; margin-top: 15px; } } /* Extra Large: 1320px - 1550px */ @media only screen and (min-width: 1320px) and (max-width: 1550px) { section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__img{ right: -190px; } section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__img img{ width: 80%; } } /* Extra Large: 1200px - 1770px */ @media only screen and (min-width: 1200px) and (max-width: 1770px) { section[data-guid="E2F1328D-6EF4-9C9E-4CE1-48013DA4DD63"] .slider-wrapper .main-slider__shape-5{ display: none; } } /* === ASSET CSS HASH: 8c472de75fe041127a2bf006efaa33143b823774 | SCOPE: section[data-guid="01B5CB63-A0AC-7D54-0601-046528A8FF34"] === */ /* ============================================ Widget Services - Estilos Scoped Todos los estilos están scoped bajo .services-widget ============================================ */ section[data-guid="01B5CB63-A0AC-7D54-0601-046528A8FF34"] .services-widget a{ text-decoration: none; } section[data-guid="01B5CB63-A0AC-7D54-0601-046528A8FF34"] .services-widget{ background-color: #fafafa; } section[data-guid="01B5CB63-A0AC-7D54-0601-046528A8FF34"] .services-widget{ /* ============================================ Estilos base de tipografía ============================================ */ font-size: 16px; line-height: 1.7; font-family: var(--primary_font); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Section wrapper - padding consistente (contenido central) */ > .tmp-service-area { padding-top: 100px !important; padding-bottom: 100px !important; } @media only screen and (min-width: 768px) and (max-width: 991px) { > .tmp-service-area { padding-top: 80px !important; padding-bottom: 80px !important; } } @media only screen and (max-width: 767px) { > .tmp-service-area { padding-top: 60px !important; padding-bottom: 60px !important; } } /* ============================================ Estilos de Sección (tmp-section-gap) ============================================ */ .tmp-section-gap { padding: 120px 0 !important; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tmp-section-gap { padding: 80px 0 !important; } } @media only screen and (max-width: 767px) { .tmp-section-gap { padding: 60px 0 !important; } } /* ============================================ Estilos de Título de Sección (tmp-section-title-border) ============================================ */ .tmp-section-title-border .subtitle { display: flex; color: var(--primary_color); font-size: 13px; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; align-items: center; padding: 0 15px; } @media only screen and (max-width: 767px) { .tmp-section-title-border .subtitle { flex-wrap: wrap; justify-content: center; } } .tmp-section-title-border .subtitle .subtitle-text { color: var(--secondary_color_font); font-weight: 700; width: max-content; } .tmp-section-title-border .subtitle .number { color: var(--primary_color); transition: 0.5s; opacity: 0.6; display: none; } .tmp-section-title-border .title { margin-top: 20px; color: #1b1b1c; font-family: var(--primary_font); word-break: break-word; line-height: 1.4074; margin: 20px 0 20px; } .tmp-section-title-border .title h2, .tmp-section-title-border h2.title { font-size: 48px; line-height: 1.2; font-weight: 700; margin: 20px 0 20px; } /* Ocultar inicialmente los títulos con animación tmp-title-split */ .tmp-section-title-border .title.tmp-title-split, .tmp-section-title-border h2.tmp-title-split, .tmp-section-title-border h1.tmp-title-split { opacity: 0; } @media only screen and (max-width: 991px) { .tmp-section-title-border .title h2, .tmp-section-title-border h2.title { font-size: 36px; } } @media only screen and (max-width: 767px) { .tmp-section-title-border .title h2, .tmp-section-title-border h2.title { font-size: 28px; } } /* ============================================ Estilos de Line Separator (pres-line-separator-wrapper) ============================================ */ .line-separator { position: relative; background-image: linear-gradient(90deg, var(--primary_color), rgba(33, 38, 45, 0)); width: 50px; height: 1px; left: 0%; top: 0%; right: 0%; bottom: auto; } .pres-line-separator-wrapper { display: flex; position: relative; align-items: center; margin: 0 -15px; justify-content: center; } @media only screen and (max-width: 767px) { .pres-line-separator-wrapper { flex-wrap: wrap; justify-content: center; } .pres-line-separator-wrapper .line-separator { display: none; } } .pres-line-separator-wrapper.text-center .line-separator.line-left { background-image: linear-gradient(-90deg, var(--primary_color), rgba(33, 38, 45, 0)); } .pres-line-separator-wrapper.text-center .line-separator.line-right { background-image: linear-gradient(90deg, var(--primary_color), rgba(33, 38, 45, 0)); } /* ============================================ Estilos de Servicios (service__style--1) ============================================ */ .service.service__style--1 { padding: 30px 26px; transition: transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1), box-shadow 0.65s cubic-bezier(0.05, 0.2, 0.1, 1); position: relative; z-index: 2; height: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1599px) { .service.service__style--1 { padding: 30px 28px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service.service__style--1 { padding: 30px 25px; } } @media only screen and (max-width: 767px) { .service.service__style--1 { padding: 30px 14px; } } .service.service__style--1 .shape-service-1 { position: absolute; right: 15px; top: 15px; z-index: 1; max-width: 150px; margin: auto; opacity: 0; display: none; } .service.service__style--1:hover .shape-service-1 { display: block; opacity: 0.3; } .service.service__style--1:hover .shape-service-1 img { animation: moveOut 0.4s linear; } .service.service__style--1 .icon { font-size: 45px; font-weight: 400; margin-bottom: 23px; color: var(--primary_color); text-align: center; border-radius: 100%; display: flex; justify-content: center; transition: 0.3s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service.service__style--1 .icon { margin-bottom: 11px; } } .service.service__style--1 .icon i { stroke-width: 1 !important; font-size: 60px; } .service.service__style--1 .icon svg { stroke-width: 2px !important; width: 45px; height: 45px; } .service.service__style--1 .icon img { max-height: 60px; } .service.service__style--1 .content .title { margin-bottom: 19px; transition: 0.3s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service.service__style--1 .content .title { margin-bottom: 8px; } } .service.service__style--1 .content .title { color: #1b1b1c; font-family: var(--primary_font); word-break: break-word; line-height: 1.4074; margin: 0 0 19px; } .service.service__style--1 .content .title h4, .service.service__style--1 .content h4.title { font-size: 24px; line-height: 1.25; font-weight: 600; } @media only screen and (max-width: 991px) { .service.service__style--1 .content .title h4, .service.service__style--1 .content h4.title { font-size: 20px; } } @media only screen and (max-width: 767px) { .service.service__style--1 .content .title h4, .service.service__style--1 .content h4.title { font-size: 20px; } } .service.service__style--1 .content .title a { color: inherit; transition: 0.3s; } .service.service__style--1 .content .title a:hover { color: var(--primary_color); } .service.service__style--1 .content .description { color: #363636; margin-bottom: 0; transition: 0.3s; font-size: 16px; line-height: 1.7; font-weight: 400; } .service.service__style--1 .content .discover-btn { text-align: center; display: flex; justify-content: center; } .service.service__style--1:hover { transform: translateY(-5px); } .service.service__style--1.tmp-border-none { border: none; } .service.service__style--1.tmp-border { border: 2px solid rgba(157, 157, 255, 0.05); } @media only screen and (min-width: 1200px) and (max-width: 1599px) { .service.service__style--1.text-left, .service.service__style--1.text-start { padding: 40px 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service.service__style--1.text-left, .service.service__style--1.text-start { padding: 40px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service.service__style--1.text-left, .service.service__style--1.text-start { padding: 40px 30px; } } @media only screen and (max-width: 767px) { .service.service__style--1.text-left, .service.service__style--1.text-start { padding: 30px 20px; } } .service.service__style--1.text-left .icon, .service.service__style--1.text-start .icon { justify-content: left; } .service.service__style--1.text-left .content .discover-btn, .service.service__style--1.text-start .content .discover-btn { justify-content: flex-start; } /* Cards con fondo oscuro (bg-color-card) */ .service.service__style--1.bg-color-card { border-radius: var(--general_border_radius); } .service.service__style--1.bg-color-card .content .title, .service.service__style--1.bg-color-card .content .title a { color: var(--primary_color_font); } .service.service__style--1.bg-color-card .content .title a:hover { color: var(--primary_color); } .service.service__style--1.bg-color-card .content .description { color: var(--secondary_color_font); } /* ============================================ Estilos tmponhover (efecto flashlight) ============================================ */ .tmponhover { position: relative; overflow: hidden; } .tmponhover::before { content: ""; position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); background: radial-gradient(var(--primary_color), transparent, transparent); width: 200%; height: 200%; opacity: 0; transition: 0.5s, top 0s, left 0s; border-radius: var(--general_border_radius); z-index: 1; } .tmponhover:hover::before { opacity: 1; } .tmponhover::after { content: ""; position: absolute; inset: 2px; background: #ffffff; border-radius: var(--general_border_radius); z-index: 1; } .tmponhover > * { z-index: 2; position: relative; } /* ============================================ Estilos de Botones (.tmp-btn) ============================================ */ .tmp-btn, .btn-default { padding: 0 28px; border-radius: 5px; background: var(--primary_color); transition-duration: 300ms; color: #ffffff; font-family: var(--primary_font); font-size: 16px; font-weight: 400; text-align: center; text-decoration: none; display: flex; height: 50px; line-height: 49px; letter-spacing: 0.5px; width: max-content; transition: all 0.6s; border: 0 none; position: relative; z-index: 1; overflow: hidden; align-items: center; justify-content: center; cursor: pointer; } @media only screen and (max-width: 767px) { .tmp-btn, .btn-default { padding: 0 16px; height: 42px; line-height: 42px; } } .tmp-btn::after, .btn-default::after { position: absolute; content: ""; width: 200%; height: 200%; left: 50%; top: 110%; background: var(--primary_color); transform: translateX(-50%); transition: all 0.6s; transition-duration: 800ms; opacity: 0.5; border-radius: 50%; z-index: -1; } .tmp-btn:hover, .btn-default:hover { background-color: transparent; color: #ffffff; transform: translate3d(0, -2px, 0); box-shadow: 0 0 20px 5px rgba(82, 55, 249, 0.33); } .tmp-btn:hover::after, .btn-default:hover::after { opacity: 1; top: -30%; } .tmp-btn i, .btn-default i { padding-left: 6px; display: inline-block; top: 2px; position: relative; font-size: 17px; } .tmp-btn i.image-icon, .btn-default i.image-icon { top: inherit; transition: 0.4s; } .tmp-btn .btn-icon { display: inline-flex; align-items: center; justify-content: center; } .tmp-btn .btn-icon i { padding-left: 6px; padding-right: 0; top: 0; font-size: 17px; display: inline-block; } .tmp-btn.btn-small, .btn-default.btn-small { height: 44px; line-height: 40px; padding: 0 20px; font-size: 14px; font-weight: 500; } .tmp-btn.btn-border, .btn-default.btn-border { background: transparent; border-color: #e3e3e3; border-width: 2px; border-style: solid; color: #1b1b1b; } .tmp-btn.btn-border.btn-small, .btn-default.btn-border.btn-small { line-height: 36px; } .tmp-btn.btn-border:hover, .btn-default.btn-border:hover { background-color: var(--primary_color); border-color: var(--primary_color) !important; color: #ffffff; } .tmp-btn.round, .btn-default.round { border-radius: var(--general_border_radius); } .tmp-btn:focus, .btn-default:focus { box-shadow: none; border: none; background-color: unset; background: var(--primary_color); } /* Botón hover-icon-reverse */ .tmp-btn.hover-icon-reverse .icon-reverse-wrapper, .btn-default.hover-icon-reverse .icon-reverse-wrapper { display: flex; align-items: center; justify-content: center; } .tmp-btn.hover-icon-reverse .btn-text, .btn-default.hover-icon-reverse .btn-text { display: inline-block; transition: transform 0.6s 0.125s cubic-bezier(0.1, 0.75, 0.25, 1); margin-inline-start: -23px; } .tmp-btn.hover-icon-reverse .btn-icon, .btn-default.hover-icon-reverse .btn-icon { transition: opacity 0.4s 0.25s, transform 0.6s 0.25s; transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1); } .tmp-btn.hover-icon-reverse .btn-icon + .btn-icon, .btn-default.hover-icon-reverse .btn-icon + .btn-icon { margin-inline-end: 0; margin-inline-start: 0; display: inline-block; opacity: 0; transform: translateX(-10px); transition-delay: 0s; order: -2; line-height: 1; } .tmp-btn.hover-icon-reverse .btn-icon + .btn-icon i, .btn-default.hover-icon-reverse .btn-icon + .btn-icon i { padding-left: 0; padding-right: 6px; } .tmp-btn:hover.hover-icon-reverse .btn-text, .btn-default:hover.hover-icon-reverse .btn-text { transition-delay: 0.1s; transform: translateX(23px); } .tmp-btn:hover.hover-icon-reverse .btn-icon, .btn-default:hover.hover-icon-reverse .btn-icon { opacity: 0; transition-delay: 0s; transform: translateX(10px); } .tmp-btn:hover.hover-icon-reverse .btn-icon + .btn-icon, .btn-default:hover.hover-icon-reverse .btn-icon + .btn-icon { opacity: 1; transform: translateX(0); transition-delay: 0.225s; line-height: 1; } /* ============================================ Utilidades ============================================ */ .radius { border-radius: var(--general_border_radius); } .text-center { text-align: center; } .text-start { text-align: left; } .w-600 { font-weight: 600 !important; } .w-700 { font-weight: 700 !important; } .mb--0 { margin-bottom: 0 !important; } .mb--10 { margin-bottom: 10px !important; } .mt--10 { margin-top: 10px !important; } .mt--30 { margin-top: 30px !important; } } /* ============================================ Keyframes (fuera del scope para que funcionen) ============================================ */ @keyframes moveOut { 0% { -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } 100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } /* === ASSET CSS HASH: 8fbac0537b02310da9d51503aec7113d81280775 | SCOPE: section[data-guid="444324A7-FCA6-68B0-C0E4-42B0B00D1C89"] === */ /* ============================================ Widget About Services - Estilos Scoped Todos los estilos están scoped bajo .about-services-widget ============================================ */ section[data-guid="444324A7-FCA6-68B0-C0E4-42B0B00D1C89"] .about-services-widget{ /* ============================================ Estilos base de tipografía ============================================ */ font-size: 16px; line-height: 1.7; font-family: var(--primary_font); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; a { text-decoration: none; transition: 0.3s; } img { max-width: 100%; height: auto; vertical-align: middle; } /* Section wrapper - padding consistente (contenido central) */ > .tmp-about-area { padding-top: 100px !important; padding-bottom: 100px !important; } @media only screen and (min-width: 768px) and (max-width: 991px) { > .tmp-about-area { padding-top: 80px !important; padding-bottom: 80px !important; } } @media only screen and (max-width: 767px) { > .tmp-about-area { padding-top: 60px !important; padding-bottom: 60px !important; } } /* ============================================ Section Gap Bottom ============================================ */ .tmp-section-gapBottom { padding-bottom: 120px !important; @media only screen and (min-width: 768px) and (max-width: 991px) { padding-bottom: 80px !important; } @media only screen and (max-width: 767px) { padding-bottom: 60px !important; } } /* ============================================ Video Popup ============================================ */ .video-popup { position: relative; display: block; &.about-relative-thumb { position: relative; } .thumbnail { img { width: 100%; } &.invers-anime { position: relative; overflow: hidden; &::after { content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%) rotate(45deg); z-index: 1; pointer-events: none; } &:hover::after { height: 250%; transition: all 600ms linear; background-color: transparent; } } } .video-icon { position: absolute; content: ""; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 10px; transition: 0.4s; } &.icon-center { .video-icon { left: 50%; top: 50%; transform: translate(-50%, -50%); } } } .overlay-content { position: relative; } /* ============================================ Absolute Rating Area ============================================ */ .absolute-rating-area { position: absolute; padding: 20px 32px; background: #fefefe; border-radius: 6px; bottom: 9%; text-align: left; display: flex; flex-direction: column; justify-content: flex-start; img { margin-bottom: 15px; } .stars-area { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; img { max-width: 20px; margin-bottom: 0; } } p { font-size: 18px; color: var(--primary_color_font); font-weight: 500; margin-bottom: 0; } } /* ============================================ Profile Share mb-0 utility ============================================ */ .profile-share.mb-0 { margin-bottom: 0; } .about-relative-thumb .absolute-rating-area { position: absolute; left: -10%; padding: 20px 32px; background: #fefefe; border-radius: 6px; bottom: 9%; text-align: left; display: flex; flex-direction: column; justify-content: flex-start; right: auto !important; border: 1px solid rgba(157, 157, 255, 0.05); @media only screen and (min-width: 1200px) and (max-width: 1599px) { left: 7%; } @media only screen and (max-width: 1199px) { left: 15%; } @media only screen and (max-width: 991px) { left: 50%; } @media only screen and (max-width: 767px) { left: 15%; } @media only screen and (max-width: 575px) { padding: 5px 16px; bottom: 10px; } img { margin-bottom: 15px; } .profile-share a img { max-width: 45px; } .stars-area { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; img { max-width: 20px; margin-bottom: 0; } } p { font-size: 18px; color: var(--primary_color_font); font-weight: 500; margin-bottom: 0; } &::after { position: absolute; top: -5%; right: -6%; content: ""; height: 100%; width: 100%; border-radius: 6px; z-index: -1; background: #1b1b1c; } &::before { position: absolute; bottom: -5%; left: -6%; content: ""; height: 100%; width: 100%; border-radius: 6px; z-index: -1; background: #1b1b1c; } } /* ============================================ Images Left Right Float ============================================ */ .images-left-right-float { right: -110px !important; @media only screen and (max-width: 575px) { right: -223px !important; } } /* ============================================ Profile Share ============================================ */ .profile-share { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 15px; &.justify-content-start { justify-content: flex-start; } a { position: relative; z-index: 1; transition: 0.3s; &:nth-child(2) { margin-left: -12px; } &:nth-child(3) { margin-left: -12px; } img { max-width: 60px; border-radius: 50%; border: 3px solid rgba(157, 157, 255, 0.05); transition: 0.3s; } } } .about-relative-thumb .absolute-rating-area .profile-share a img { max-width: 45px; } /* ============================================ Avatar Tooltip (estilos completos de tooltip.scss) ============================================ */ .profile-share { a { &:hover { z-index: 2; transform: translateY(-3px) scale(1.1); } } } .avatar { position: relative; &::after, &::before { --scale: 0; --arrow-size: 8px; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale)); transition: 150ms transform; transform-origin: bottom center; } &::before { --translate-y: calc(-100% - var(--arrow-size)); content: attr(data-tooltip); color: #fff; padding: 5px 8px; background: var(--primary_color); width: max-content; border-radius: 5px; text-align: center; font-size: 12px; margin: 1px; } &::after { --translate-y: calc(-1 * var(--arrow-size)); content: ''; border: var(--arrow-size) solid transparent; border-top-color: var(--primary_color); } &:hover { &::before, &::after { --scale: 1; } } } /* ============================================ Section Title Border ============================================ */ .tmp-section-title-border { .subtitle { display: flex; color: var(--secondary_color_font); font-size: 13px; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; align-items: center; padding: 0 15px; @media only screen and (max-width: 767px) { flex-wrap: wrap; justify-content: center; } .subtitle-text { color: var(--secondary_color_font); font-weight: 700; width: max-content; } .number { color: var(--secondary_color_font); transition: 0.5s; opacity: 0.6; display: none; } } } /* ============================================ Pres Line Separator Wrapper ============================================ */ .pres-line-separator-wrapper { display: flex; position: relative; align-items: center; margin: 0 -15px; justify-content: center; @media only screen and (max-width: 767px) { flex-wrap: wrap; justify-content: center; } &.text-start { justify-content: flex-start !important; } .line-separator { position: relative; background-image: linear-gradient(90deg, var(--primary_color), rgba(33, 38, 45, 0)); width: 50px; height: 1px; @media only screen and (max-width: 767px) { display: none; } } } /* ============================================ About Style 4 ============================================ */ .about-style-4 { .title { font-weight: 400; margin-bottom: 35px; color: var(--primary_color_font); font-family: var(--primary_font); @media only screen and (min-width: 1200px) and (max-width: 1599px) { font-size: 26px; } @media only screen and (max-width: 1199px) { font-size: 26px; } @media only screen and (max-width: 991px) { margin-bottom: 15px; } @media only screen and (max-width: 575px) { font-size: 26px; margin-bottom: 15px; } @media only screen and (max-width: 479px) { font-size: 26px; } strong { color: var(--primary_color); } } .feature-list { padding: 0; list-style: none; @media only screen and (max-width: 1199px) { margin-bottom: 15px; } li { display: flex; .icon { background: var(--primary_color); width: 30px; height: 30px; border-radius: 100%; color: #fff; text-align: center; min-width: 30px; i { display: flex; justify-content: center; align-items: center; height: 100%; } } .title-wrapper { margin-left: 13px; .title { font-size: 18px; margin: 0; color: var(--primary_color_font); font-family: var(--primary_font); } .text { font-size: 16px; margin-bottom: 20px; max-width: 80%; margin-top: 13px; color: var(--secondary_color_font); @media only screen and (max-width: 1199px) { max-width: 100%; } @media only screen and (max-width: 575px) { max-width: 100%; } } } } } } /* ============================================ Tmp Button ============================================ */ .tmp-btn { padding: 0 28px; border-radius: 5px; background: var(--primary_color); transition-duration: 300ms; color: #fff; font-size: 16px; font-weight: 400; text-align: center; text-decoration: none; display: flex; height: 50px; line-height: 49px; letter-spacing: 0.5px; width: max-content; transition: 0.4s; border: 0 none; position: relative; z-index: 1; overflow: hidden; align-items: center; justify-content: center; font-family: var(--primary_font); @media only screen and (max-width: 767px) { padding: 0 16px; height: 42px; line-height: 42px; } &.btn-large { height: 60px; line-height: 59px; padding: 0 37px; font-size: 17px; @media only screen and (max-width: 767px) { padding: 0 18px; font-size: 14px; } } &.round { border-radius: var(--general_border_radius); } &.btn-border { background: transparent; border-color: rgba(157, 157, 255, 0.05); border-width: 2px; border-style: solid; color: var(--primary_color_font); &:hover { background-color: var(--primary_color); border-color: var(--primary_color) !important; color: #fff; } } &.rounded-player { border-radius: 100%; width: 100px; height: 100px; padding: 0; line-height: 100px; display: inline-block; position: relative; @media only screen and (max-width: 767px) { width: 70px; height: 70px; line-height: 70px; } span { display: inline-block; i { display: inline-block; position: absolute; left: 50%; top: 50% !important; transform: translate(-50%, -50%); font-size: 30px; padding-left: 0; } } &:focus { outline: none; color: #fff; } &:hover { transform: scale(1.1); background: var(--primary_color); } } &:hover { background-color: var(--secondary_color); color: #fff; transform: translate3d(0, -2px, 0); } } /* ============================================ Radius Small ============================================ */ .radius-small { border-radius: var(--general_border_radius); } /* ============================================ Font Weight 700 ============================================ */ .w-700 { font-weight: 700 !important; } /* ============================================ Tmp Title Split (inicialmente oculto) ============================================ */ .tmp-title-split { opacity: 0; visibility: hidden; } .tmp-title-split-p { opacity: 0; visibility: hidden; } /* ============================================ Margin Utilities ============================================ */ .mb--10 { margin-bottom: 10px; } .mb--30 { margin-bottom: 30px; } .mt--40 { margin-top: 40px; } .text-start { text-align: left; } .read-more-btn { margin-top: 40px; } } /* Keyframes DEBEN estar fuera del scope */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* === ASSET CSS HASH: e8c740550b719879c8f5005e3b4a6f30b9189d00 | SCOPE: section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] === */ /* Video One Widget Styles - Scoped under .video-wrapper */ section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper{ overflow: hidden; } @keyframes ripple { 70% { box-shadow: 0 0 0 40px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes swing-x { 0% { transform: rotate(25deg); } 100% { transform: rotate(0deg); } } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper a{ text-decoration: none; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one{ position: relative; display: block; overflow: hidden; background-color: var(--primary_color); z-index: 1; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__inner{ position: relative; display: block; text-align: center; padding: 120px 0 120px; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__bg{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .30; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__video-link{ position: relative; display: block; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__video-icon{ position: relative; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; line-height: 70px; text-align: center; font-size: 20px; color: var(--primary_color); background-color: rgba(255, 255, 255, 1); border-radius: 50%; transition: all 0.5s ease; margin: 0 auto; z-index: 1; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__video-icon:hover{ background-color: var(--primary_color); color: rgba(255, 255, 255, 1); } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__video-icon:before{ content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 5px solid rgba(255, 255, 255, 0.30); border-radius: 50%; z-index: -1; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__video-link .ripple, section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__video-icon .ripple:before, section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__video-icon .ripple:after{ position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); animation: ripple 3s infinite; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__video-icon .ripple:before{ animation-delay: 0.9s; content: ""; position: absolute; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__video-icon .ripple:after{ animation-delay: 0.6s; content: ""; position: absolute; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__title{ font-size: 40px; color: rgba(255, 255, 255, 1); line-height: 1.25em; font-weight: 700; text-transform: capitalize; margin: 40px 0 25px; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__btn-box{ position: relative; display: inline-block; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__btn-box .thm-btn{ position: relative; display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; outline: none !important; background-color: var(--primary_color); color: rgba(255, 255, 255, 1); font-size: 17px; line-height: 17px; font-weight: 600; padding: 5px 30px 5px; padding-right: 8px; overflow: hidden; border-radius: 30px; transition: all 0.5s linear; text-transform: capitalize; z-index: 1; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__btn-box .thm-btn>span{ position: relative; font-size: 18px; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; background-color: var(--primary_color_font); border-radius: 50%; color: rgba(255, 255, 255, 1); transition: all 0.5s linear; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__btn-box .thm-btn:hover>span{ background-color: rgba(255, 255, 255, 1); color: var(--primary_color); } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__btn-box .thm-btn::before{ position: absolute; top: 0; left: 0; content: ""; width: 50%; height: 0; visibility: hidden; background-color: rgba(255, 255, 255, 1); opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__btn-box .thm-btn:hover:before{ width: 100%; height: 100%; visibility: visible; opacity: 1; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__btn-box .thm-btn::after{ position: absolute; background-color: rgba(255, 255, 255, 1); bottom: 0; right: 0; content: ""; width: 50%; height: 0; visibility: hidden; opacity: 0; z-index: -1; transition: all 0.4s ease-in-out; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__btn-box .thm-btn:hover::after{ width: 100%; height: 100%; visibility: visible; opacity: 1; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__btn-box .thm-btn:hover{ color: var(--primary_color); } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__shape-1{ position: absolute; right: -90px; bottom: -50px; animation: swing-x 1s ease-in-out 1s forwards infinite alternate; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__shape-1 img{ width: auto; } /* Responsive Styles */ @media only screen and (max-width: 767px) { section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__title br{ display: none; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__title{ font-size: 35px; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__shape-1{ display: none; } section[data-guid="487CD3AC-7222-1A2F-3A98-9D338AFBF5DC"] .video-wrapper .video-one__inner{ padding: 80px 0 80px; } } /* === ASSET CSS HASH: 6cb0c03670bd215a437099373043a14c223a5b78 | SCOPE: section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] === */ /* Counter One Widget Styles - Scoped under .counter-wrapper */ section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper{ font-family: var(--primary_font); overflow: hidden; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper a{ text-decoration: none; } /* Counter One Base Styles */ section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one{ position: relative; display: block; padding: 120px 0 90px; background: linear-gradient(0deg, rgba(131, 58, 180, 0) 0%, rgba(217, 2, 2, 0.07) 50%, rgba(252, 176, 69, 0) 100%); z-index: 1; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__single{ position: relative; display: block; text-align: center; margin-bottom: 30px; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__icon{ position: relative; display: flex; align-items: center; justify-content: center; height: 80px; width: 80px; margin: 0 auto; background-color: var(--primary_color); border-radius: 50%; transition: all 500ms ease; z-index: 5; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__single:hover .counter-one__icon{ background-color: var(--primary_color_font); } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__icon:before{ content: ""; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; background-color: rgba(217, 2, 2, 0.30); border-radius: 50%; transition: all 500ms ease; z-index: -1; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__single:hover .counter-one__icon:before{ background-color: rgba(17, 17, 17, 0.30); } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__icon span{ position: relative; display: inline-block; font-size: 48px; color: #ffffff; transition: all 500ms linear; transition-delay: 0.1s; transform: scale(1); } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__single:hover .counter-one__icon span{ transform: scale(0.9); color: #ffffff; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__content{ position: relative; display: block; background-color: #ffffff; padding: 68px 30px 36px; border-radius: var(--general_border_radius); box-shadow: 0px 0px 60px 0px rgba(4, 23, 26, 0.10); margin-top: -40px; z-index: 1; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__content::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--primary_color); border-radius: 15px; transform: scaleX(0.7) rotateX(20deg); opacity: 0; transition: all 0.4s linear; z-index: -1; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__single:hover .counter-one__content::before{ transform: scaleX(1.0) rotateX(0deg); transition: all 0.4s linear; opacity: 1; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__count{ position: relative; display: flex; align-items: center; justify-content: center; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__count h3{ font-size: 60px; font-weight: 700; line-height: 60px !important; color: var(--primary_color); font-family: var(--primary_font) !important; transition: all 500ms ease; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__single:hover .counter-one__count h3{ color: #ffffff; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__count span{ font-size: 60px; font-weight: 700; line-height: 60px; color: var(--primary_color); transition: all 500ms ease; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__single:hover .counter-one__count span{ color: #ffffff; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__count-text{ font-size: 18px; color: var(--primary_color_font); font-weight: 600; line-height: 28px; margin-top: 3px; transition: all 500ms ease; } section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one__single:hover .counter-one__count-text{ color: #ffffff; } /* Responsive Styles */ @media only screen and (max-width: 767px) { section[data-guid="7B953FBF-FD26-67A7-3F02-F3EAB67013C8"] .counter-wrapper .counter-one{ padding: 80px 0 50px; } }