/*

Theme Name: Logiflow
Theme Description: Logiflow custom website theme.
Author: Pixseen
Version: 1.0.0
Tags: Responsive, Custom, Logiflow

*/
html{
    margin:0!important;
    scroll-behavior: smooth;
}
body{
    overflow-x:hidden;
    margin:0;
    box-sizing:content-box;
}

#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode{
    max-width:unset!important;
}

select{
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
}

#nsl-redirect-overlay{
	display:none!
}

header{
    width: calc(100%);
    height: 60px;
    background: transparent;
    z-index: 9999;
    position: fixed;
    transition: all .4s ease-in-out;
}

header .nav{
	display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100%);
    height: fit-content;
    color:white;
    z-index: 9999;
    padding:0px 50px;
}
header .nav .logo-wrapper{
	height:100px;
    max-height:100px;
    transition:max-height .4s ease-in-out;
}
.bg-milky{
	background:hsla(0,0%,100%,.7);
        backdrop-filter: blur(5px);
}

header .sub-nav{
	transform:translateY(0);
    transition:all .8s ease-in-out;
    opacity:1;
}
header.scroll .sub-nav {
	transform:translateY(-100%);
    opacity:.2;
}

header.scroll .nav .logo-wrapper{
	max-height:80px;
}

header .account-list{
transition:all .4s ease-in-out;
	top:73.5px;
}

header.scroll .account-list{
	top:63px;
}

footer .logo a svg path {
	transition:all .4s ease-in-out;
}

footer .logo a:hover svg path {
    fill: var(--color-logiflow);
}

.mobile-menu-wrapper .burger span:nth-child(1){
    transform:translateY(8px);
}

.mobile-menu-wrapper .burger span:nth-child(2){
    opacity:1;
}
.mobile-menu-wrapper .burger span:nth-child(3){
    transform:translateY(-8px);
}

.mobile-menu-wrapper.active .burger span:nth-child(1){
    transform:rotate(45deg);
}

.mobile-menu-wrapper.active .burger span:nth-child(2){
    opacity:0;
}
.mobile-menu-wrapper.active .burger span:nth-child(3){
    transform:rotate(-45deg);
}

.mobile-menu-wrapper ul{
    overflow: hidden;
    max-width: 0;
    top:100px;
    transition:all .4s ease-in-out;
}

.mobile-menu-wrapper .mobile-nav-backdrop{
    pointer-events:none;
    opacity:0;
    top:100px;
    transition:all .4s ease-in-out;
}

.scroll .mobile-menu-wrapper ul, .scroll .mobile-menu-wrapper .mobile-nav-backdrop{
    top:80px;
}

.mobile-menu-wrapper.active ul{
    max-width: 300px;
}

.mobile-menu-wrapper.active .mobile-nav-backdrop{
    pointer-events:all;
    opacity:50%;
}

.menu{
    margin:0;
    list-style:none;
    display:flex;
    padding:0;
}

.menu .menu-item{
    padding:10px 0;
}

.menu-item .menu-link, .menu-item .menu-link:hover,
.menu-item .menu-link:active, .menu-item .menu-link:focus {
    color:#101828;
    text-decoration:none;
    margin-right: 30px;
    transition:color .4s ease-in-out;
}

.menu-item .menu-link:hover, .menu-item .menu-link.active{
    color:var(--color-logiflow);
    
}

.menu-item .menu-link:hover{

}

.submenu{
    margin: 10px 0 0 0;
    list-style: none;
    opacity: 0;
    position: absolute;
    width: 100%;
    left: 0;
    padding: 15px 50px;
    display: none;
    background: darkgray;
}


.menu-item:hover .submenu{
    opacity:1;
    display:flex;
    justify-content:space-between;
}


.funfact-pulse{
	border:1.5px solid var(--color-logiflow);
    left:50%;
    top:50%;
    transform:translate(-50%, -50%) scale(1);
    opacity:1;
    animation:circle-pulse 1s ease-in-out infinite;
}

.page-numbers.current{
    font-weight: 900;
    color:#222222!important;
}

