/* 1) Remove default page margins so nothing ever shows whitespace on the sides */
html, body {
    margin: 0;
    padding: 0;
}

/* 3) Hero wrapper fills full width, hides overflow if any */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 4) The image itself always spans 100% width and auto-scales its height */
.hero-img {
    display: block; /* removes little inline‐img gaps */
    width: 100%;
    height: auto;
}

/* 5) Overlay text absolutely centered on top */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.overlay1 {
    padding: 6vw 3vw;
}

/* ------ */

.hero-image img {
    max-width: 100%;
    height: auto;
}

/* ------ */

.hero-text {
    max-width: 50%;
    max-height: 100%;
}

.hero-text .title {
    font-size: 2vw;
    color: #FD3E40;
    margin-bottom: 1.5vw;
}

.hero-text .header1 {
    font-size: 5vw;
    margin-bottom: 2vw;
}

.hero-text .description {
    font-size: 1.8vw;
    color: #1D1D1B;
}

/* ------ */

.text2 {
    max-width: 100%;
    max-height: 100%;
}

.text2 .part1 {
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.85vw;
    margin-bottom: 1.5vw;
    margin-top: 2vw;
}

.text2 .part2 {
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 3.2vw;
    margin-bottom: 8vw;
}

.text2 .line {
    width: 90%;
    margin-left: 5%;
    text-align: center;
    margin-bottom: 2vw;
}

.text2 .line img {
    width: 100%;
}

