@font-face
{
font-family:CYLICOMEB;
src: url('../fonts/Manrope-ExtraBold.ttf');
}


@font-face
{
font-family:CYLICOMB;
src: url('../fonts/Manrope-Bold.ttf');
}

@font-face
{
font-family:CYLICOM;
src: url('../fonts/Manrope-Regular.ttf');
}


@font-face
{
font-family:CYLICOML;
src: url('../fonts/Manrope-Light.ttf');
}


@font-face
{
font-family:CYLICOMEL;
src: url('../fonts/Manrope-ExtraLight.ttf');
}



@font-face
{
font-family:CYLICOMI;
src: url('../fonts/Manrope-Regular.ttf');
}


@font-face
{
font-family:CYLICOMBI;
src: url('../fonts/Manrope-Bold.ttf');
}

@font-face
{
font-family:CYLICOMH;
src: url('../fonts/Manrope-Regular.ttf');
}

@font-face
{
font-family:pl;
src: url('../fonts/Manrope-ExtraLight.ttf');
}

@media only screen and (max-width: 768px) {
    .full-slide {
        
        width: 100% !important;
        height: 70vh !important;
        object-fit: cover;
    }
}


.full-slide {
    width: 100%;
    background: #fff;
    display: block;
}



.ci-title {
    
    font-family: cylicomb !important;
}

.hs-title-1 {font-family: 'CYLICOMBI'!important;}

.section-caption-border {font-family: 'CYLICOMB'!important;}


.fw-menu li a{font-family: 'CYLICOMB'!important;}

.fw-title {font-family: 'CYLICOMb'!important;}

.clearlinks{font-family: 'CYLICOMb'!important;}

.accordion > dt > a{font-family: 'CYLICOM'!important;}

.accordion > dd{font-family: 'CYLICOML'!important;}

.accordion > dt > a.active {font-family: cylicomb!important; font-weight: 900;}

.section-title-tiny{font-family: cylicom!important;}

.alt-features-title {font-family: cylicomb !important;}


.alt-features-descr {font-family: 'CYLICOML'!important;}


.section-title-small {font-family: 'CYLICOMB'!important;}



.work-descr {font-family: 'CYLICOM'!important;}

.work-title {font-family: 'CYLICOMb'!important;}


.works-filter a {font-family: 'CYLICOMEB'!important;}





.light-content .number-descr{font-family: 'CYLICOMl'!important;}


.number-title {font-family: 'CYLICOMBI'!important;}


.services-title {font-family: 'CYLICOMB'!important;}

.services-tabs > li > a {font-family: 'CYLICOMl'!important;}

.services-tabs > li a.active {font-family: 'CYLICOM'!important;}

.section-descr {font-family: 'CYLICOM'!important;}



.team-item-role {font-family: cylicoml!important;}

.team-item-name{font-family: cylicomb!important;}

.testimonial .small {font-family: cylicoml!important;}


p {font-family: cylicom !important;}


.h5 {font-family: cylicomb!important;}


.underline .link-strong { font-family: 'CYLICOM'!important;}


.section-title{ font-family:cylicomb!important;}
.section-caption{ font-family:cylicomb!important;}

.hs-status{ font-family:cylicoml!important;}

.btn-mod.btn-large{ font-family:cylicomb!important;}


.hs-title-12{ font-family:cylicomb!important;}

.btn-mod.btn-border-w {
    font-family: 'CYLICOMB'!important;}




.owl-item.active .owl-animate-fadeInUp{
   font-family: cylicomeb!important;
}


.main-nav.dark .inner-nav ul > li > a
 {
   font-family: cylicomb!important;
}


.dj-megamenu-default li ul.dj-submenu>li>a
{font-family: cylicomb!important;}


.inner-nav ul.dj-megamenu li a.dj-up_a > span
 {
    float: none;
    height: auto;
    line-height: 1.3;
    background: none;
    font-family: cylicomb!important;
}














.dj-offcanvas-open .dj-offcanvas {
    z-index: 9999!important;
}


.dj-megamenu-default li ul.dj-submenu>li>a:hover, .dj-megamenu-default li ul.dj-submenu>li>a.active, .dj-megamenu-default li ul.dj-submenu>li.hover:not(.subtree)>a {
    background:#0dcaf0!important;
    color: #fff;
}

.btn-primary {
    color: #fff;
    background-color:#0dcaf0!important;
    border-color: #0dcaf0!important;
}

.dj-megamenu-select-dark .dj-mobile-open-btn, .dj-megamenu-offcanvas-dark .dj-mobile-open-btn, .dj-megamenu-accordion-dark .dj-mobile-open-btn {background:none!important;}


.full-wrapper {margin-left: 100px; margin-right: 100px;}

.dj-megamenu-select-dark .dj-mobile-open-btn, .dj-megamenu-offcanvas-dark .dj-mobile-open-btn, .dj-megamenu-accordion-dark .dj-mobile-open-btn { background:none!important;}



.rpx_form_container .checkbox, .rpx_form_container .radio {
    vertical-align: baseline!important;
    margin-right: 5px;
}



  
.mobile-on .desktop-nav ul {background:none!important;}


@media screen and (min-width:0px) and (max-width:1040px) 
{
.full-wrapper {margin-left: 20px!important; margin-right: 20px!important;}

.r-m {margin-top:-57px!important;}
.main-nav {background:none!important;}

}


.dj-megamenu-wrapper{}

.dj-megamenu-default li.dj-up {padding-left: 30px !important;}

.dj-megamenu-default li a.dj-up_a .arrow {
    position: absolute;
    right: 10px;
    top: 18% !important;
   
}

.main-nav.dark .inner-nav ul > li > a {
    color: #fff;
    opacity: 1 !important;
}