@keyframes circle-pulse {
  from {
  	    transform:translate(-50%, -50%) scale(1);
        opacity:1;
  }
  to {
  	    transform:translate(-50%, -50%) scale(1.5);
        opacity:0;
  }
}

    .notice {
        padding: 12px 15px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    .notice.success { background:#e6f9f0; border:1px solid #27ae60; color:#1e8449; }
    .notice.error   { background:#fdecea; border:1px solid #c0392b; color:#922b21; }
    .notice.info    { background:#eaf2fd; border:1px solid #2980b9; color:#1f618d; }


#searchbar .search-type .search-tag:after{
	content:'';
    display:block;
    width:100%;
    height:3px;
    background-color:var(--color-logiflow);
    position:absolute;
    bottom:-2px;
    left:0;
    opacity:0;
    transition:all .2s ease-in-out;
}

#searchbar .search-type .search-tag.active:after{
	opacity:1;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.search-inputs .input-container{
	border-top:1px solid var(--color-logiflow);
    border-bottom:1px solid var(--color-logiflow);
    border-left:1px solid var(--color-logiflow);
    border-right:1px solid var(--color-logiflow);
    padding:0 10px;
}
.search-inputs .input-container:first-of-type{
	border-radius:10px 0 0 0;
    border-right:unset;
}
.search-inputs .input-container:nth-child(2){
	border-radius:0 10px 0 0;
}
.search-inputs .input-container:nth-child(3){
	border-radius:0 0 0 10px;
    border-right:unset;
    border-top:unset;
}
.search-inputs .input-container:last-of-type{
	border-radius:0px 0px 10px 0px;
    border-top:unset;
}

@media screen and (min-width:640px){
    .search-inputs .input-container{
        border-top:1px solid var(--color-logiflow);
        border-bottom:1px solid var(--color-logiflow);
        border-left:1px solid var(--color-logiflow);
        border-right:unset;
        padding:0 10px;
    }
    .search-inputs .input-container:first-of-type{
        border-radius:10px 0 0 10px;
    }
    .search-inputs .input-container:last-of-type{
        border-radius:0px 10px 10px 0px;
        border-right:1px solid var(--color-logiflow);
        border-top:1px solid var(--color-logiflow);
    }
    .search-inputs .input-container:nth-child(2){
	    border-radius:unset;
    }
    .search-inputs .input-container:nth-child(3){
        border-radius:unset;
        border-top:1px solid var(--color-logiflow);
    }
}



.search-inputs .input-container *:focus{
	outline:none;
    box-shadow: 0px 2px 0px #14748799
}

a.post img.featured{
	transition: transform .4s ease-in-out;
    transform:scale(1)
}

a.post:hover img.featured{
	transform:scale(1.1)
}


:root{
  --size-cariusel:clamp(10rem, 1rem + 40vmin, 30rem);
  --gap-carousel:calc(var(--size-cariusel) / 14);
}


.marquee{
  display: flex;
  overflow: hidden;
  user-select: none;
  gap:var(--gap-carousel);
}
.marquee_group{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap:var(--gap-carousel);
  min-width: 100%;
  animation: scroll-x 60s linear infinite;
}
.marquee-reverse .marquee_group{
  animation-direction: reverse;
  animation-delay: -3s;
}

.marquee:hover .marquee_group{
animation-play-state:paused;
}
@keyframes scroll-x{
  from{transform: translateX(0);}
  to{transform: translateX(calc(-100% - var(--gap-carousel)));}
}

.marquee img{
  display: grid;
  place-items:center;
  width: var(--size-carousel);
  height:auto;
  max-height:50px;
  background: transparent;
  padding: 0 50px;
  filter:grayscale(100%);
  transition:filter .4s ease-in-out;
}
.marquee img:hover{
	filter:grayscale(0%);
}

.wrapper{
  display: flex;
  flex-direction: column;
  gap:var(--gap-carousel);
  margin: auto;
  max-width: 100vw;
}




.animated .animate {
	opacity:0;
    transition:all 1.2s ease-in-out;
}

.animated .animate.fade-top{
	transform:translate(0, -20px)
}

.animated .animate.fade-bottom{
	transform:translate(0, 20px)
}

.animated .animate.fade-left{
	transform:translate(-20px, 0)
}

.animated .animate.fade-right{
	transform:translate(20px, 0)
}

.animated.start .animate{
	opacity:1;
    transform:translate(0,0)
}

.animated.start .animate.d-200{
	transition-delay:300ms
}
.animated.start .animate.d-400{
	transition-delay:600ms
}
.animated.start .animate.d-600{
	transition-delay:900ms
}
.animated.start .animate.d-800{
	transition-delay:1200ms
}
.animated.start .animate.d-1000{
	transition-delay:1500ms
}
.animated.start .animate.d-1200{
	transition-delay:1800ms
}
.animated.start .animate.d-1400{
	transition-delay:2100ms
}
.animated.start .animate.d-1600{
	transition-delay:2400ms
}





.tns-outer>button{
	display:none;
}

.tns-outer .tns-nav{
	margin:20px auto;
    width:fit-content;
}

.tns-outer .tns-nav button{
	width:12px;
    height:12px;
    background-color:white;
    border-radius:999px;
    border:0.1px solid #141C2C;
    margin:5px;
    transition: all .2s ease-in-out;
}

.tns-outer .tns-nav button.tns-nav-active{
	background-color:#147484;
}