.text2 .mission {
    width: 90%;
    margin-left: 5%;
    margin-top: 5vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text2 .part3 {
    display: inline-block; /* make transform apply without affecting siblings */
    transform: rotate(-90deg); /* rotate 90° */
    color: #FFFFFF;
    font-size: 4vw;
    margin-top: 4vw;
    margin-left: -4vw;
    text-align: right;
}

.text2 .part4 {
    color: #FFFFFF;
    font-size: 1.75vw;
    line-height: 2;
}

/* ------ */

.hero3 {
    position: relative;
    width: 100%;
}

.hero3, .text3 {
    background-color: #15262b;
}

.text3 .rivaldom-container {
    display: flex;
    justify-content: space-between;

}

.text3 .app-photo {
    width: 55%;
    height: 100%;
}

.text3 .app-photo .app-photo-img {
    margin-top: -8vw;
    width: 100%;
    height: 100%;
}

.text3 .rivaldom {
    width: 45%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.text3 .rivaldom .rivaldom-logo-img {
    margin-top: 6vw;
    margin-bottom: 7vw;
    width: 80%;
}

.text3 .rivaldom .description {
    width: 100%;
    text-align: center;
    line-height: 3;
    color: #FFFFFF;
    font-size: 1.65vw;
}

.golden {
    color: #E7B884;
}

.text3 .inscription {
    width: 100%;
    height: 10vw;
    background-color: #0f1d21;

    display: flex;
    justify-content: center;
    align-items: center;
}

.text3 .inscription .button {
    height: 100%;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text3 .inscription .txt {
    font-size: 1.5vw;
    width: 60%;
    color: #FFFFFF;
}

.hero4 {
    margin-top: -14vw;
}

.hero4 .container {
    width: 45%;
    padding-left: 6vw;
    margin: 0 !important;
}

.hero4 .container .part1 {
    font-size: 2.25vw;
    margin-top: 12vw;
    margin-bottom: 2vw;
    color: #0FEACA;
}

.hero4 .container .part2 {
    font-size: 2.75vw;
    margin-bottom: 4vw;
    color: #FFFFFF;
}

.hero4 .container .part3 {
    font-size: 1.5vw;
    margin-bottom: 2vw;
    color: #E7B884;
}

.hero4 .container .part4 {
    font-size: 1.35vw;
    line-height: 2;
    color: #FFFFFF;
}

.human-slide img {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;

    max-width: 45%;
}

.hero5 .factions {
    top: 10%;
    left: 55%;
    z-index: 10;
    color: white;
}

.hero5 .factions .part1 {
    font-size: 2.25vw;
    margin-bottom: 2vw;
    color: #0FEACA;
}

.hero5 .factions .part2 {
    font-size: 2.75vw;
    color: #FFFFFF;
}

.hero5 .slide-text {
    margin-top: 25%;
}

.hero5 .slide-text .part1 {
    font-size: 4.5vw;
    margin-bottom: 2vw;
    color: #F4A261;
}

.hero5 .slide-text .part2 {
    font-size: 1.5vw;
    margin-bottom: 4vw;
    color: #FFFFFF;
}

.hero5 .arrows {
    bottom: 10vw;
    left: 55%;
    z-index: 10;
    width: 12%;
}

.hero6 .footer {
    height: 30vh;
    background-color: #15262b;
}

.hero6 .footer .logo-container {
    height: 8vh;
}

.hero6 .footer .logo-container img.rivaldom {
    height: 100%;
}

.hero6 .footer .socials {
    max-height: 4vh;
}

.hero6 .footer .socials a {
    width: 2rem;
}

.hero6 .footer .copyright, .hero6 .footer .legal-links {
    max-height: 4vh;
    color: #FFFFFF;
    font-size: 1vw;
}

.hero6 .footer .legal-links a {
    color: #FFFFFF;
    font-size: 1vw;
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
}

/* ----------------------------------
   Buttons
   ---------------------------------- */
.inscription a {
    display: inline-flex;
    position: relative;
    width: auto !important;
    height: 50% !important;
}

.inscription a img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inscription a span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    color: #114D56;
    font-size: 1.25vw;
    font-weight: bolder;
}

/* ----------------------------------
   Fonts
   ---------------------------------- */
.montserrat-regular {
    font-family: 'MONTSERRAT-REGULAR', sans-serif;
}

@font-face {
    font-family: 'MONTSERRAT-REGULAR';
    src: url('./Fonts/MONTSERRAT-REGULAR.TTF') format('opentype');
    font-style: normal;
}

.montserrat-bold {
    font-family: 'MONTSERRAT-BOLD', sans-serif;
}

@font-face {
    font-family: 'MONTSERRAT-BOLD';
    src: url('./Fonts/MONTSERRAT-BOLD.TTF') format('opentype');
    font-style: normal;
}

.montserrat-semibold {
    font-family: 'MONTSERRAT-SEMIBOLD', sans-serif;
}

@font-face {
    font-family: 'MONTSERRAT-SEMIBOLD';
    src: url('./Fonts/MONTSERRAT-SEMIBOLD.TTF') format('opentype');
    font-style: normal;
}

.outfit-light {
    font-family: 'Outfit-Light', sans-serif;
}

@font-face {
    font-family: 'Outfit-Light';
    src: url('./Fonts/Outfit-Light.ttf') format('opentype');
    font-style: normal;
}

.monument-regular {
    font-family: 'MONUMENTEXTENDED-REGULAR', sans-serif;
}

@font-face {
    font-family: 'MONUMENTEXTENDED-REGULAR';
    src: url('./Fonts/MONUMENTEXTENDED-REGULAR.otf') format('opentype');
    font-style: normal;
}

.monument-light {
    font-family: 'MonumentLight', sans-serif;
}

@font-face {
    font-family: 'MonumentLight';
    src: url('./Fonts/MonumentExtended-Light.otf') format('opentype');
    font-style: normal;
}

.monument-bold {
    font-family: 'MonumentBold', sans-serif;
    font-weight: bolder;
}

@font-face {
    font-family: 'MonumentBold';
    src: url('./Fonts/MonumentExtended-Bold.otf') format('opentype');
    font-style: normal;
}

.monument-ultrabold {
    font-family: 'MONUMENTEXTENDED-ULTRABOLD', sans-serif;
}

@font-face {
    font-family: 'MONUMENTEXTENDED-ULTRABOLD';
    src: url('./Fonts/MONUMENTEXTENDED-ULTRABOLD.otf') format('opentype');
    font-style: normal;
}

.hero-regular {
    font-family: 'HeroRegular', sans-serif;
    font-weight: lighter;
}

@font-face {
    font-family: 'HeroRegular';
    src: url('./Fonts/HEROLIGHT-REGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
}

.hero-bold {
    font-family: 'HeroBold', sans-serif;
    font-weight: bolder;
}

@font-face {
    font-family: 'HeroBold';
    src: url('./Fonts/HEROLIGHT-BOLD.OTF') format('opentype');
    font-style: normal;
}