/*------------------------------------------------------- Spirex-Theme.css ---------------------------------*/
/*-------------------------------------------------------- Element Cursor ----------------------------------*/
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor: context-menu;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;} 
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

/* ========= ------------------------------------- */
.line {line-height: 1 !important;}
.line-2 {line-height: 1.2 !important;}
.line-3 {line-height: 1.3 !important;}
.line-4 {line-height: 1.4 !important;}
.line-5 {line-height: 1.5 !important;}
.line-6 {line-height: 1.6 !important;}

/* ========= ------------------------------------- */
.zoom-1 {zoom: 1.1;}
.zoom-2 {zoom: 1.2;}
.zoom-3 {zoom: 1.3;}
.zoom-4 {zoom: 1.4;}
.zoom-5 {zoom: 1.5;}
.zoom-6 {zoom: 1.6;}
.zoom {zoom: 1;}
.zoom-mm {zoom: 0.9;}
.zoom-sm {zoom: 0.7;}
.zoom-xm {zoom: 0.6;}
.zoom-xs {zoom: 0.5;}

/*-------------------------------------------------------- General Typography ------------------------------*/
.f8 {font-size: 8px;}
.f9 {font-size: 9px;}
.f10 {font-size: 10px;}
.f11 {font-size: 11px;}
.f12 {font-size: 12px;}
.f13 {font-size: 13px;}
.f14 {font-size: 14px;}
.f15 {font-size: 15px;}
.f16 {font-size: 16px;}
.f17 {font-size: 17px;}
.f18 {font-size: 18px;}
.f19 {font-size: 19px;}
.f20 {font-size: 20px;}
.f21 {font-size: 21px;}
.f22 {font-size: 22px;}
.f23 {font-size: 23px;}
.f24 {font-size: 24px;}
.f25 {font-size: 25px;}
.f26 {font-size: 26px;}
.f27 {font-size: 27px;}
.f28 {font-size: 28px;}
.f29 {font-size: 29px;}
.f30 {font-size: 30px;}
.f31 {font-size: 31px;}
.f32 {font-size: 32px;}
.f23 {font-size: 23px;}
.f34 {font-size: 34px;}
.f35 {font-size: 35px;}
.f36 {font-size: 36px;}
.f37 {font-size: 37px;}
.f38 {font-size: 38px;}
.f39 {font-size: 39px;}
.f40 {font-size: 40px;}
.f41 {font-size: 41px;}
.f42 {font-size: 42px;}

.f8-s {font-size: 8px !important;}
.f9-s {font-size: 9px !important;}
.f10-s {font-size: 10px !important;}
.f11-s {font-size: 11px !important;}
.f12-s {font-size: 12px !important;}
.f13-s {font-size: 13px !important;}
.f14-s {font-size: 14px !important;}
.f15-s {font-size: 15px !important;}

@media (max-width: 767px) {
    .f10-sm {font-size: 10px !important;}
    .f11-sm {font-size: 11px !important;}
    .f12-sm {font-size: 12px !important;}
    .f13-sm {font-size: 13px !important;}
    .f14-sm {font-size: 14px !important;}
    .f15-sm {font-size: 15px !important;}
    .f16-sm {font-size: 16px !important;}
    .f17-sm {font-size: 17px !important;}
    .f18-sm {font-size: 18px !important;}
    .f19-sm {font-size: 19px !important;}
    .f20-sm {font-size: 20px !important;}
}

/* ==== Font Style --------------------*/
.justify, .justify p {text-align: justify; text-justify: inter-word;}
.justify-word {text-align: justify; text-justify: inter-word;}

/* ==== ---------------------*/
.normal {font-weight: normal !important;}
.normalize {font-weight: 500 !important;}
.italic {font-style: italic !important;}
.bold {font-weight: bold !important;}
.bolder {font-weight: bolder !important;}
.bold-6 {font-weight: 600 !important;}
.bold-7 {font-weight: 700 !important;}
.bold-8 {font-weight: 800 !important;}
.bold-9 {font-weight: 900 !important;}
.font-inherit {font-size: inherit;} 

/* ==== ----------------------------------------*/
.uppercase {text-transform: uppercase !important;}
.lowercase {text-transform: lowercase !important;}
.capitalize {text-transform: capitalize !important;}

a.btn.lowercase, a.lowercase {text-transform: lowercase !important;}

