/* For the whole scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  /* For the scrollbar track (background) */
  ::-webkit-scrollbar-track {
    /* background-color: var(--color-white); */
    border-radius: 4px;
  }
  
  /* For the scrollbar thumb (the part that you can drag) */
  ::-webkit-scrollbar-thumb {
    background-color: var(--blu-conduco);
    border-radius: 4px;
  }
  
  /* For the scrollbar thumb when hovering */
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-white)
  }
  
html{
    /* font-size: 125%; */
    scrollbar-color: var(--blu-conduco) #fff;
    /* scrollbar-width: thin; */
    /* font-kerning: none; */
}
.fix-win-chrome-scale{
    transform: perspective(1px) translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}
.optimized {
  will-change: opacity, transform;
}
/* -------------
   Body - snap mandatory
   ------------- */
.snap-mandatory .tm-page{
    /* height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; */
}
/* -------------
   Body - scroll snap
   ------------- */
.snap-mandatory .tm-page .uk-section{
    /* scroll-snap-align: start; */
    /* display: flex; */
}
/* backgdrop-filter */
.backdrop-blur-15px{
    backdrop-filter:blur(15px);
}
/* helper class */
.height-20vh{
    height:20vh;
}
.height-0px{
    height:0px;
}
.max-height-80vh{
    max-height:80vh;
}
.img-full-vw img{
    width:100vw;
}
.white-space-nowrap{
    white-space:nowrap;
}
.opacity-0{
    opacity:0;
}
.opacity-0_2{
    opacity:0.2;
}
.opacity-0_3{
    opacity:0.3;
}
.opacity-0_4{
    opacity:0.4;
}
.bottom-0{
    bottom:0;
}
.width-100{
    width:100%;
}
@media only screen and (min-width:1600px){
    .width-100{
        width:75%;
    }
}
.height-100{
    height:100%;
}
.height-100vh{
    height:100vh;
}
.height-100vh .el-container{
    height:100vh;
}
.z-index4{
    z-index:4;
}
.img-filter-darker{
    filter:brightness(0.2);
}
.img-filter-dark{
    filter:brightness(0.5);
}
/* CONDUCO LOGO */
#home-logo svg{
    
    overflow: visible;
    fill:#243d57;
}
#home-logo svg g g path{
    opacity:0;
    stroke: #35A5A5;
    stroke-width: 3px;
}
#title-home-on-sky{
    /* position:relative; */
    top:20vh;
    z-index: 3;
}
#title-home-on-sky .word .char{
    --gradient-degree: 0deg;
    pointer-events: none;
    user-select: none;
    /* -webkit-background-clip: text;
    color: transparent !important;
    background-image:linear-gradient(var(--gradient-degree), #ffffff 0%, #ffffff 50%, var(--palette-2-yellow) 50%, var(--palette-2-yellow) 100%);
    background-size:100% 200%;
    background-position:0% -100%;
    background-repeat:repeat-y; */
    color:#ffffff;
    font-family:"Haffer";
    opacity:0;
}
#subtitle-home-on-sky{
    position:relative;
    top:15vh;
    z-index: 0;
}
.underline-white{
    position: relative;
    background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
    background-size: 0.01% 10%;
    background-repeat: no-repeat;
}
/* conduco logo service page */
#logo-service-page svg{
    fill:#243d57;
}
.logo-conduco-for-subtitle-page svg{
    fill:#243d57;
}
@media only screen and (max-width:767px){
    .logo-conduco-for-subtitle-page{
        max-width:100%;
    }
}
/* CONDUCO LOGO END */
/* GENERIC/STANDART PAGE TEMPLATE */
/* HEADLINE TITLE */

