/* Import custom font */
@font-face {
  font-family: 'TrajanProBold';
  src: url('../assets/fonts/trajanpro_bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

.nav__link.active,
.menu-nav__link.active{
    color: rgba(var(--w-clr),1);
}
.text-page .slider__title {
    margin-bottom: 100px;
}
.text-page .inner-content__content {
    width: 80%;
    margin: 0 auto;
    text-align: justify;
}

/* languages */
.language {
    position: absolute;
    bottom: 17rem;
    z-index: 4;
    width: 270px;
    text-align: center;
    left: 50%;
    margin-left: -135px;
}

@media only screen and (min-width: 40em) {
    .language {
        bottom: 15rem;
    }
}
@media only screen and (min-width: 75em) {
    .language {
        bottom: 12.5rem;
    }
}

.dropbtn {
    background-color: rgba(0,0,0,0);
    display: inline-flex;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 2px;
    text-decoration: none;
    width: 272px;
    color: rgba(255,255,255,0.39);
    font-family: 'Cinzel';
    padding: 16px;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    transition: .4s;
}
.drop-icon {
    width: 15px;
    height: 7px;
}
.dropdown-content {
    display: flex;
    justify-content: center;
    width: 270px;
    text-align: center;
    top: 50%;
    text-align: left;
    position: absolute;
    font-family: 'Cinzel';
    font-size: 15px;
    z-index: 1;
    opacity: 0;
    left: 50%;
    margin-left: -134px;
    margin-top: 25px;
    pointer-events: none;
}
.dropdown-content-menu {
    transition: .4s;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    min-width: 160px;
    background-color: rgba(0,0,0,0.8);
    width: 272px;
}
.dropdown-content a {
    color: rgba(255,255,255,0.5);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content-menu a:hover {
    color: rgba(255,255,255,1);
}
.language:hover .dropbtn {
    background-color: rgba(0,0,0,0.8);
    color: rgba(255,255,255,0.9);
}
.language:hover .dropdown-content {
    opacity: 1;
    pointer-events: all;
}

.calendar__event:hover {
    filter: contrast(1.4);
}

.inner-content .content-area .inner-content__content {
    margin-bottom: 100px;
}
.calendar__event img {
    width: 32px;
}
.info__block {
    display: none;
}
.info__block--active {
    display: block;
}
.donate__inputs-item--currency>input {
    padding-left: 3.75rem;
}



/* Alerts */
.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    position: relative
}

.alert-heading {
    color: inherit
}

.alert-link {
    font-weight: 700
}

.alert-dismissible {
    padding-right: 4rem
}

.alert-dismissible .close {
    color: inherit;
    padding: 1rem 1.25rem;
    position: absolute;
    right: 0;
    top: 0
}

.alert-primary {
    background-color: #fbeae3;
    border-color: #f3c0ab;
    color: #ba4212
}

.alert-primary hr {
    border-top-color: #f0af95
}

.alert-primary .alert-link {
    color: #8c320e
}

.alert-secondary {
    background-color: #e7e9ec;
    border-color: #b7bec7;
    color: #2d3e53
}

.alert-secondary hr {
    border-top-color: #a9b1bc
}

.alert-secondary .alert-link {
    color: #1b2532
}

.alert-success {
    background-color: #e4f4e1;
    border-color: #addfa6;
    color: #168b08
}

.alert-success hr {
    border-top-color: #9cd893
}

.alert-success .alert-link {
    color: #0e5b05
}

.alert-info {
    background-color: #e1f8fb;
    border-color: #a6e9f3;
    color: #08a3ba
}

.alert-info hr {
    border-top-color: #90e3f0
}

.alert-info .alert-link {
    color: #067889
}

.alert-warning {
    background-color: #fef7e2;
    border-color: #fbe7a8;
    color: #cd9f0c
}

.alert-warning hr {
    border-top-color: #fae090
}

.alert-warning .alert-link {
    color: #9d7a09
}

.alert-danger {
    background-color: #ffe7e5;
    border-color: #ffb7b2;
    color: #d62f22
}

.alert-danger hr {
    border-top-color: #ff9f99
}

.alert-danger .alert-link {
    color: #aa251b
}

.alert-dark {
    background-color: #e4e6e9;
    border-color: #adb3bc;
    color: #18243b
}

.alert-dark hr {
    border-top-color: #9fa6b1
}

.alert-dark .alert-link {
    color: #090e17
}

.alert-gray {
    background-color: #f4f1f0;
    border-color: #dfd5d1;
    color: #8c756c
}

.alert-gray hr {
    border-top-color: #d5c7c2
}

.alert-gray .alert-link {
    color: #6f5d56
}

.alert-light {
    background-color: #fdfcfc;
    border-color: #faf7f5;
    color: #cac3c0
}

.alert-light hr {
    border-top-color: #f2e9e4
}

.alert-light .alert-link {
    color: #b3a9a4
}

.alert-lighter {
    background-color: #fefefe;
    border-color: #fbfcfd;
    color: #cecfd2
}

.alert-lighter hr {
    border-top-color: #eaeff5
}

.alert-lighter .alert-link {
    color: #b3b5ba
}
.donate__notif {
    display: block;
}
.donate__block-select .donate__block-inner {
    border: 1px solid rgba(var(--w-clr),.3);
    filter: grayscale(0);
    opacity: 1;
}



.old_index_first {
    background: url("/assets/images/bg-login.jpg") no-repeat center/cover;
    /*
    background: url("/img/home/assasin-image.png") no-repeat right center;
    background-size: 50%; /* smaller = zoomed out 
    */
}
















.full_size_button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 400px;
  height: 150px;

  background: url("../img/button/fantesy_button2.png") no-repeat center;
  background-size: contain;

  font-family: var(--ff_o, serif);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 2px;

  color: #e9e8e1; /* softer off-white / golden-white */
  text-shadow:
    0 0 3px rgba(255, 215, 0, 0.6),   /* subtle golden halo */
    0 0 8px rgba(255, 180, 0, 0.4);   /* soft warm glow */

  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s ease, filter 0.25s ease;
  z-index: 1;

  padding: 25px 0 0 0;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .full_size_button {
    width: 260px;   /* smaller width */
    height: 93px;   /* smaller height */
    margin-bottom: 33px; /* less spacing */
  }
}

/* Hover: bigger + brighter + stronger glow */
.full_size_button:hover {
  transform: scale(1.1);
  filter: brightness(1.15);
}
.full_size_button:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Button text always on top */
.full_size_button span.home_promo_text {
  z-index: 2;
  position: relative;
}














/* Mobile adjustment */
@media (max-width: 768px) {
  .home {
    --home-height: calc(28.75rem + (var(--header-h) * 1.5));
  }
}

.home_actions_center {
    max-width: 41rem;
    display: flex;
    justify-content: center;  /* center horizontally */
    align-items: center;      /* align vertically */
    gap: 1rem;                /* space between items */
    margin: 0 auto;           /* center the whole container */
}

.home__logo_new {
  width: 100%;
  max-width: 400px;
  min-width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  filter: drop-shadow(0 16px 26px rgba(138, 105, 43, 0.88));
  text-align: center;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .home__logo_new {
    width: 75%;      /* takes more space on small screens */
    max-width: 280px; /* optional: cap it so it doesn’t look too big */
  }
}

.home__logo_new img {
  width: 100%;
  height: auto;
  display: block;
}

.home.old_index_first .home__container {
  position: relative;
  z-index: 2;          /* makes sure text/logo/buttons stay above fire */
}








/* Default (desktop/tablet): center left */
.home.old_index_first .old_logo {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%); /* vertical center */
  z-index: 20;
}

