body,
html {
    margin: 0;
    font-size: 16px;
    overflow-x: hidden;
    font-family: "Roboto", sans-serif;
    background: #faf8ef;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

input:focus,
button:focus,
textarea:focus {
    outline: none;
}

img {
    max-width: 100%;
}

a:hover,
a:focus {
    text-decoration: none;
}

a {
    text-decoration: none;
}

.top-nav-sec {
    padding: 1rem 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
}

.top-nav-col {
    display: flex;
    align-items: center;
    justify-content: center; /* centrování */
    border-bottom: 2px solid #C9C7CF;
    padding: 1rem 0;
}

.top-nav-inner-two {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem; /* více místa mezi ikonou a textem */
}

.top-nav-inner-two p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1C0D37;
    text-align: center;
}

.top-nav-inner-two button {
    background: transparent;
    border: 0;
    padding: 0;
    transition: all .3s ease;
    cursor: pointer;
}

.top-nav-inner-two button:hover {
    transform: scale(1.25);
}

.top-nav-inner-two button img {
    width: 1.5rem;
    height: 1.5rem;
}


.hero-sec {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 35rem;
}

.hero-logo {
    margin-bottom: 3rem;
}

.hero-logo a img {
    width: 24rem;
}

.hero-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.875rem;
    margin-bottom: 3rem;
}

.download-btn {
    background-image: url(../images/btnbg.png);
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 100% 100%;
    height: 3rem;
    padding: 0.25rem 2.5rem;
    border: 0;
    transition: .3s;
}

.download-btn:hover {
    transform: scale(1.1);
}

.download-btn span {
    margin: 0;
    color: #1C0D37;
    font-size: 1rem;
    font-weight: 500;
}

.join-btn {
    background-image: url(../images/btnbg.png);
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 100% 100%;
    height: 3rem;
    padding: 0.25rem 2.5rem;
    border: 0;
    transition: .3s;
}

.join-btn:hover {
    transform: scale(1.1);
}

.join-btn span {
    margin: 0;
    color: #1C0D37;
    font-size: 1rem;
    font-weight: 500;
}

.hero-content {
    background: #F1F1F6;
    padding: 1rem 2.75rem;
    border-radius: 0.5rem;
    display: inline-block;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.hero-content h6 {
    color: #584A74;
    font-size: 1rem;
    font-weight: 500;
}

.hero-content p {
    color: #584A74;
    margin: 0;
    font-size: 1.25rem;
}

.tile-sec {
    background-image: url(../images/tile1.png);
    background-size: 100% 100%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    padding: 2.125rem 0;
    margin-top: -2.25rem;
    position: relative;
    z-index: 9;
}

.tile-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tile-content p {
    font-size: 1.5rem;
    margin: 0;
    background: linear-gradient(to right, #000000, #318111);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.125;
    display: inline-block;
}

.tile-content h6 {
    font-size: 2rem;
    margin: 0;
    font-weight: 500;
    background: linear-gradient(to right, #000000, #318111);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.intro-sec {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
}

.intro-img {
      width: 100%;
  display: block;
  margin: 0 auto;
    height: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    z-index: 99;
}

.intro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0.5rem;
    transition: transform .5s;
    overflow: hidden;
}

.intro-img img:hover {
    transform: scale(1.10);
    transition: transform .5s;
}

.intro-content {
    background: #F1F1F6;
    padding: 2.5rem 2.5rem;
    border-radius: 0.5rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-left: 1rem;
    min-height: 26rem;
}

.intro-content h1 {
    font-size: 2.25rem;
    font-weight: 500;
    background: linear-gradient(to right, #519541, #3f3b17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    display: inline-block;
    line-height: 1.1;
}

.intro-content p {
    color: #000000
    margin-bottom: 1rem;
    font-size: 1.075rem;
    line-height: 1.375;
}

.intro-content h6 {
    color: #000000
    margin-bottom: 1rem;
    font-size: 1.075rem;
    font-weight: 800;
    line-height: 1.25;
}

.intro-content p b {
    font-weight: 600;
}

.concept-col {
    background: #F1F1F6;
    padding: 2.5rem 2.5rem;
    border-radius: 0.5rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-top: 3rem;
}

.concept-span {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.concept-span p {
    font-size: 1.5rem;
    margin: 0;
    background: linear-gradient(to right, #519541, #3f3b17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.125;
    display: inline-block;
}

.concept-span h6 {
    font-size: 2rem;
    margin: 0;
    font-weight: 750;
	background: linear-gradient(to right, #519541, #3f3b17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.concept-inner {
    max-width: 75%;
    margin: auto;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.concept-btns {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.concept-btns a {
    width: 100%;
}

.concept-btn1 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #3E2866, #160F2B);
    transition: .3s;
}

.concept-btn1 img {
    width: 1.5rem;
    height: 1.5rem;
}

.concept-btn2 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #8D5CE2, #6B46D8);
    transition: .3s;
}
.concept-btns button{
    cursor: initial !important;
}

.concept-btn2 img {
    width: 1.5rem;
    height: 1.5rem;
}

.concept-btn3 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #3E2866, #160F2B);
    transition: .3s;
}


.concept-btn3 img {
    width: 1.5rem;
    height: 1.5rem;
}

.concept-btn4 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #8D5CE2, #6B46D8);
    transition: .3s;
}


.concept-btn4 img {
    width: 1.5rem;
    height: 1.5rem;
}

.concept-btn5 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #3E2866, #160F2B);
    transition: .3s;
}


.concept-btn5 img {
    width: 1.5rem;
    height: 1.5rem;
}

.concept-btn6 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #8D5CE2, #6B46D8);
    transition: .3s;
}


.concept-btn6 img {
    width: 1.5rem;
    height: 1.5rem;
}

.concept-btn7 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #3E2866, #160F2B);
    transition: .3s;
}


.concept-btn7 img {
    width: 1.5rem;
    height: 1.5rem;
}

.concept-btn8 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #8D5CE2, #6B46D8);
    transition: .3s;
}