/* ==== Border Radius ---------------------------------*/
.radius-0 {border-radius: 0;}
.border-1 {border-width: 1px;}
.border-2 {border-width: 2px;}
.border-3 {border-width: 3px;}
.border-4 {border-width: 4px;}

.round-left {
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}

.round-right {
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

.round-top {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.round-bottom {
    border-bottom-left-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}
 
/*-------------------------------------------------------- General Display ---------------------------------*/
/* ========== Flex Content ---------- */
.flex-content,
.flex-content-cover {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    position: relative;
    flex-wrap: wrap;
    gap: clamp(0.3rem, 1vw, 0.4rem);
    line-height: 1;
}

.flex-content-cover {
    width: 100% !important;  
    height:100% !important;
}

@media (max-width: 767px) {
    .flex-content {
        padding: 0.3em;
        gap: 0.44em !important;
        justify-content: center;
    }
}

/* ==== Content Style ---------------------------------*/
.cover,
.cover-flex {
    margin: 0;
  width: 100%; 
  height: 100%; 
  position: relative; 
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.cover-flex {
    display: inline-flex;
    flex-wrap: wrap;
}

.block {display: block; width: 100%; position: relative;}
.transparent {background: transparent !important; background-color: transparent !important;}
.relative {position: relative;}

.absolute,
.absolute-left,
.absolute-right,
.absolute-left-bottom,
.absolute-right-bottom {
    position: absolute;
    z-index: 98;
}

.absolute-left, .absolute-left-bottom {left: 1%;}
.absolute-right, .absolute-right-bottom {right: 1%;}
.absolute-left-bottom, .absolute-right-bottom {bottom: 1%;}

.ff {flex: 1 1 auto;}
.lighter {background-color: #e8e8e8;}
.text-lighter {color: #e8e8e8;}
.border_none {border: none !important;} 
.shadow-0 {box-shadow: none !important;}


/* ============== -------------------------------------------- */
.sw-01 {box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;}
.sw-02 {box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;}
.sw-03 {box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}
.sw-04 {box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;}
.sw-05 {box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;}
.sw-06 {box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px !important;}
.sw-07 {box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset !important;}
.sw-08 {box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px !important;}
.sw-09 {box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.06) 0px 1px 2px 0px !important;}

.sw-bottom-01 {box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;}
.sw-bottom-01 {box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;}
.sw-bottom-01 {box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;}


/* ==========  ---------- */
.overly-dark,
.overly-light {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1 !important;
}

.overly-dark {background: #000000a8;}
.overly-light {background: #fff;}

/* ==== Opacity ---------------------------------*/
.opacity-xm {opacity: 0.2 !important;}
.opacity-sm {opacity: 0.4 !important;}
.opacity-mm {opacity: 0.7 !important;}
.opacity {opacity: 1 !important;}

/* ==== Image Background Blend ------------------------------*/
.img-fill {
    width: 100%; 
    height: 100%;
    position: relative;
    object-fit: fill;
}

.img-full {display: block; width: 100%; position: relative;}
.img-block {display: block; position: relative;}
.img-bg-none {mix-blend-mode: multiply;}

@media (min-width:767px) {.img-bg-none-mm {mix-blend-mode: multiply;}}

/* ==== Element Hide / Show ---------------------------------*/
.none {display: none !important;}
.d-n {display: none;}

/* ==== Margins Style ---------------------------------*/
.mv-auto {margin: auto 0;}
.mp-0 {margin: 0; padding: 0;}
.mp-0-s {margin: 0 !important; padding: 0 !important;}

@media (min-width: 768px) {
    .mp-0-mm {margin: 0 !important; padding: 0 !important;}
}

@media (max-width: 768px) {
    .my-1-sm {margin: 0.6rem !important;}
    .mp-0-sm {margin: 0 !important; padding: 0 !important;}
}

/* ==== Padding Style ---------------------------------*/
.pn-1 {padding: 1px;}
.pn-2 {padding: 2px;}
.pn-3 {padding: 3px;}
.pn-4 {padding: 4px;}
.pn-5 {padding: 5px;}
.pn-6 {padding: 6px;}
.pn-7 {padding: 7px !important;}
.pn-8 {padding: 8px !important;}
.pn-9 {padding: 9px !important;}
.pn-10 {padding: 10px !important;}
.pn-11 {padding: 11px !important;}
.pn-12 {padding: 12px !important;}
.pn-13 {padding: 13px;}
.pn-14 {padding: 14px;}
.pn-15 {padding: 15px;}
.pn-16 {padding: 16px;}

.pnx-2 {padding-left: 2px; padding-right: 2px;}
.pnx-3 {padding-left: 3px; padding-right: 3px;}
.pnx-4 {padding-left: 4px; padding-right: 4px;}
.pnx-5 {padding-left: 5px; padding-right: 5px;}
.pnx-6 {padding-left: 6px; padding-right: 6px;}
.pnx-7 {padding-left: 7px; padding-right: 7px;}
.pnx-8 {padding-left: 8px; padding-right: 8px;}
.pnx-9 {padding-left: 9px; padding-right: 9px;}
.pnx-10 {padding-left: 10px; padding-right: 10px;}
.pnx-11 {padding-left: 11px; padding-right: 11px;}
.pnx-12 {padding-left: 12px; padding-right: 12px;}

/*--------------------------------------------------------Min Height ------------------------------*/
.min-2 {min-height: 2rem;}
.min-4 {min-height: 4rem;}
.min-6 {min-height: 6rem;}
.min-8 {min-height: 8rem;}
.min-10 {min-height: 10rem;}

/* ==== Background Gradients ---------------------------------*/
.white-up {background: linear-gradient(transparent, #ffffff);}
.white-down {background: linear-gradient(#ffffff, transparent);}
.white-left {background: linear-gradient(to left, #ffffff 0%, transparent 50%);}
.white-right {background: linear-gradient(to right, #ffffff, transparent 70%);}

/* ==== -----*/
.light-up {background: linear-gradient(transparent, #efefef);} 
.light-down {background: linear-gradient(#efefef, transparent);}
.light-left {background: linear-gradient(to left, #efefef 0%, transparent 50%);}
.light-right {background: linear-gradient(to right, #efefef 0%, transparent 50%);}

.light-white {background: linear-gradient(#efefef 30%, #ffffff) !important;}
.white-light {background: linear-gradient(#ffffff 30%, #efefef) !important;}

@media (max-width: 767px) {
    .bg-white-sm {background: #ffffff !important;}
    .light-up-sm {background: linear-gradient(transparent, #efefef) !important;}
}

/* ==== -----*/
.light-split {background: linear-gradient(to right, #fff 0%, #dfdede 50%, #f9f9f9 50%, #efefef 100%);}

/* ==== Background Images ---------------------------------*/
.bg-cover {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.bg-50-left {
/*  background-image: url('');*/
    background-repeat: no-repeat;
    background-size: 50% 100%;
    background-position: left top;
}

.bg-50-right {
/*  background-image: url('');*/
    background-repeat: no-repeat;
    background-size: 50% 100%;
    background-position: right top;
}

.bg-image-2 {
/*  background-image: url(''), url('');*/
    background-repeat: no-repeat, no-repeat;
    background-size: 50% 100%;
    background-position: left top, right top;
}

/* ------------------------------------------------------------------------ Top Scroll Button ----------------- */
#Topbtn {
    display: none;
    width: 3rem;
    position: fixed;
    bottom: 24px;
    right: 30px;
    color: var(--white);
    font-size: 1.3rem;
    font-weight: bold !important;
    padding: 7px;
    aspect-ratio: 1 / 1 !important;
    background: var(--grad-1);
    border: 1.5px solid var(--cl-1);
    border-radius: 3px;
    outline: 1.5px solid var(--white);
    transition: background, outline, box-shadow 0.4s ease;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 4px, rgba(0, 0, 0, 0.45) 0px 6px 14px, rgba(0, 0, 0, 0.45) 0px 12px 18px;
    z-index: 99;
    line-height: 1;
}

#Topbtn:hover {
    background: var(--grad-2);
    outline: 1.5px solid var(--white) !important;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.45) 0px 8px 17px, rgba(0, 0, 0, 0.45) 0px 16px 28px !important;
}

/*-------------------------------------------------------- Blink Animation -------------------------*/
.blink {
  font-family: cursive;
  animation: blink 2s linear infinite;
}

@keyframes blink {
  0% {opacity: 0;}
  50% {opacity: .5;}
  100% {opacity: 1;}
}

/*-------------------------------------------------------- Fade Animation -------------------------*/
.block-fade-in {
    display: block;
    position: relative;
}

/* ==== -----*/
.fade-in,
.block-fade-in { 
  animation-name: FadeIn;
  animation-duration: 0.5s ease;
  transition-timing-function: linear;
}

@keyframes FadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-moz-keyframes FadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-webkit-keyframes FadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-o-keyframes FadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-ms-keyframes FadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


/*-------------------------------------------------------------------*/
.fade-out { 
  animation-name: Fadeout;
  animation-duration: 0.2s;
  transition-timing-function: linear;
}

@keyframes Fadeout {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes Fadeout {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-webkit-keyframes Fadeout {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes Fadeout {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-ms-keyframes Fadeout {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

/* ==== Content Visibility / Display -----------------------------------------------------------------------*/
.db-sm {display: none;}
.dn-md {display: none;}
.db-mm {display: none;}
.dl-sm {display: none;}
.dl-lg {display: none;}
.dl-xm {display: none;}
.dl-xl {display: none;}
.db-xl {display: none;}
.dln-sm {display: none;}

.w-90 {width: 90%;}
.w-80 {width: 80%;}
.w-70 {width: 70%;}
.w-60 {width: 60%;}


.btn-responsive span {flex: 1 1 auto;}
.btn-responsive span:first-of-type {display: none;}


/*-------------------------------------------------------- Media Queries -----------------------------------*/
@media (max-width: 1400px) and (min-width: 1020px) {
    .dn-lg {display: none !important;}
    .dl-lg {display: inline-block;}
}

@media (max-width: 1260px) and (min-width: 980px) {
    .dn-mm {display: none !important;}
    .db-mm {display: block;}
}

@media (min-width: 1260px) {
    .dl-xl {display: inline;}
    .db-xl {display: block !important;}
    .dn-xl {display: none !important;}
}

@media (min-width: 767px) {
    .w-30-sm {width: 30% !important;}
    .white-mm {color: #ffffff;}
    .uppercase-mm {text-transform: uppercase !important;}
}

/* ==== -----------------------------*/
@media (max-width: 769px) {

    .btn-responsive span:first-of-type {display: inline;}
    .btn-responsive span:last-of-type {display: none;}

    .dn-sm {display: none !important;}
    .db-sm {display: block;}
    .dln-sm {display: inline-block;}
    .dl-sm {display: inline !important;}

    .my-sm {margin: auto;}
    .m-0-sm {margin: 0;}
    .m-0-sm-s {margin: 0 !important;}
    .mb-m-sm {margin-bottom: 0.8rem !important;}
    .mb-lg-sm {margin-bottom: 1rem !important;}
    .mb-xl-sm {margin-bottom: 1.2rem !important;}

    .center-sm {text-align: center !important;}
    .block-sm {width: 100% !important;text-align: center;}

    .full-sm {width: 100% !important;}
    .half-sm {width: 50% !important;} 

    .w-100-sm {width: 100% !important;}
    .w-90-sm {width: 90% !important;}
    .w-80-sm {width: 80% !important;}
    .w-70-sm {width: 70% !important;}
    .w-60-sm {width: 60% !important;}
    .w-50-sm {width: 50% !important;}

    .bg-50-right, .bg-50-left {background: #fff;background-image: none !important;}
    .sw-0-sm {box-shadow: none !important;}
    .border-0-sm {border: none !important;}

    .justify-sm {text-align: justify; text-justify: inter-word;}

    .pn-0-sm-s {padding: 0 !important;}
    .pn-0-sm {padding: 0;}

    .pb-2-sm {padding-bottom: 2px !important;}
    .pb-4-sm {padding-bottom: 4px !important;}
    .pb-6-sm {padding-bottom: 6px !important;}
    .pb-8-sm {padding-bottom: 8px !important;}

    .pn-2-sm {padding: 2px !important;}
    .pn-3-sm {padding: 3px !important;}
    .pn-4-sm {padding: 4px !important;}
    .pn-5-sm {padding: 5px !important;}
    .pn-6-sm {padding: 6px !important;}
    .pn-7-sm {padding: 7px !important;}
    .pn-8-sm {padding: 8px !important;}
}

/* ==== -------------------------------*/
@media (max-width: 520px) {
    .dn-xm {display: none !important;}
    .dl-xm {display: inline !important;}
}

/* ==== ------------------------------*/
@media (max-width: 420px) {
    .dn-xs {display: none !important;}
}

/* ==== ------------------------------*/
@media (max-width: 360px) {
    .dn-xxs {display: none !important;}
}