.headline-hero-generic-page-title{
    line-height:0.7;
}
/* VARIOUS ANIMATION */
.home-hero-text-animation .word .char{
    pointer-events: none;
    user-select: none;
}
.gradient-yellow-45deg > .word .char{
    -webkit-background-clip: text;
    color: transparent !important;
    background-image:linear-gradient(45deg, #ffffff 0%, #ffffff 50%, var(--palette-2-yellow) 50%, var(--palette-2-yellow) 100%);
    background-size:200% 200%;
    background-position:100% 100%;
    pointer-events: none;
    user-select: none;
}
.gradient-green-45deg > .word .char{
    -webkit-background-clip: text;
    color: transparent !important;
    background-image:linear-gradient(45deg, #ffffff 0%, #ffffff 50%, var(--palette-2-green) 50%, var(--palette-2-green) 100%);
    background-size:200% 200%;
    background-position:100% 100%;
    pointer-events: none;
    user-select: none;
}
.gradient-red-45deg > .word .char{
    -webkit-background-clip: text;
    color: transparent !important;
    background-image:linear-gradient(45deg, #ffffff 0%, #ffffff 50%, var(--palette-2-red) 50%, var(--palette-2-red) 100%);
    background-size:200% 200%;
    background-position:100% 100%;
    pointer-events: none;
    user-select: none;
}
.words-from-small-bottom-opacity .word, .words-from-small-bottom-opacity-backward-animation .word, .words-from-bottom-opacity .word, .words-from-bottom-opacity-backward-animation .word{
    opacity:0;
}
.headline-scroll-right-to-left{
    width:200vw;
    display:inline-block;
}
/* -------------
   Text with colored background animation
   ------------- */
.text-background-blu-color-white{
    background-color:#ffffff;
    color:#243d57;
    padding:7.5px;
}
.text-background-blu-color-white.animate{
    animation: text-background-blu-color-white .9s forwards;
    animation-delay: .5s;
}
@keyframes text-background-blu-color-white{
    0%{
        background-color:#ffffff;
        color:#243d57;
    }
    100%{
        background-color:#243d57;
        color:#ffffff;
    }
}
/* -------------
   Text highlighted with color
   ------------- */
/* yellow */
.text-highlighted-yellow{
    background:linear-gradient(0deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10%,var(--palette-2-yellow) 10%, var(--palette-2-yellow) 40%,rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%);
    background-size:0.1% 100%;
    background-repeat:no-repeat;
}
.text-highlighted-yellow.animate{
    background-size:0.1% 100%;
    animation: text-highlighted-yellow-animation .9s forwards;
    animation-delay: 1s;
}
@keyframes text-highlighted-yellow-animation{
    0%{
        background-size:0.1% 100%;
    }
    100%{
        background-size:100% 100%;
    }
}
/* green */
.text-highlighted-green{
    background:linear-gradient(0deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10%,var(--palette-2-green) 10%, var(--palette-2-green) 40%,rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%);
    background-size:0.1% 100%;
    background-repeat:no-repeat;
}
.text-highlighted-green.animate{
    background-size:0.1% 100%;
    animation: text-highlighted-green-animation .9s forwards;
    animation-delay: 1s;
}
@keyframes text-highlighted-green-animation{
    0%{
        background-size:0.1% 100%;
    }
    100%{
        background-size:100% 100%;
    }
}
.text-rotate-90deg{
    white-space: nowrap; /* Prevent line breaks */
    transform: rotate(-90deg); /* Rotate the heading */
    transform-origin: right bottom; /* Set the rotation origin */
}
.grid-meta-hover-blu .el-meta{
    transition: color .2s ease-in-out;
}
.grid-meta-hover-blu .el-meta:hover{
    color:#1e6ec1;
}
/* -------------
   Text colored
   ------------- */
.text-color-green{
    color:var(--palette-2-green);
}
.text-color-blu{
    color:var(--blu-conduco);
}
.text-underline-green .word{
    position:relative;
    z-index: 3;
}
.text-underline-green::after{
    content:'';
    position:absolute;
    bottom:5px;
    left:0;
    width:0%;
    height:10px;
    background-color:var(--palette-2-green);
    transition:width 1s;
}
.animate.text-underline-green::after{
    width:100%;
}
/* -------------
   Contact page
   ------------- */

/* Contact buttons */
/* .contact-page-button-container .el-item{
    font-size:24px;
} */
.contact-page-button-container{
    margin-top:0px;
}
.contact-page-button-container .el-item:nth-child(3) a{
    color:var(--whatsapp-green);
}
.contact-page-button-container .el-item:nth-child(3) a:hover{
    color:#fff;
}
/* .contact-page-button-container .el-item a {
    justify-content: flex-start;
} */
.contact-page-button-container .el-item a .uk-icon svg{
    width:24px;
}
.img-overlay-dark::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.5);
}
.no-padding-left-right, .no-padding-left-right > *{
    padding-left:0;
    padding-right:0;
}

.uk-text-large{
    letter-spacing: -0.5px;
}
/* -------------
   Home page
   ------------- */

.home-grid-bottom-10vh{
    bottom:10vh;
    @media (max-width: 960px) {
        bottom:0;
    }
}
.tm-box-decoration-primary::before{
    filter:blur(50px);
}
/* for firefox */
@media (max-width: 960px) {
    .home-grid-bottom-10vh{
        bottom:0;
    }
}

.mobile-height-70vh > .el-container{
    
    @media (max-width: 960px) {
        height:70vh;
    }
}

/* -------------
   SINGLE POST
   ------------- */
.article-toc h2{
    margin-bottom:0px;
}
.article-toc .uk-accordion-content{
    margin-top:0px;
}
.single-post-title-rotated{
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(-50%, -50%) rotate(180deg);
    writing-mode: vertical-lr; /* Change text orientation to vertical */
}
.post-author-buttons .uk-button{
    padding: 0px 10px;
    font-size: 12px;
    line-height: 30px;
}
.single-post-featured-image-border-radius{
    position:relative;
}
.single-post-featured-image-border-radius::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(0deg, transparent 0%, transparent 50%, rgba(0,0,0,0.5) 100%);
}
.single-post-featured-image-border-radius img{
    border-radius:5px 5px 100px 5px;
}
/* for firefox */
@media (max-width: 960px) {
    .mobile-height-70vh > .el-container{
        height:70vh;
    }
}

.second-button-whatsapp > div div:nth-child(2) a{
    background:var(--whatsapp-green);
}

@media only screen and (min-width:960px) and (max-width: 1140px){
    .uk-navbar-left .uk-logo{
        width:243px;
    }
    .tm-header .uk-navbar{
        display:block;
    }
}