.quba {
position: relative;
padding-top: 100%;
width: inherit !important;
overflow: hidden; 
transform: rotateY(0deg);
}
.quba:before {
position: absolute;
content: '';
left: calc(16.5%);
top: 64%;
height: calc(67%);
width: calc(67%);
border-radius: 100% 0% 100% 100%;
transform: scale(1.5, 1.2) rotate(-45deg);
background: var(--e-global-color-primary);
border-width: 5px;
border-style: solid;
border-color: transparent;
}
.quba:before,
.quba-container .title-container,
.elementor-inner-column .quba-content,
.quba-container .quba-icon,
.quba-container:hover .quba-content{
webkit-transition: background .3s,border .3s,border-radius .3s, box-shadow .3s, -webkit-box-shadow .3s;
transition: background .3s,border .3s,border-radius .3s, box-shadow .3s, -webkit-box-shadow .3s;
transition-property: background, color, border, border-radius, box-shadow, -webkit-box-shadow;
transition-duration: 0.3s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out !important;
transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
-o-transition: background, color, box-shadow, .3s,border .3s,border-radius .3s,box-shadow .3s;
}
.quba-container:hover .title .elementor-widget-container,
.quba-container:hover .quba:before,
.quba-container:hover .image .elementor-widget-container {
border-color: #DBC595;
}
.elementor-inner-column .image .elementor-widget-container {
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: transparent;
border-radius: 0px 0px 50px 50px;
}
.quba-container .elementor-widget-icon {
display: none;
}
.quba-container:hover .elementor-widget-icon {
display: block
}
.quba-container:hover .image {
color: var( --e-global-color-78c8e82 );
}
.quba-container:hover .image{
background-color: #2A29299E;
}
.arabic-title {
color: var( --e-global-color-78c8e82 ) !important;
font-family: "Maghribi Assile", Sans-serif;
font-size: 24px;
font-weight: 500;
position: absolute;
z-index: 50;
text-align: center;
width: 100%;
bottom: 52%;
transform: translateY(30%);
}
.quba-container .title-container {
padding: 9px 9px 9px 9px;
border-style: solid;
border-width: 0px 7px 0px 7px;
border-color: transparent;
}
.quba-container:hover .title-container,
.quba-container:hover .quba-content {
border-color: #DBC595;
}
.quba-container .title {
margin: 0 !important;
text-align: center;
color: var( --e-global-color-78c8e82 );
font-family: var( --e-global-typography-84250f7-font-family ), Sans-serif;
font-size: var( --e-global-typography-84250f7-font-size );
font-weight: var( --e-global-typography-84250f7-font-weight );
text-transform: var( --e-global-typography-84250f7-text-transform );
line-height: var( --e-global-typography-84250f7-line-height );
letter-spacing: var( --e-global-typography-84250f7-letter-spacing );
}
@media(max-width: 768px){
.quba-container .title {
font-size: 10px !important;
}
}
.quba-container .image-container {
height: 120px;
background-size: cover !important;
border-radius: 0px 0px 50px 50px;
filter: brightness( 100% ) contrast( 100% ) saturate( 0% ) blur( 0px ) hue-rotate( 0deg );
}
.quba-container .quba-content {
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: transparent;
height: 120px;
width: 100%;
border-radius: 0px 0px 50px 50px;
position: absolute;
bottom: 0;
color: transparent;
word-wrap: break-word;
text-align: center;
padding: 10px;
font-size: 13px;
font-weight: 600;
}
.quba-container:hover .quba-content {
color: var( --e-global-color-78c8e82 );
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
}
.quba-container .quba-icon {
position: absolute;
bottom: 25px;
right: 25px;
color: transparent;
}
.quba-container:hover .quba-icon {
color: #DBC595;
}