/* ------------------------Text------------------------- */

h1 {
    font-size: clamp(1.75rem, 0.679rem + 2.857vw, 3.25rem);
    /* 28 52 */
}

h2 {
    font-size: clamp(1.625rem, 0.911rem + 1.905vw, 2.625rem);
    /* 26 42 */
}

h3 {
    font-size: clamp(1.5rem, 1.143rem + 0.952vw, 2rem);
    /* 24 32 */
}

h4 {
    font-size: clamp(1.25rem, 1.161rem + 0.238vw, 1.375rem);
    /* 20 22 */
}

/* desktop/Body tex/body tex */

.cc-body-text .el-content,
.cc-body-text.uk-panel {
    /* 16 18 */
    font-size: clamp(1rem, 0.911rem + 0.238vw, 1.125rem);
    color: var(--tex-dark-secondary, #777779);
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
}

/* desktop/Body tex/body tex medium */

.cc-body-text-m .el-content {
    /* 18 20 */
    font-size: clamp(1.125rem, 1.036rem + 0.238vw, 1.25rem);
    color: var(--tex-dark-primary, #242427);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

/* ---------------------Menu---------------------  */

.uk-navbar {
    align-items: center;
    border-radius: 10px;
    height: 70px;
    padding: 0 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: var(--bg-blur, rgba(0, 0, 0, 0.34));
}

.tm-header .uk-navbar-center {
    transform: translate(-65%, -50%);
}

.tm-header .uk-navbar-container {
    background: none;
}

.uk-navbar .uk-navbar-nav>li.uk-active,
.uk-navbar .uk-navbar-nav>li:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
}

/* Mobile Menu  */

.tm-header-mobile .uk-navbar-container {
    background: none;
}

.uk-offcanvas-bar {
    backdrop-filter: blur(4px);
}

.uk-offcanvas-bar li a {
    color: #fff !important;
}

.uk-nav-default>li.uk-active>a {
    color: #FBB942 !important;
}

.uk-offcanvas-bar .uk-nav li+li {
    margin-top: 14px;
}

.uk-offcanvas-bar .uk-margin-auto-bottom {
    margin-top: 30px;
}

.uk-offcanvas-bar .uk-grid-margin {
    margin-bottom: 30px;
}

/* -------------------------------Cards----------------------  */
.cc-border {
    border-radius: 100px;
    border: 1px solid rgba(36, 36, 39, 0.28);
    padding: 2px 12px;
    /* 16 18 */
    font-size: clamp(1.125rem, 1.036rem + 0.238vw, 1.25rem);
    color: var(--tex-dark-primary, #242427);
    width: max-content;
}

.cc-border-lite {
    border-radius: 100px;
    border: 1px solid var(--elements-stroke-inversion, rgba(255, 255, 255, 0.32));
    padding: 2px 12px;
    /* 16 18 */
    font-size: clamp(1.125rem, 1.036rem + 0.238vw, 1.25rem);
    width: max-content;
}

/* Main - Why We? */
.cc-card-hover .el-item {
    border-radius: 20px;
    /* 24 32 */
    padding: clamp(1.5rem, 1.143rem + 0.952vw, 2rem);
    border: 2px solid var(--bg-white, #FFF);
    background: var(--bg-white, #FFF);

    &:hover {
        border: 2px solid var(--elements-gradient, #FF992E);
    }
}

/* Main - Contact Us */
.cc-card .el-item {
    border-radius: 20px;
    /* 24 32 */
    padding: clamp(1.5rem, 1.143rem + 0.952vw, 2rem);
    border: 2px solid var(--bg-white, #FFF);
    background: var(--bg-white, #FFF);
}

/* Main - All Services */
.cc-card-dark .el-item {
    border-radius: 20px;
    /* 24 32 */
    padding: clamp(1.5rem, 1.143rem + 0.952vw, 2rem);
    border: 2px solid #333336;
    background: #333336;

    &:hover {
        border: 2px solid var(--elements-gradient, #FF992E);
    }

}

/* ------------------------Buttons----------------------------- */

/* Button animation */
/* Defining styles for the icon element with the uk-icon="arrow-right" attribute */
.uk-icon[uk-icon="arrow-right"] {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('/images/icons/arrow-up-right.svg') no-repeat center center;
    background-size: cover;
    transition: transform 0.4s ease-out;
}

/* Hiding the embedded SVG that adds UIKit */
.uk-icon[uk-icon="arrow-right"] svg {
    display: none;
}

.uk-button-default:hover .uk-icon[uk-icon="arrow-right"] {
    transform: rotate(45deg);

}

.btn-light {
    background: linear-gradient(69deg, #ff8c21, #fac74d) no-repeat left center / 200% 200%;
    transition: background-position .4s ease;
}

.btn-light:hover {
    background: linear-gradient(69deg, #ff8c21, #fac74d) no-repeat right center / 200% 200%;
}

.uk-button, .btn {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Arrow in the news cards*/
.cc-arrow .uk-button-text {
position: relative;
padding-right: 30px;
text-decoration: none;
}

.cc-arrow .uk-button-text::after {
content: "";
position: absolute;
align-items: center;
margin-left: 8px;
width: 24px;
height: 24px;
background: url("/images/icons/arrow-up-right.png") no-repeat center;
transform: rotate(0deg);
transition: transform 0.5s ease;
}

.cc-arrow .el-item:hover .uk-button-text::after {
transform: rotate(45deg);
}

/* Arrow in the cards */
.cc-arrow-rotate .uk-button-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;  
}
.cc-arrow-rotate .uk-button-default::after {
  content: "";
  margin-left: 8px;
  width: 24px;
  height: 24px;
  background: url("/images/icons/arrow-up-right.svg") no-repeat center;
  background-size: contain;
  transition: transform 0.5s ease;
}
.cc-arrow-rotate .uk-button-default:hover::after {
  transform: rotate(45deg);
}

/* Arrow in the cards is multicolored*/
.cc-arrow-rotate-colored .uk-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;  
}
.cc-arrow-rotate-colored .uk-button-secondary::after {
  content: "";
  margin-left: 8px;
  width: 24px;
  height: 24px;
  background: url("/images/icons/arrow-up-right.png") no-repeat center;
  background-size: contain;
  transition: transform 0.5s ease;
}
.cc-arrow-rotate-colored .uk-button-secondary:hover::after {
     background: url("/images/icons/arrow-up-right.svg") no-repeat center;
  transform: rotate(45deg);
}

/* --------------------------Modal----------------------- */
.custom_modal .uk-modal-dialog{
backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    background-color: var(--bg-blur, rgba(0, 0, 0, 0.3));
width: 330px;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #ffffffb8;
}
.custom_modal.uk-modal {
    background: rgba(0, 0, 0, .3);
}