.home.old_index_first .old_logo img {
  width: 50%;
  height: auto;
  display: block;
}

@media (max-width: 1123px) {
  .home.old_index_first .old_logo {
    top: -49px;              /* move a little down from the top */
    left: 50%;
    transform: translateX(-50%); /* perfectly centered horizontally */
  }

  .home.old_index_first .old_logo img {
    width: 40%; /* keep it smaller on tablet/mobile */
    height: auto;
  }
}






.home__body {
    padding: 0;
}






.home__container {
  position: relative;
  display: flex;              /* switch grid → flex for simpler stacking */
  flex-direction: column;     /* vertical layout */
  justify-content: center;    /* center content vertically by default */
  align-items: center;        /* center horizontally */
  min-height: 100%;           /* grow at least full height */
  padding: 2rem 1rem;         /* breathing space */
  box-sizing: border-box;     /* padding counts in width */
}

@media (max-width: 1024px) { /* iPad and smaller */
  .home__container {
    height: 0%;
  }
}







.social-buttons {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999; /* always on top */
}

@media (max-width: 1024px) {
  .social-buttons {
    display:none;
    top: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 16px;
  }

  .social-buttons a {
        padding: 6px;                   /* breathing room around icon */
  }
}

.social-buttons a {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid transparent;

    background: rgba(0, 0, 0, 0.5); /* semi-transparent background */
    backdrop-filter: blur(4px);     /* optional frosted glass */
    border-radius: 50%;             /* keep them round */

  font-size: 22px;
  color: #fff;
  text-decoration: none;

  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  opacity: 0.85;
}