.concept-btn8 img {
    width: 1.5rem;
    height: 1.5rem;
}

.concept-btn9 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #3E2866, #160F2B);
    transition: .3s;
}


.concept-btn9 img {
    width: 1.5rem;
    height: 1.5rem;
}

.concept-btn10 {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.875rem 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-image: linear-gradient(to right, #8D5CE2, #6B46D8);
    transition: .3s;
}


.concept-btn10 img {
    width: 1.5rem;
    height: 1.5rem;
}

.container {
    position: relative;
    z-index: 9;
}

.layer1 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.choose-img {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.choose-img {
    height: initial;
}

.choose-img img {
    height: initial;
}

.choose-content {
    text-align: center;
}

.choose-content p {
    padding-right: 0;
    max-width: 90%;
    margin: auto;
    margin-bottom: 1rem;
}

.starter-content i {
    color: #000000
    margin-bottom: 1rem;
    font-size: 1.075rem;
    padding-right: 1rem;
    line-height: 1.375;
    display: block;
}

.corner-img {
  position: absolute;
  bottom: 10px; /* vzdálenost od spodního okraje */
  right: 10px;  /* vzdálenost od pravého okraje */
  width: 80px;  /* nastav velikost podle potřeby */
  height: auto;
  opacity: 0.9; /* volitelné – průhlednost */
}

.intro-content ul {
    color: #000000
    margin-bottom: 1rem;
    font-size: 1.075rem;
    padding-right: 1rem;
    line-height: 1.375;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.starter-content {
    margin-left: 0;
    margin-right: 1rem;
	position: relative;
}

.drop-img {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.drop-img {
    height: initial;
}

.drop-img img {
    height: initial;
}

.tips-img {
    height: initial;
}

.tips-img img {
    height: initial;
}

.tips-content {
    margin-left: 0;
    margin-right: 1rem;
}

.tips-content p b {
    font-weight: 700;
}

.layer2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 15rem;
    width: 100%;
}

.tile-sec2x {
    margin-top: -1rem;
}

.container-sec {
    margin-bottom: 12rem;
}

.footerimg img{
width: 50%;
  display: block;
  margin: 0 auto;
border-radius: 20px;
}

.story-img {
    height: initial;
}

.story-img img {
    height: initial;
}

.story-img p {
    color: #000000
    margin-top: 1rem;
    font-size: 1.075rem;
    line-height: 1.375;
    font-weight: 500;
    margin-bottom: 0;
}

.horse-inner {
    margin: 0 0.25rem;
    margin-top: 3rem;
}

.horse-img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 99;
    border-radius: 0.5rem;
    overflow: hidden;
}

.horse-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform .5s;
}

.horse-inner img:hover {
    transform: scale(1.05);
    transition: transform .5s;
}

.horse-inner p {
    color: #000000
    margin-top: 1rem;
    font-size: 1.075rem;
    line-height: 1.375;
    font-weight: 500;
    margin-bottom: 0;
}

.choose-img-inner {
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    z-index: 99;
}

.modification-content {
    margin-left: 0;
    text-align: center;
    min-height: initial;
}

.modification-content p {
    max-width: 72%;
    margin: auto;
    margin-bottom: 1rem;
}

.modification-content h6 {
    max-width: 72%;
    margin: auto;
    margin-bottom: 1rem;
}

.biological-content {
    min-height: initial;
}

.buff-content {
    margin-left: 0;
    margin-right: 1rem;
}

.monster-content {
    min-height: 25rem;
}

.saving-content {
    min-height: 23rem;
}

.cultivation-content {
    min-height: 29rem;
}

.intro-sec4x .layer2 {
    top: 33%;
}

.layer3 {
    position: absolute;
    left: 0;
    right: 0;
    top: -1rem;
    width: 65%;
    margin: auto;
}

.tile-sec3x {
    margin-bottom: -1rem;
}

.under-layer-three-row {
    margin-top: 11.5rem;
}

.tile-sec4x {
    background-image: url(../images/tile2.png);
    background-size: 100% 100%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    padding: 2.125rem 0;
    margin-top: -1rem;
    position: relative;
    z-index: 9;
}

.tile-content4x {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tile-content4x h6 {
    font-size: 2rem;
    margin: 0;
    font-weight: 500;
    background: linear-gradient(to right, #519541, #3f3b17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.layer4 {
    position: absolute;
    left: 0;
    right: 0;
    top: -1rem;
    width: 100%;
}

.under-layer-four-row {
    margin-top: 19rem;
}

.priority-content p {
    max-width: 90%;
}


.tile-sec5x {
    background-image: url(../images/tile3.png);
    background-size: 100% 100%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    padding: 2.125rem 0;
    margin-top: -1rem;
    position: relative;
    z-index: 9;
}

.layer5 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
}

.spin-img {
    text-align: center;
}

.spin-img {
    width: 65%;
    margin: auto;
}

.spin-img img {
    width: 100%;
}

.spin-img-inner {
    margin-bottom: 4rem;
}

.gear-content {
    margin-left: 0;
    margin-right: 1rem;
    min-height: 24rem;
}

.auto-content {
    min-height: 25rem;
}

.intro-sec6x .layer2 {
    top: 39%;
}

.layer6 {
    position: absolute;
    left: 0;
    right: 0;
    top: -8rem;
    width: 100%;
}

.under-layer-six-row {
    margin-top: 20rem;
}

.stack-img-inner {
    overflow: initial;
}

.stack-img-inner .choose-img-inner {
    background: #F1F1F6;
    padding: 6rem 8rem;
    border-radius: 0.5rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.intro-sec8x {
    background-image: url(../images/layer7.png);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.drop-item-img img {
    margin-bottom: 1rem;
}

.intro-sec9x {
    background-image: url(../images/layer8.png);
}

.fraudster-inner-img {
    margin-top: -3rem;
}

.fraudster-inner-img img {
    width: initial;
    margin-bottom: 0;
}

.footer-inner {
    text-align: center;
    background: #F1F1F6;
    padding: 2.5rem 3rem;
    border-radius: 0.5rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.footer-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.footer-inner h6 {
    color: #584A74;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.footer-inner p {
    color: #584A74;
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.download-btn2x {
    background-image: url(../images/btnbg.png);
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 100% 100%;
    height: 3rem;
    padding: 0.25rem 2.75rem;
    border: 0;
    transition: .3s;
}

.download-btn2x:hover {
    transform: scale(1.1);
}

.download-btn2x span {
    margin: 0;
    color: #1C0D37;
    font-size: 1rem;
    font-weight: 500;
}

.join-btn2x {
    background-image: url(../images/btnbg.png);
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 100% 100%;
    height: 3rem;
    padding: 0.25rem 2.75rem;
    border: 0;
    transition: .3s;
}

.join-btn2x:hover {
    transform: scale(1.1);
}

.join-btn2x span {
    margin: 0;
    color: #1C0D37;
    font-size: 1rem;
    font-weight: 500;
}

.footer-sec {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
}

.layer9 {
    position: absolute;
    left: 0;
    right: 0;
    top: 4rem;
    width: 70%;
    margin: auto;
}

.footer-content {
    margin-top: 23rem;
}

.under-footer-sec {
    border-top: 2px solid #C9C7CF;
    padding: 1.5rem 0;
}

.under-footer-sec .top-nav-col {
    border-bottom: 0;
    padding-bottom: 0;
}

.modal-body p {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    background: linear-gradient(to right, #519541, #3f3b17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.hero-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* univerzální styl tlačítka */
.fancy-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 5px rgba(0,0,0,0.4);

  background: linear-gradient(135deg, #4caf50, #2e7d32);
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);

  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hover efekt */
.fancy-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

/* Speciální barevné varianty */
.fancy-btn.green {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.fancy-btn.purple {
  background: linear-gradient(135deg, #d4e128, #acb525);
}

/* Animovaný highlight při hoveru */
.fancy-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.2);
  transform: skewX(-20deg);
  transition: left 0.5s;
}

.fancy-btn:hover::after {
  left: 100%;
}

.mt-6 {
  margin-top: 5rem; /* nebo kolik potřebuješ */
}