@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url(https://fonts.cdnfonts.com/css/eremitage);
:root{
--fs-title: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
--fs-16-18: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
--fs-14-20: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
--fs-16-20: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
--fs-18-20: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
--rounded-8-16: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
--rounded-8-12: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
--ff-1: "Roboto", sans-serif;
--ff-2: "Eremitage", sans-serif;
--ff-awesome: "Font Awesome 6 Pro";
--bg-grd-x: linear-gradient(185deg,rgba(205, 167, 120, 1) 0%,rgba(239, 234, 206, 1) 49%,rgba(187, 147, 97, 1) 100%);
--bg-grd-y: linear-gradient(90deg,rgba(205, 167, 120, 1) 0%,rgba(239, 234, 206, 1) 49%,rgba(187, 147, 97, 1) 100%);
--bg-grd-dark: radial-gradient(circle, #4c4c4c 0%, #1e1e1e 100%);
}
body{
font-family: var(--ff-1);
line-height: normal;
}
p{
margin-bottom: 1rem;
}
p:last-of-type{
margin-bottom: 0;
}
.row-inner-full > .col > .col-inner,
.row-inner-full.row-slider .col > .col-inner{
height: 100%;
}
.row-slider .flickity-slider > .col{
padding-bottom: 0 !important;
}
.button{
min-height: unset;
padding: 0.625rem 1rem;
line-height: normal;
font-size: 1rem;
font-weight: 600;
}
.button span{
line-height: normal;
}
.button.is-outline{
border-width: 1px;
line-height: normal;
}
.button.is-large{
font-size: 1.125rem;
}
.button.white{
color: var(--fs-color-primary) !important;
}
i.icon-angle-right:before{
content: "\f061";
font-family: var(--ff-awesome);
}
i.icon-envelop:before{
content: "\f0e0";
font-family: var(--ff-awesome);
}
.img-cover{
width: 100%;
height: 100%;
object-fit: cover;
}
.img-contain{
width: 100%;
height: 100%;
object-fit: contain;
}
.rounded-main > .img-inner,
.rounded-main > .col-inner{
border-radius: 5px;
overflow: hidden;
}
.border-x-1 > .col-inner{
border: 1px solid var(--fs-color-primary);
}
.section-bg-linear .section-bg:before,
.section-bg-linear .section-bg:after{
content: "";
position: absolute;
left: 0;
right: 0;
z-index: 1;
height: 50%;
pointer-events: none;
}
.section-bg-linear .section-bg:before{
top: 0;
background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 50%);
}
.section-bg-linear .section-bg:after{
bottom: 0;
background: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 50%);
}
.svg-clip-path {
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
}
.justify-content-between{
justify-content: space-between;
}
.align-self-center{
align-self: center;
}
.wpcf7-form{
margin-bottom: 0;
}
.wpcf7 .wpcf7-spinner{
display: none;
}
.wpcf7 .wpcf7-not-valid-tip{
position: absolute;
margin-top: 0;
font-size: 0.75rem;
z-index: 1;
}
.social-icons a{
width: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
height: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
min-width: unset !important;
min-height: unset;
display: inline-flex !important;
justify-content: center;
align-items: center;
margin: 0;
border: 1px solid #3A3A3C !important;
border-radius: 50%;
padding: 0 !important;
line-height: normal;
font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem) !important;
color: #3A3A3C;
}
.social-icons a i{
top: unset;
}
.social-icons a.is-outline{ } .header-top .nav li.html{
font-weight: 700;
font-size: var(--fs-16-18);
}
.header-main{
transition: all .3s ease;
}
.header-main .header-nav-main{
justify-content: center;
}
.header-search-form-wrapper{
border: 1px solid #ccc;
border-radius: 0.5rem;
}
.header-search-form-wrapper select.search_categories{
width: 120px !important;
box-shadow: none;
border: none;
border-right: 1px solid #ccc;
}
.header-search-form-wrapper input.search-field{
border: 0;
box-shadow: none !important;
}
.header-search-form-wrapper button.submit-button{
width: 3.5rem;
height: 2.75rem;
background-color: var(--fs-color-primary) !important;
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
outline: 1px solid var(--fs-color-primary);
}
.icon-hotline-header{
display: flex;
align-items: center;
}
.icon-hotline-header h3{
margin-bottom: 0;
}
.icon-hotline-header img{
padding-top: 0;
}
.header-bottom .container:after{
content: unset;
}
.header-bottom .container .flex-center{
flex: 1;
}
.header-bottom .container .flex-right{
flex: unset !important;
}
.header-nav.header-bottom-nav{
justify-content: space-between;
}
.header-nav.header-bottom-nav .menu-item a{
font-weight: 700;
text-transform: uppercase;
font-size: 1rem;
}
.header-nav.header-bottom-nav .menu-item.active a{
}
.header-nav.header-bottom-nav .menu-item.current-menu-item a{
}
.header-bottom .flex-row .flex-left{
flex-basis: 20%;
max-width: 20%;
margin-right: unset;
padding-right: 15px;
}
.header-bottom .header-nav.header-bottom-nav.nav-left .header-vertical-menu{
width: 100%;
}
.header-vertical-menu__opener,
.header-vertical-menu__fly-out{
width: 100%;
}
.header-vertical-menu__fly-out .nav-vertical-fly-out>li.menu-item>a{
font-weight: 500;
color: #000;
}
.col-left-slide{
flex-basis: 20%;
max-width: 20%;
}
.col-right-slide{
flex: 1;
}
#logo img{
transition: all .3s ease;
} .banner-page{
height: clamp(10rem, 8rem + 10vw, 20rem);
background-color: transparent;
}
.banner-page .title-banner-page{
margin: 0;
font-size: clamp(1.75rem, 1.5rem + 1.25vw, 3rem);
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.rank-math-breadcrumb p{
margin-top: 0.25rem;
font-weight: 500;
font-size: clamp(0.75rem, 0.675rem + 0.375vw, 1.125rem);
}
.rank-math-breadcrumb a{
color: #fff;
} input.form-control,
textarea.form-control{
padding: 0.75rem 1rem;
height: unset;
background-color: #fff;
box-shadow: none;
border-radius: 0.375rem;
transition: all .3s ease;
font-size: inherit;
}
textarea.form-control{
height: 5rem;
}
.main-title h2{
margin-bottom: 0;
font-size: var(--fs-title);
}
.text-main h3{
font-size: 1.25rem;
font-weight: 700;
}
.text-main h2{
margin-bottom: 0;
font-weight: 700;
font-size: var(--fs-title);
line-height: normal;
}
.text-main h2 + *{
margin-top: 1rem;
}
.text-main p:last-of-type{
margin-bottom: 0;
} .fl-custom-filter-project form{
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 0;
padding: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
border-radius: 5px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
}
.fl-custom-filter-project .wrapper-center{
flex: 1;
}
.fl-custom-filter-project .wrapper-start .form-search{
display: flex;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 5px;
height: clamp(2.25rem, 2.2rem + 0.25vw, 2.5rem);
}
.fl-custom-filter-project .wrapper-start .form-search input{
border: 0;
margin: 0;
background-color: transparent;
height: 100%;
}
.fl-custom-filter-project .wrapper-start .form-search .button{
width: 2.5rem;
min-width: unset;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
box-shadow: none;
border: 0;
border-left: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 0 !important;
background-color: transparent;
color: rgba(0, 0, 0, 0.5);
}
.fl-custom-filter-project .wrapper-start .form-search .button i{
margin: 0;
}
.fl-custom-filter-project .wrapper-center{
display: flex;
gap: 1rem;
}
.fl-custom-filter-project .wrapper-center select{
height: clamp(2.25rem, 2.2rem + 0.25vw, 2.5rem);
margin: 0;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 5px;
font-size: inherit;
}
.fl-custom-filter-project .wrapper-end .button{
margin: 0;
}
.box-project{
height: 100%;
background-color: #fff;
border-radius: 5px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.box-project .box-image .image-cover{
padding-top: 70%;
}
.box-project .box-category{
position: absolute;
top: 1rem;
left: 1rem;
background-color: var(--fs-color-primary);
padding: 0.5rem 1rem;
border-radius: 5px;
color: #fff;
font-weight: 700;
}
.box-project .box-text{
padding: 0.75rem;
font-size: inherit;
}
.box-project .box-text .title{
margin-bottom: 0.5rem;
font-size: var(--fs-16-18);
color: var(--fs-color-primary);
}
.box-project .box-text .title a{
color: inherit;
}
.box-project .box-text .box-meta{
display: flex;
gap: 0.75rem;
margin-bottom: 0.5rem;
color: rgb(0, 0, 0, 0.5);
} .widget:not(.widget.widget_search){
border-radius: 5px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.widget .widget-title{
display: block;
padding: 1rem 1rem;
background-color: var(--fs-color-primary);
color: #fff;
}
.widget .is-divider{
display: none;
}
.widget.widget_search input,
.widget.widget_search button{
height: 2.5rem;
}
.widget.widget_nav_menu ul li{
padding: 0.5rem 1rem;
}
.widget.widget_nav_menu ul li a{
color: #000;
}
.widget.flatsome_recent_posts ul li{
padding: 0.25rem 1rem;
} .blog-archive.page-wrapper{
padding-top: 50px;
padding-bottom: 0;
}
.box-blog-post{
height: 100%;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.box-blog-post .box-image{
}
.box-blog-post .box-text{
display: flex;
gap: 0.75rem;
padding: 1rem;
text-shadow: none !important;
font-size: inherit;
position: unset;
}
.box-blog-post .box-text .box-text-inner{
display: flex;
flex-direction: column;
flex: 1;
}
.box-blog-post .cat-label{
position: absolute;
left: 1rem;
top: 1rem;
padding: 0.375rem 0.75rem;
background-color: var(--fs-color-primary);
border-radius: 5px;
opacity: 1;
font-size: inherit;
line-height: normal;
}
.box-blog-post .box-text .post-title{
margin: 0 0 0.5rem;
font-size: var(--fs-16-18);
font-weight: 700;
color: var(--fs-color-primary);
}
.box-blog-post .box-text .post-title a{
margin: 0;
line-height: normal;
}
.box-blog-post .box-text .is-divider{
display: none;
}
.box-blog-post .box-text .post-meta{
display: inline-block;
margin-bottom: 0.25rem;
opacity: 1;
font-size: 0.875rem;
order: -1;
color: rgba(0, 0, 0, 0.5);
}
.box-blog-post .box-text .post-meta{
border-radius: 0.25rem;
}
.box-blog-post .box-text .post-meta:before{
content: "\f073";
font-family: var(--ff-awesome);
font-weight: 300;
margin-right: 0.25rem;
}
.box-blog-post .post-meta-download a{
width: 2.5rem;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.5);
color: var(--fs-color-primary);
}
.box-blog-post .post-meta-file-size{
color: rgba(0, 0, 0, 0.5);
}
.box-blog-post .from_the_blog_excerpt{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.box-blog-post .button{
text-align: left;
margin: 1rem 0 0;
padding: 0 !important;
font-size: 1rem;
color: var(--fs-color-primary);
}
.box-blog-post .button:after{
content: "\f178";
font-family: var(--ff-awesome);
transition: all .3s ease;
} 
.box-blog-post .button:hover:after{
margin-left: 0.5rem;
}
.uxb-wrapper--flatsome_swiper .swiper-wrapper{
flex-wrap: wrap;
}
.uxb-wrapper--flatsome_swiper_slide{
width: 30%;
}
.swiper-button-next,
.swiper-button-prev{
width: 2rem;
height: 2rem;
background-color: var(--fs-color-primary);
border-radius: 50%;
}
.swiper-button-next{
right: 0;
transform: translate(50%, 50%);
}
.swiper-button-prev{
left: 0;
transform: translate(-50%, 50%);
}
.swiper-button-next:after,
.swiper-button-prev:after{
color: #fff;
font-size: 1rem;
}
.client-slide .swiper-slide .img .img-inner,
.partner-slide .swiper-slide .img .img-inner{
padding-top:56.25%;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.5rem;
}
.box-video{
border-radius: 0.5rem;
overflow: hidden;
}
.button.open-video{
width: 2.75rem;
height: 2.75rem;
min-width: unset;
min-height: unset;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: var(--fs-color-primary);
}
.button.open-video i{
top: 0;
font-size: 1rem !important;
} .icon-info-footer{
display: flex;
align-items: center;
gap: 1rem;
}
.icon-info-footer .icon-box-img{
width: clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem) !important;
}
.icon-info-footer img{
padding-top: 0;
}
.icon-info-footer.icon-box-left .icon-box-img+.icon-box-text{
padding-left: 0;
}
.icon-info-footer h3{
margin-bottom: 0.25rem;
}
.row-footer:after{
content: none;
}
.col-footer h3{
margin-bottom: 1.25rem;
font-size: var(--fs-18-20);
}
.col-footer p{
margin-bottom: 0.5rem;
}
.col-footer ul{
margin-bottom: 0;
}
.col-footer ul li{
display: flex;
gap: 0.5rem;
margin-left: 0;
margin-bottom: 0.75rem;
}
.col-footer .ux-menu .ux-menu-link + .ux-menu-link{
margin-top: 0.75rem !important;
}
.col-footer .ux-menu .ux-menu-link__link{
flex: unset;
min-height: unset;
padding: 0;
transition: all .3s ease-in-out;
}
.col-footer .ux-menu .ux-menu-link__link:hover{
transform: translateX(0.5rem);
color: var(--fs-color-secondary) !important;
}
.absolute-footer{
display: none;
}
.button.back-to-top{
width: 2.75rem;
height: 2.75rem;
min-width: unset !important;
min-height: unset;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.25rem;
font-weight: 700;
}
#footer .social-icons{
display: flex;
align-items: center;
}
#footer .social-icons span{
font-weight: 400;
color: #fff;
font-size: 1rem;
}
#footer .social-icons a{
background-color: #fff;
border-radius: 50% !important;
border: 0 !important;
color: var(--fs-color-primary);
} .nav-pagination>li{
margin: 0 0.25rem !important;
}
.nav-pagination>li>a,
.nav-pagination>li>span{
min-width: unset;
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.25rem;
border: 1px solid #000;
line-height: normal;
}
.nav-pagination>li i{
top: 0;
font-size: inherit;
} .flatsome-custom-top-content{
margin-bottom: 1.5rem;
}
.flatsome-custom-top-content .title-single-content{
margin-bottom: 0.75rem;
font-size: 2rem;
}
.flatsome-custom-top-content .meta-post{
display: flex;
gap: 1.5rem;
color: #333333;
} .box-blog-video{
height: 100%;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}
.box-blog-video .box-image .image-cover{
padding-top: 75%;
}
.box-blog-video .box-icon-video{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 2.5rem;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
border-radius: 50%;
color: #fff;
} 
.box-blog-video .box-text{
padding: 0.75rem;
}
.box-blog-video .box-text .title{
font-size: var(--fs-16-18);
color: var(--fs-color-primary);
}
.box-blog-video .box-text .title a{
color: inherit;
}
.box-blog-video .box-text .meta{
display: flex;
align-items: center;
gap: 1rem;
color: rgba(0, 0, 0, 0.5);
}
.box-blog-video .box-text .meta .dot{
width: 0.25rem;
height: 0.25rem;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
} .box.box-category .box-image{
border: 4px solid var(--fs-color-primary);
border-radius: 5px 5px;
}
.box.box-category .box-text{
padding: 2rem 1rem 1rem;
background: linear-gradient(to top, #0075D0, rgba(0, 117, 208, 0));
text-shadow: none;
border-radius: 5px 5px;
font-size: inherit;
}
.box.box-category .box-text .header-title{
margin: 0 0 0.25rem;
font-size: var(--fs-18-20);
}
.box.box-category .button{
margin: 1rem 0 0;
padding: 0.375rem 1rem;
} .product-small.box{
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 5px;
background-color: #fff;
}
.product-small.box .box-image{
border-radius: 5px 5px 0 0;
}
.product-small.box .box-image:after{
content: "";
position: absolute;
inset: 0;
border: 5px solid var(--fs-color-primary);
border-radius: inherit;
pointer-events: none;
}
.product-small.box .box-text{
padding: 1rem 1rem 0.5rem;
}
.product-small.box .box-text .title-wrapper{
min-height: 2.625rem;
}
.product-small.box .box-text .product-title,
.product-small.box .box-text .product-title a{
margin: 0;
font-size: 1rem;
font-weight: 700;
text-align: center;
color: #000;
}
.product-small.box .price-wrapper{
margin-top: 0.5rem;
font-size: 1rem;
text-align: center;
color: #CF0B0B;
font-weight: 700;
}
.product-small.box .price-wrapper span.amount{
}
.product-small.box .button-wrapper{
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.product-small.box .button-wrapper a{
flex: 1;
margin: 0;
padding: 0.375rem 0.5rem;
}
.row.row-small.products>.col{
height: 100%;
} .widget.widget_product_categories{
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
border-radius: 5px;
overflow: hidden;
}
.widget.widget_product_categories span.widget-title{
text-align: center;
}
.widget.widget_product_categories ul.product-categories li.cat-item{
padding: 0.625rem 1rem;
}
.widget.widget_product_categories ul.product-categories li.cat-item a{
color: #000;
} .shop-page-title{
margin-bottom: 1rem;
}
.shop-page-title .page-title-inner{
padding-top: 0;
max-width: unset !important;
}
.shop-page-title .woocommerce-breadcrumb{
margin-bottom: 0.5rem;
color: var(--fs-color-primary);
font-size: var(--fs-18-20);
} .product-gallery{
padding-bottom: 20px !important;
}
.product-main{
padding-bottom: 0;
}
.product-info .woocommerce-breadcrumb{
display: none;
}
.product-info .product-title{
margin-bottom: 0.5rem;
font-size: var(--fs-title);
}
.product-info .price{
font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
font-weight: 700;
color: var(--fs-color-primary);
}
.product-info .product_meta>span{
font-size: 1rem;
border-top: 0;
}
.product-info .product-button-custom .button{
flex: 1;
padding: 1rem 1rem;
font-size: var(--fs-16-20);
}
.product-info .box-text-commit{
border: 1px dashed var(--fs-color-primary);
padding: 1.25rem;
border-radius: 5px;
}
.product-info .box-text-commit ul{
margin-bottom: 0;
} .icon-policy{
display: flex;
align-items: center;
background-color: #ECECEC;
padding: 0.75rem;
border-radius: var(--rounded-8-12);
}
.icon-policy .icon-box-img{
width: 2.5rem !important;
height: 2.5rem;
}
.icon-policy .icon-box-img .icon,
.icon-policy .icon-box-img .icon-inner,
.icon-policy .icon-box-img .icon-inner img{
width: 100%;
height: 100%;
}
.icon-policy .icon-box-img .icon-inner img{
padding-top: 0;
object-fit: contain;
}
.icon-policy .icon-box-text{
font-weight: 600;
} .product-section{
border-top: unset;
}
.product-section-title{
max-width: unset !important;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
font-size: var(--fs-title);
color: var(--fs-color-primary);
}
.product-section .row{
max-width: unset !important;
}
.product-footer .woocommerce-tabs.container{
max-width: unset !important;
padding-top: 0;
border-top: 0;
}
.tabs.wc-tabs{
gap: 0.25rem; overflow-x: auto;
}
.tabs.wc-tabs li{ width: auto !important;
}
.tabs.wc-tabs li a{
padding: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem) 1rem;
background-color: var(--fs-color-primary);
border-radius: 0.5rem 0.5rem 0 0;
font-size: 0.875rem;
color: #fff;
white-space: nowrap;
}
.tabs.wc-tabs li.active a,
.tabs.wc-tabs li:hover a{
background-color: #0048BE;
}
.woocommerce-tabs .tab-panels{
padding: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}
.related-products-wrapper{
margin-bottom: 30px;
}
.woocommerce-Reviews.row{
max-width: unset !important;
}
.woocommerce-Reviews.row form{
margin-bottom: 0;
}
.woocommerce-Reviews.row input.submit{
margin: 0;
} .box-icon-counter{
text-align: center;
}
.box-icon-counter .title{
margin-bottom: 0.25rem;
color: var(--fs-color-primary);
font-size: 1.5rem;
} .icon-vm{
height: 100%;
padding: 2rem;
background-color: #fff;
border-radius: 5px;
}
.icon-vm .icon-box-img{
width: 60px !important;
height: 60px;
}
.icon-vm .icon-box-img .icon,
.icon-vm .icon-box-img .icon-inner{
width: 100%;
height: 100%;
}
.icon-vm .icon-box-img img{
padding-top: 0;
}
.icon-vm .icon-box-text{
text-align: left;
}
.icon-vm .icon-box-text h3{
text-align: center;
font-size: var(--fs-18-20);
}
.icon-vm .icon-box-text ul li{
margin-bottom: 0.25rem;
} .list-address ul{
list-style: none;
}
.list-address ul li{
display: flex;
gap: 0.5rem;
margin-left: 0;
}
.form-contact .form-control{
height: unset;
padding: 0.75rem 1rem;
border-radius: 5px;
background-color: #fff;
transition: all .3s ease;
}
.form-contact textarea.form-control{
height: 8.5rem;
}
.map-contact{
height: 300px;
}
.map-contact iframe{
width: 100%;
height: 100%;
} .button-contact-fixed{
position: fixed;
bottom: 8%;
right: 0.25rem;
z-index: 30;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.box-ring {
width: clamp(4rem, 3.8rem + 1vw, 5rem);
height: clamp(4rem, 3.8rem + 1vw, 5rem);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: visibility .5s;
position: relative;
}
.box-ring-outline {
position: absolute;
width: clamp(4rem, 3.8rem + 1vw, 5rem);
height: clamp(4rem, 3.8rem + 1vw, 5rem);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 0 0;
border: 2px solid rgba(30, 30, 30, 0.5);
background-color: transparent;
border-radius: 50%;
opacity: .5;
transition: all .5s;
animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
}
.box-ring-inline {
position: absolute;
left: 50%;
top: 50%;
width: clamp(3rem, 2.8rem + 1vw, 4rem);
height: clamp(3rem, 2.8rem + 1vw, 4rem);
transform: translate(-50%, -50%);
transform-origin: 0 0;
border: 2px solid transparent;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
transition: all .5s;
animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
}
.box-ring-image{
width: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);
height: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);
padding: 6px;
border: 2px solid transparent;
border-radius: 50%;
background-color: #000;
opacity: 1;
animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
}
.box-ring-image img{
width: 100%;
height: 100%;
object-fit: contain;
}
.box-ring-label{
position: absolute;
right: 2rem;
height: 2.25rem;
z-index: -1;
padding: 0.25rem 3rem 0.25rem 1rem;
border-radius: 50rem;
white-space: nowrap;
color: #fff;
display: flex;
align-items: center;
}
@keyframes coccoc-alo-circle-anim {
0% {
transform: rotate(0) scale(.5) skew(1deg) translate(-50%, -50%);
opacity: .1
}
30% {
transform: rotate(0) scale(.7) skew(1deg) translate(-50%, -50%);
opacity: .5
}
100% {
transform: rotate(0) scale(1) skew(1deg) translate(-50%, -50%);
opacity: .1
}
}
@keyframes coccoc-alo-circle-fill-anim {
0% {
transform: rotate(0) scale(.7) skew(1deg) translate(-50%, -50%);
}
50% {
transform: rotate(0) scale(1) skew(1deg) translate(-50%, -50%);
}
100% {
transform: rotate(0) scale(.7) skew(1deg) translate(-50%, -50%);
}
}
@keyframes coccoc-alo-circle-img-anim {
0% {
transform: rotate(0) scale(1) skew(1deg)
}
10% {
transform: rotate(-25deg) scale(1) skew(1deg)
}
20% {
transform: rotate(25deg) scale(1) skew(1deg)
}
30% {
transform: rotate(-25deg) scale(1) skew(1deg)
}
40% {
transform: rotate(25deg) scale(1) skew(1deg)
}
50% {
transform: rotate(0) scale(1) skew(1deg)
}
100% {
transform: rotate(0) scale(1) skew(1deg)
}
}