.social-buttons a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(45deg, #b9b8b0, #5f5f5e); /* gold gradient */
  -webkit-mask: linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: filter 0.2s, opacity 0.2s;
  opacity: 0.75;
}

.social-buttons a:hover {
  transform: scale(1.1);
  opacity: 1;
  box-shadow: 0 0 6px rgba(143, 143, 142, 0.7),
              0 0 10px rgba(199, 198, 194, 0.5);
}

.social-buttons a:hover::before {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(197, 197, 195, 0.9))
          drop-shadow(0 0 8px rgba(226, 226, 224, 0.7));
}

/* Brand-colored borders */
.discord {
  background: linear-gradient(#000, #000) padding-box,
              linear-gradient(145deg, rgba(88,101,242,0.8), rgba(255,255,255,0.4)) border-box;
}

.youtube {
  background: linear-gradient(#000, #000) padding-box,
              linear-gradient(145deg, rgba(255,0,0,0.8), rgba(255,255,255,0.4)) border-box;
}

.facebook {
  background: linear-gradient(#000, #000) padding-box,
              linear-gradient(145deg, rgba(24,119,242,0.8), rgba(255,255,255,0.4)) border-box;
}

.telegram {
  background: linear-gradient(#000, #000) padding-box,
              linear-gradient(145deg, rgba(0,136,204,0.8), rgba(255,255,255,0.4)) border-box;
}






.home_promo_text {
  text-transform: uppercase;
  font-family: 'TrajanProBold', var(--ff_o), serif; /* custom font first */
  font-size: var(--f-2xl);
  letter-spacing: var(--ls);
  margin: 0.75rem 0;
  text-align: center;
  text-shadow:
    0 0 .5rem rgba(43, 158, 104, 0.8),
    0 .25rem .625rem rgba(var(--w-clr), .25),
    2px 2px 6px rgba(180, 180, 180, 0.6);
    color: #e9e8e1;
}
/* Default (desktop) */
.home_promo_text_big {
  font-size: 2.5rem;   /* example size */
  line-height: 1.2;
}

/* Tablets */
@media (max-width: 1024px) {
  .home_promo_text_big {
    font-size: 2rem;
  }
}

/* Mobile phones */
@media (max-width: 768px) {
  .home_promo_text_big {
    font-size: 1.5rem;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .home_promo_text_big {
    font-size: 1.25rem;
  }
}


.advantages {
    padding: 2rem 0 0; /* top right bottom left */
}

.advantages__heading {
    margin: 0rem;
}

.advantages__grid {
    padding-bottom: 2rem;
}

.slider {
    padding: 40px 0px 0px 0px;
    margin: 0px;
}

.features__container {
    padding: 1rem 0rem 2rem 0rem;
}

.features__title {
    margin-bottom:2rem;
}














.flags {
  position: relative;
  width: 40px;
  height: 40px; /* inline size only */
  flex-shrink: 0;
  z-index: 9999;
}

/* Invisible hover zone with padding */
.flags::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(48px + 20px);
  height: calc(48px * 4 + 20px); /* enough space for up to 4 flags stacked */
  background: transparent;
  pointer-events: auto;
}

/* Flag base */
.flag {
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid #fff;
  box-shadow: 0 0 12px rgba(200,200,200,0.6);
  transition:
    transform .3s ease,
    opacity .3s ease 1s; /* hide after 1s */
}

/* Main flag always visible */
.flag.main {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
}

/* Other flags hidden by default */
.flag:not(.main) {
  opacity: 0;
  pointer-events: none;
  transform: scale(.9);
}

/* Show on hover */
.flags:hover .flag:not(.main) {
  opacity: 1;
  pointer-events: auto;
  transition: transform .3s ease, opacity .3s ease 0s;
}

/* Position other flags using data-pos attribute */
.flags:hover .flag[data-pos="1"] { transform: translateY(56px) scale(1); }
.flags:hover .flag[data-pos="2"] { transform: translateY(112px) scale(1); }
.flags:hover .flag[data-pos="3"] { transform: translateY(168px) scale(1); }
.flags:hover .flag[data-pos="4"] { transform: translateY(224px) scale(1); }

/* Glow */
.flag:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 16px rgba(255,255,255,0.8);
  transform: scale(1.05);
}