@font-face {font-family: 'FS Albert Pro Thin'; src: url('FS Albert Font/FSAlbertPro-Thin.woff2') format('woff2'), url('FS Albert Font/FSAlbertPro-Thin.woff') format('woff'), url('FS Albert Font/FSAlbertPro-Thin.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'FS Albert Pro Thin Italic'; src: url('FS Albert Font/FSAlbertPro-ThinItalic.woff2') format('woff2'), url('FS Albert Font/FSAlbertPro-ThinItalic.woff') format('woff'), url('FS Albert Font/FSAlbertPro-ThinItalic.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'FS Albert Pro Light'; src: url('FS Albert Font/FSAlbertPro-Light.woff2') format('woff2'), url('FS Albert Font/FSAlbertPro-Light.woff') format('woff'), url('FS Albert Font/FSAlbertPro-Light.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'FS Albert Pro Light Italic'; src: url('FS Albert Font/FSAlbertPro-LightItalic.woff2') format('woff2'), url('FS Albert Font/FSAlbertPro-LightItalic.woff') format('woff'), url('FS Albert Font/FSAlbertPro-LightItalic.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'FS Albert Pro Regular'; src: url('FS Albert Font/FSAlbertPro.woff2') format('woff2'), url('FS Albert Font/FSAlbertPro.woff') format('woff'), url('FS Albert Font/FSAlbertPro.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'FS Albert Pro Italic'; src: url('FS Albert Font/FSAlbertPro-Italic.woff2') format('woff2'), url('FS Albert Font/FSAlbertPro-Italic.woff') format('woff'), url('FS Albert Font/FSAlbertPro-Italic.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'FS Albert Pro Bold'; src: url('FS Albert Font/FSAlbertPro-Bold.woff2') format('woff2'), url('FS Albert Font/FSAlbertPro-Bold.woff') format('woff'), url('FS Albert Font/FSAlbertPro-Bold.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'FS Albert Pro Bold Italic'; src: url('FS Albert Font/FSAlbertPro-BoldItalic.woff2') format('woff2'), url('FS Albert Font/FSAlbertPro-BoldItalic.woff') format('woff'), url('FS Albert Font/FSAlbertPro-BoldItalic.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'FS Albert Pro Extra Bold'; src: url('FS Albert Font/FSAlbertPro-ExtraBold.woff2') format('woff2'), url('FS Albert Font/FSAlbertPro-ExtraBold.woff') format('woff'), url('FS Albert Font/FSAlbertPro-ExtraBold.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}

.font-FSAlbertPro-Thin {font-family: 'FS Albert Pro Thin', sans-serif;}
.font-FSAlbertPro-ThinItalic {font-family: 'FS Albert Pro Thin Italic', sans-serif;}
.font-FSAlbertPro-Light {font-family: 'FS Albert Pro Light', sans-serif;}
.font-FSAlbertPro-LightItalic {font-family: 'FS Albert Pro Light Italic', sans-serif;}
.font-FSAlbertPro {font-family: 'FS Albert Pro Regular', sans-serif;}
.font-FSAlbertPro-Italic {font-family: 'FS Albert Pro Italic', sans-serif;}
.font-FSAlbertPro-Bold {font-family: 'FS Albert Pro Bold', sans-serif;}
.font-FSAlbertPro-BoldItalic {font-family: 'FS Albert Pro Bold Italic', sans-serif;}
.font-FSAlbertPro-ExtraBold {font-family: 'FS Albert Pro Extra Bold', sans-serif;}

*{font-family: 'FS Albert Pro Regular', sans-serif;}

.crossed{background: linear-gradient(to top left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%),
                     linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); }

.btn-custom {color:#FFFFFF;font-size:18px;border:1px solid #bdc3c7}
.btn-custom:hover {color:#FFFFFF;border:1px solid #E6E6E6}

.button-36{background-image:linear-gradient(92.88deg, #7E82BD 9.16%, #5F64A2 43.89%, #6B71B8 64.72%);border-radius:8px;border-style:none;box-sizing:border-box;color:#FFFFFF;cursor:pointer;flex-shrink:0;font-size:20px;font-weight:500;padding:15px 70px 10px 30px;-webkit-user-select:none;
           font-family:"Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;text-shadow:rgba(0, 0, 0, 0.25) 0 3px 8px;transition:all .5s;user-select:none;text-align:center;touch-action:manipulation;}
.button-36:hover { box-shadow: rgba(106, 90, 205, 0.5) 0 1px 30px; transition-duration: .1s;}

.image-bg {background-size: cover; background-repeat: no-repeat;color:#fff;position:relative;}
.image-bg .section-title h1 {color:#fff;}

  .BTNSlider {text-decoration:none;line-height:1;border-radius:1.5rem;overflow:hidden;position:relative;box-shadow:10px 0px 20px rgba(0,0,0,.1);background-color:#fff;color:#121212;border:none;cursor:pointer;display:inline-block;margin:10px}
  .BTNSlider-decor { position: absolute; inset:0; background-color:#a8beed; transform: translateX(-100%); transition: transform .3s; z-index: 0;}
  .BTNSlider-content { display: flex; align-items: center; font-weight: 600; position: relative; overflow: hidden;}
  .BTNSlider_icon { width: 70px; height: 50px; background-color:#a8beed; display: grid; place-items: center;} .BTNSlider_icon img{width:100%}
  .BTNSlider_text { display: inline-block; transition: color .2s; padding: 2px 1.5rem 2px; padding-left: .75rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
  .BTNSlider:hover .BTNSlider_text { color: #fff;}
  .BTNSlider:hover .BTNSlider-decor { transform: translate(0);}

/*Responsive Div*/
.DivTableLeft         { border:1px solid gray; padding: 10px; text-align:center; cursor:default; display:inline-block; border-radius:8px 0px 0px 8px; margin-left:-5px; overflow:hidden; margin:1px 1px 1px 1px;} 
.DivTableLeft:hover   { box-shadow: inset 0 0 0 1px gray; }
.DivTableCenter       { border:1px solid gray; padding: 10px; text-align:center; cursor:default; display:inline-block; border-radius:0px 0px 0px 0px; margin-left:-5px; overflow:hidden; margin:1px 1px 1px 1px;} 
.DivTableCenter:hover { box-shadow: inset 0 0 0 1px gray; }
.DivTableRight        { border:1px solid gray; padding: 10px; text-align:center; cursor:default; display:inline-block; border-radius:0px 8px 8px 0px; margin-left:-5px; overflow:hidden; margin:1px 1px 1px 1px;} 
.DivTableRight:hover  { box-shadow: inset 0 0 0 1px gray; }

/*Shake Text*/
.Shake { padding:1px 5px 1px 10px; text-transform: uppercase; letter-spacing: 6px; background-size: 120% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; 
         -ms-background-clip: text; -ms-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; background-image: linear-gradient(45deg, #7794ff, #44107A, #FF1361, #FFF800); 
         animation: .8s shake infinite alternate; }
@keyframes shake { 0% { transform: skewX(-15deg); } 5% { transform: skewX(15deg); } 10% { transform: skewX(-15deg); } 15% { transform: skewX(15deg); } 20% { transform: skewX(0deg); } 100% { transform: skewX(0deg); } }


/* Pop up */
#snackbar{visibility:hidden;width:250px;margin-left:-120px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;left:50%;right:50%;bottom:30px;font-size:17px;}
#snackbar.show{visibility:visible;-webkit-animation:fadein 0.5s;animation:fadein 0.5s;}
@-webkit-keyframes fadein  {from { bottom: 0;    opacity: 0;} to {bottom: 30px; opacity: 1;}} @keyframes fadein  {from { bottom: 0;    opacity: 0;} to {bottom: 30px; opacity: 1;}}
@-webkit-keyframes fadeout {from { bottom: 30px; opacity: 1;} to {bottom: 0;    opacity: 0;}} @keyframes fadeout {from { bottom: 30px; opacity: 1;} to {bottom: 0;    opacity: 0;}}


/* Fireworks */
@keyframes firework { 0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; } 50% { width: 0.5vmin; opacity: 1; } 100% { width: var(--finalSize); opacity: 0; }}
@keyframes fireworkPseudo { 0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; } 50% { width: 0.5vmin; opacity: 1; } 100% { width: var(--finalSize); opacity: 0; }}
.firework,.firework::before,.firework::after{
 --initialSize:0.7vmin;--finalSize:45vmin;--particleSize:0.4vmin;--color1:yellow;--color2: khaki; --color3: white; --color4: lime; --color5: gold; --color6: mediumseagreen; --y: -30vmin; --x: -50%; --initialY: 60vmin; content:""; animation: firework 2s infinite; position:absolute;
 top: 30%; left: 40%; transform: translate(-50%, var(--y)); width: var(--initialSize); aspect-ratio: 1; background: 
 radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
 radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
 radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
 radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
 /* bottom right */ radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,  radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%, 
                    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
 /* bottom left  */ radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%, 
                    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
                    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
 /* top left     */ radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,  radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%, 
                    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
                    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
 /* top right    */ radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%, 
                    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
                    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%; background-size: var(--initialSize) var(--initialSize); background-repeat: no-repeat;
}
.firework::before { --x: -50%; --y: -50%; --initialY: -50%; transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg); animation: fireworkPseudo 2s infinite;}
.firework::after { --x: -50%; --y: -50%; --initialY: -50%; transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); animation: fireworkPseudo 2s infinite;}
.firework:nth-child(2) { --x: 30vmin;}
.firework:nth-child(2),.firework:nth-child(2)::before,.firework:nth-child(2)::after {--color1: pink;--color2: violet;--color3: fuchsia;--color4: orchid;--color5: plum;--color6: lavender; --finalSize: 40vmin; left: 30%; top: 35%; animation-delay: -0.25s;}
.firework:nth-child(3) {--x: -30vmin;--y: -50vmin;}
.firework:nth-child(3),.firework:nth-child(3)::before,.firework:nth-child(3)::after{--color1:cyan;--color2:lightcyan;--color3:lightblue;--color4:PaleTurquoise;--color5:SkyBlue;--color6:lavender;--finalSize:35vmin;left:50%;top:40%;animation-delay:-0.4s;}