.r-m {
   margin-top:22px;
  float:right;
   
   
}
.menu-m{float:left;}
.lang {
    float: left;
    margin-left: 30px;
}





.nav-logo-wrap {
    
    position: absolute!important;
    float: left;
}



.mod-languages{margin-top:0px;}



div.mod-languages a
 {
    padding: 0px;
    text-decoration: none;
}

.mobile-on .desktop-nav

 {
    display: block !important;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0 15px;
    z-index: 100;
}

.inner-nav ul li {
    margin: 0 0px!important;
    position: relative;
}
/* ==========================================================================
   CUSTOM OVERRIDES  (our own component tweaks — no core/Bootstrap hacks)
   Loaded last, after the brand palette.
   ========================================================================== */

/* --- Cyan primary CTA -------------------------------------------------------
   The stock .btn-color puts WHITE text on bright cyan (#00c4ff) →
   contrast ~1.9, fails WCAG AA. We use DARK text (charcoal) on cyan →
   contrast ~12:1, AA pass + the brand stands out.
   ------------------------------------------------------------------------- */
.btn-mod.btn-cyan{
    color: var(--color-dark-1);
    background: var(--color-primary-1);
    border-color: var(--color-primary-1);
}
.btn-mod.btn-cyan:hover{
    color: var(--color-dark-1);
    background: var(--color-primary-1-a);
    border-color: var(--color-primary-1-a);
}
/* if the hover-anim overlay is enabled, keep the text dark */
.btn-mod.btn-cyan.btn-hover-anim:before{ background: var(--color-primary-1-a); }
.btn-mod.btn-cyan.btn-hover-anim:hover{ color: var(--color-dark-1); }


/* ==========================================================================
   DJ-MEGAMENU  →  RESONANCE NAV
   The menu is rendered by DJ-MegaMenu, which ships its own theme CSS
   (mod_djmegamenu/themes/default/css/djmegamenu.css). That theme paints a
   grey gradient bar with 60px boxed items, black/grey separators between
   them, a BLUE gradient on hover/active, and uppercase Arial 12px text.
   We strip all of that and rebuild the theme's pill-less inner-nav bar.

   Note on colour: we do NOT hard-code the link colour here. DJ wraps the
   <ul> in a .dj-megamenu-wrapper <div>, which breaks the theme's
   direct-child layout selectors (.inner-nav > ul ...). But the COLOUR rules
   (.main-nav.dark .inner-nav ul > li > a) use a descendant ".inner-nav ul"
   so they still match the DJ markup and win on specificity — meaning white
   text + opacity .78 -> 1 come straight from the theme and keep respecting
   the dark / after-scroll behaviour. We only fix LAYOUT and kill DJ's paint.
   ========================================================================== */

/* List: drop the grey gradient bar + Arial, lay items out like .inner-nav > ul
   (the wrapper <div> broke the theme's own .inner-nav > ul flex rule). */
.inner-nav ul.dj-megamenu{
    display:block;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
}

/* Items: no float, no boxed borders, Resonance 18px spacing. */
.inner-nav ul.dj-megamenu > li.dj-up
 {
    float: left;
    display: block;
    margin: 0 18px;
}
.inner-nav ul.dj-megamenu > li.dj-up.first{ margin-left: 0; }
.inner-nav ul.dj-megamenu > li.dj-up:last-child{ margin-right: 0; }

/* Link: transparent, theme bar height, inherit font, no uppercase/borders.
   Colour + opacity are left to the theme's .dark rules (see note above). */
.inner-nav ul.dj-megamenu li a.dj-up_a{
    display:block;
    align-items: center;
    float: none;
    height:45px;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    background: none;
    border: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.main-nav:not(.mobile-on).small-height .inner-nav ul.dj-megamenu li a.dj-up_a{
    height: var(--menu-bar-height-scrolled);
}

/* Reset the inner <span> that DJ pins to 60px line-height. */
.inner-nav ul.dj-megamenu li a.dj-up_a > span{
    float: none;
    height: auto;
    line-height: 1.3;
    background: none;
}

/* Hover / active / current: kill DJ's blue button background; colour comes
   from the theme (.main-nav.dark ... :hover/.active -> opacity 1). */
.inner-nav ul.dj-megamenu li:hover > a.dj-up_a,
.inner-nav ul.dj-megamenu li.hover > a.dj-up_a,
.inner-nav ul.dj-megamenu li.active > a.dj-up_a,
.inner-nav ul.dj-megamenu li.current > a.dj-up_a,
.inner-nav ul.dj-megamenu li a.dj-up_a.active{
    background: none;
    border: 0;
}

/* Scrolled / light bar: on scroll the theme JS removes the `.dark` class
   (all.js: $(".light-after-scroll").removeClass("dark")), so the white bar
   shows and native links fall back to dark body text. But DJ hard-codes
   white on a.dj-up_a regardless of `.dark`, so the menu vanishes on the
   white bar. Restore dark text whenever the nav is NOT in dark mode. */
.main-nav:not(.dark) .inner-nav ul.dj-megamenu li a.dj-up_a{
    color: var(--color-dark-1);
}

/* Mobile (theme's .mobile-on drawer): stack the items vertically.
   DJ also has its own breakpoint (data-trigger) — verify on a real device. */
.main-nav.mobile-on .inner-nav ul.dj-megamenu{
    flex-direction: column;
    align-items: stretch;
}
.main-nav.mobile-on .inner-nav ul.dj-megamenu > li.dj-up{
    margin: 0;
}
.main-nav.mobile-on .inner-nav ul.dj-megamenu li a.dj-up_a{
    height: auto;
    padding: 12px 0;
}