/* Root */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
	--bg-color: #091929;
	--text-base: #eee;
	--primary-color: #71ff53;
	--primary-color-hover: #ffc66e;
	--primary-button-text: #000;
	--primary-text: #68ff57;
	--secondary-bg: #141a2a ;
	--footer-bg: #0b101e;
}
html, body{ background-color: var(--bg-color); position: relative;}
body{ font-family: "Inter"; color: var(--text-base); font-size: 14px; line-height: 1.6; font-weight: 400; padding: 0; margin: 0; -webkit-text-size-adjust: none;}
a{ cursor: pointer; color: #fff; text-decoration: none !important;}
a:hover{ color: var(--primary-text);}
.btn{ font-weight: 500; font-size: 1.1em; padding: .7rem 1.2rem; border-radius: .4rem; border: none; opacity: .95; color: #fff; white-space: nowrap;}
button:hover, .btn:hover{ color: #fff; opacity: 1;}
.btn-outline{ border: 1px solid #ffffff80;}
.btn-outline-light{ border: 1px solid rgba(255,255,255,.7); background-color: transparent !important; color: #fff !important;}
.btn-outline:hover, .btn-outline:focus{ border: 1px solid #fff;}
.btn-light{ color: #000 !important; background-color: #fff !important;}
/* .btn-live{ background-color: #d13535 !important; color: #fff !important;} */
.btn-live{ background-color: #e74040 !important; color: #fff !important; box-shadow: 0 4px 10px 0 #6d151536 !important; border: 1px solid #cf3f3f !important;}
.btn-wait{ color: #000 !important; border: 1px solid #00000030 !important; background-color: #fff !important; box-shadow: 0 3px 3px 0 #00000010 !important;}
.btn-bet{ color: #000 !important; background-color: #FFDD75; background-image: linear-gradient(0deg, #FFDD75 0%, #FFE7AC 100%); box-shadow: 0 5px 10px 0 rgba(97,81,37,0.21) !important; border: 1px solid #cfaf51 !important;}
.btn-rounded{ border-radius: 3rem !important;}
.btn:focus{ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.09);}
.btn-zero:focus{ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.09);}
.btn-primary{ background-color: var(--primary-color) !important; color: var(--primary-button-text) !important; border: 1px solid #64f057 !important; box-shadow: 0 5px 10px 0 #77a93b7a;}
.btn-primary:focus{ box-shadow: 0 0 0 3px rgba(255,255,255,.1);}
.btn-quaytay{  background: rgb(100, 252, 89); background: linear-gradient(35deg, rgb(100, 252, 89) 0%, rgb(140, 255, 99) 100%); color: #000 !important; border: 1px solid #48e65c !important; box-shadow: 0 5px 10px 0 #77a93b7a;}
.btn-quaytay:hover{ box-shadow: 0 10px 20px 4px #77a93b7a;}
.btn-secondary{ background-color: var(--secondary-bg) !important; color: #fff;}
.btn-secondary:focus{ box-shadow: 0 0 0 3px rgba(255,255,255,.1);}
.btn{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.btn-xs{font-size: 12px; line-height: 1.2; padding: .2rem .4rem; border-radius: .2rem;}
.btn-sm{font-size: 13px; padding: .4rem .8rem;}
.btn-lg{font-size: 16px; padding: .8rem 1.6rem;}
.btn-xl{font-size: 18px; padding: 1.2rem 2.5rem; font-weight: 600; border-radius: 1rem;}
.btn-circle{ padding: 0; width: 44px; height: 44px; border-radius: 50%;}
.btn-circle.btn-sm{ width: 32px; height: 32px;}
.btn-circle.btn-xs{ width: 21px; height: 21px;}
.btn-circle.btn-lg{ width: 50px; height: 50px;}
.badge{ font-weight: 400 !important;}
.heading-xl{ font-size: 1.8em; font-weight: 600; line-height: 1.6; margin-bottom: 1.25rem; color: #fff;}
.heading-md{ font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 1rem; color: #fff;}
.heading-sm{ font-size: 14px; font-weight: 500; line-height: 1.5; margin-bottom: .5rem; color: #fff;}
.heading-xs{ font-size: 13px; font-weight: 500; line-height: 1.5; margin-bottom: .5rem; color: #fff;}
.o-style{ list-style: none;}
.direct-column{ flex-direction: column;}
.rounded{ border-radius: 0.75rem !important;}
.gap-md{ gap: 1rem !important;}
.gap-sm{ gap: .5rem !important;}
.gap-xs{ gap: .25rem !important;}
.small-text{ font-size: .9em !important;}
.text-base{ color: var(--text-base) !important;}
.item-flex{ display: flex; align-items: center; gap: .5rem;}
b,strong{font-weight: 500;}
.badge-live{ font-size: .8em; line-height: 1; padding: .2rem; border: 1px solid #fff; border-radius: 4px;}
h1, h2, h3, h4, h5, h6{font-weight: 500;}
small{ font-size: 11px;}
.highlight-text, .text-primary{ color: var(--primary-text) !important;}
.modal-blur{ background-color: var(--modal-blur); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);}
.z-up{ position: relative; z-index: 3;}
/* Elements */
#x-index{ position: relative; width: 100%; overflow-x: hidden;}
.container{ max-width: 1200px; width: 100%; padding: 0 20px;}
header{ padding: 2rem 3rem; display: block; width: 100%;}
#logo{ display: inline-block; flex-shrink: 0; flex-grow: 1;}
#logo img{ height: 70px; width: auto;}
.first-screen{ background-image: url(/images/background.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat; min-height: 100vh; padding: 4rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.first-screen .container{ max-width: 1000px;}
#center{ padding: 3rem; background-color: #284d7c; border-radius: 2rem; overflow: hidden; padding-right: 460px; position: relative; box-shadow: 0 40px 40px 0 rgba(0,0,0,.2);}
#center .description{ margin-bottom: 2.5rem; text-align: justify;}
#center .content-img{ position: absolute; top: 0; right: 0; bottom: 0; width: 500px; mask-image: linear-gradient(to right, transparent 0,black 20%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to top, transparent 0,black 20%, black 80%, transparent 100%);}
#center .content-img img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; opacity: .8; filter: grayscale(.2); mask-image: linear-gradient(to right, transparent 0%,black 40%, black 100%);}
.second-screen .container{ padding: 3rem 20px;}
footer{ padding-top: 3rem; text-align: center;}
#about{ position: relative; font-size: 1em; line-height: 1.6;}
#about p{ line-height: 1.6; margin-bottom: 1rem;}
#about h1{ font-size: 1.8em; font-weight: 600; margin: 1rem 0; color: var(--primary-text);}
#about h2{ font-size: 1.6em; font-weight: 600; margin: 1rem 0; color: var(--primary-text);}
#about h3{ font-size: 1.4em; font-weight: 500; margin: 1rem 0; color: #fff;}
#about h4{ font-size: 1.2em; font-weight: 500; margin-bottom: .5rem; color: #fff;}
#about h5{ font-size: 1.1em; font-weight: 500; margin-bottom: .5rem; color: #fff;}

#footer{ background-color: transparent;}
#footer .container{ position: relative; text-align: center; padding: 3rem 1rem;}
#footer .s-logo{ margin-bottom: 1.5rem; display: inline-block;}
#footer .s-logo img{ height: 50px;}
#footer .footer-menu{ display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.5rem;}
#footer .footer-menu a{ line-height: 1.5em; white-space: nowrap; margin: 0 .8rem;}


@media screen and (max-width: 991px){
    .first-screen{ min-height: auto; padding: 0 0 3rem 0;}
    header{ padding: 2rem 0}
    #center .content-img{ width: 360px;}
    #center{ padding-right: 340px;}
}
@media screen and (max-width: 799px){
    #center .content-img{ display: none;}
    #center{ padding: 2rem !important;}
    #center .buttons .btn{ width: 100%;}
    #center .buttons .btn .item-flex{ width: 100%; justify-content: center;}
    .heading-xl{ font-size: 1.6em;}
}
@media screen and (max-width: 639px){
    header{ text-align: center;}
    #logo img{ height: 50px;}
}
@media screen and (max-width: 479px){

}