.button {
    display: block;
    padding: 1.5vh 2vw;
    background-color: #34699A;
    color: var(--clr-light);
    font-size: clamp(1rem, 1vw, 2rem);
    font-weight: 500;
    text-wrap: nowrap;
    border: 0;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    line-height: 2;
    width: clamp(5vw, calc(30vw + 1rem), 100%);
    text-align: center;
    transition: all 0.2s;
}

.wallpaper-container {
    text-align: center;
    color: white;
   /*  scroll-snap-align: start; */
}

.full-screen {
    display: block;
    justify-items: center;
    max-width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    position: relative;
    line-height: 1;
}

.full-screen img.wallpaper {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.full-screen div.full-screen-title {
    position: absolute;
    max-width: 100%;
    top: clamp(10rem, calc(35vw + 1rem), 90rem);
    left: 50%;
    transform: translate(-50%, -100%);
    color: var(--clr-light);
    font-size: clamp(1.7em, 3.5vw, 10em);
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.2);
}

.full-screen div.small-title {
    font-size: clamp(0.9em, 0.8vw, 2em);
    font-weight: 400;
}

.full-screen .button {
    padding: min(2vh) max(6vw);
    top: 50rem;
    /* padding: clamp(1rem, calc(5vw + 1rem), 2rem); */
    background-color: #34699A;
    color: var(--clr-light);
    font-size: var(--ff-size-button);
    font-weight: 500;
    text-wrap: nowrap;
    border: 0;
    box-shadow: var(--shadow);
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.8;
}

.section-2div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    align-items: center;
    justify-content: center;
    justify-self: center;
    max-width: 70%;
    padding: 5em 1em;
    letter-spacing: 0.8px;
    margin: 5em 0 5em 0;
    gap: 2em;
    /* box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); */
    /* scroll-snap-align: start; */
}
@media (max-width: 46rem) {
    .section-2div {
        grid-template-columns: 1fr;
        max-width: 90%;
    }
}

.section-details {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: auto;
    max-width: 100%;
    justify-content: left;
    padding: 1rem;
    flex-grow: 0;       /* default 0 not grow to empty space*/
    flex-shrink: 1;     /* default is 1, if 0 the box stop to shrink */
    flex-basis: auto;   /* is a percentage value like a setting to min-width */
    /* flex: 1 1 auto; */
/*     line-height: clamp(1.5em, 2.5vw, 1.8em);; */
   /*  border: 2px solid black; */
}

.section-2div .section-details p {
    font-size: clamp(1.1rem, 1vw, 3rem);
    /* font-size: min(1vw, 1rem); */
}

.section-foot {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    padding: 2rem 0 1rem 0;
}
.section-row {
    display: flex;
    flex: 0 1 20rem;
    max-width: 45%;
    height: auto;
    /* border: 2px solid black; */
    justify-content: left;
}

.section-details .bike {
    display: inline-block;
    max-width: clamp(2.5rem, calc(10vw + 1rem), 6rem);
    height: auto;
    margin: 0;
    padding: 0;    
}
.section-details h2 {
    color: var(--primary-bgcolor);
    padding: 2rem 0;
}

.section-2div h1 {
    max-width: 100%;
    padding: 1rem 0 2rem 0;
    /* font-size: clamp(2.5em, 3.5vw, 4em); */
    font-weight: 500;
    color: rgb(255, 82, 2);
    line-height: clamp(1em, 2.5vw, 1.8em);
    text-align: left;
}

.section-2div p {
    max-width: 100%;
    font-family: var(--ff);
    color: var(--clr-dark);
    font-size: clamp(1.6em , 1.5vw, 2.5em);
    line-height: 1.8;
    text-align: left;
}

.section-2div .section-img img {
    display: block;
    width: clamp(50rem, calc(8VW + 1rem), 60rem);
    max-inline-size: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: auto;
    border-radius: 4px;
   /*  border: 3px solid black; */
    /* box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); */
    cursor: pointer;
}

.section-2div .section-video iframe {
    /* max-width: 100%; */
    width: clamp(50rem, calc(8vw + 1rem), 60rem);
    max-inline-size: 100%;
    max-height: 40rem;
    margin: auto;
    border-radius: 4px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

.route-guide-box {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(6rem, 1fr);
    align-items: center;
    justify-content: center;
    justify-self: center;
    max-width: 100%;
    margin: auto;
    gap: 2em;
    padding: 5em 10%;
    background-color: rgb(255, 234, 207);
}
@media (max-width: 46rem) {
    .route-guide-box {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 3em 2em;
    }
}

.route-guide-box iframe {
    /* width: clamp(35rem, 30vw, 55rem); */
    max-inline-size: 100%;
    display: block;
    margin: 2em auto 1em auto;
    border-radius: 5px;
    border: 3px solid black;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.container-title {
    display: block;
    max-inline-size: 100%;
    margin: auto;
/*     width: clamp(75%, 40vw, 100%); */
    padding: 3em 1em;
    /* box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); */
}

.container-title a {
    text-decoration: none;
    color: rgb(19, 2, 255);
    font-size: clamp(1em , 1.5vw, 1em);
}

.container-title p.guidelines {
    max-width: 100%;
    color: rgb(255, 82, 2);
    margin: auto;
    font-size: clamp(2.5em, 3.5vw, 3.8em);
    font-weight: 500;
    padding: 0.5em 0 0.5em 0;
    line-height: clamp(1.1em, 2.5vw, 1.8em);
}

.container-title p.direction {
    max-inline-size: 100%;
   /*  width: clamp(50%, 40vw, 100%); */
    color: rgb(0, 0, 0);
    margin: auto;
    font-size: clamp(1.6em , 1.5vw, 2.5em);
    line-height: 1.4;
    text-align: justify;
    text-justify: inter-word;
    letter-spacing: 0.8px;
    padding: 1em 0 1em 0;
}

.youtube-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-inline-size: 100%;
    gap: 15px;
    align-items: center;
    justify-content: center;
    margin: auto;
    /* width: min(65em, 80%); */
    border: 3px solid limegreen;
}

.video-preview {
    max-width: 50%;
    max-inline-size: 100%;
    margin: auto;
    /* width: clamp(25rem, 30vw, 90%); */
    /* width: clamp(35rem, 40vw, 55rem); */
    gap: 0;
    margin-top: 1em;
    border: 3px solid black;
    border-radius: 5px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}

.video-preview img.thumbnail  {
    display: block;
    max-inline-size: 100%;
    margin: 0;
    padding: 0;
    box-shadow: 1px 1px 10px rgb(0, 0, 0);
}

.video-preview .video-time {
    font-size: 12px;
    font-weight: 500;
    padding: 4px;
    border-radius: 2px;
    background-color: black;
    color: white;
    position: absolute;
    bottom: 10px;
    right: 5px;
}

.submenu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 3fr));
    align-content: center;
    justify-content: center;
    justify-self: center;
    gap: 3em;
    max-width: 70%;
    padding: 5em 2em;
    margin: min(3vw, 5rem);
    /* border: 2px solid black; */
}
@media (max-width: 46rem) {
    .submenu-grid {
        max-width: 90%;
        margin: 0;
        padding: 0;
    }
}

.submenu-div {
    display: grid;
    grid-template-columns: repeat(auto-fit minmax(25rem, 1fr));
    align-content: center;
    margin: auto;
    scale: 1.05;
}
.submenu-div-child {
    display: block;
    max-inline-size: 100%;
    max-width: 100%;
    flex: 1 0 auto;
}

.submenu-grid img {
    display: block;
    max-inline-size: 100%;
    width: min(70vw, 45rem);
    border-radius: 5px;
    box-shadow: px 1px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin-bottom: 1em;
}

.submenu-grid a {
    display: block;
    max-inline-size: 100%;
    width: 100%;
    background-color: #34699A;
    border: none;
    color: white;
    padding: 0.2em 0;
    text-align: center;
    text-decoration: none;
    font-size: min(5vw, 2em);
    cursor: pointer;
    border-radius: 0.3em;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}

.registration-head {
    display: block;
    max-inline-size: 100%;
    margin: auto;
    padding-block: clamp(4em, 10vw, 20em);
    /* background-color: rgb(255, 234, 207); */
    background-image: url("/images/pictures/001.jpg");
    background-position: 10% 60%;
    background-size: cover;
}

.registration-head h1 {
    max-width: auto;
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: max(2em, 3.5vw);
    font-weight: 600;
}

.route-details-container {
    display: grid;
    grid-template-columns: minmax(6em, 1fr) minmax(6em, 1fr);
    max-width: 100%;
    align-items: center;
    justify-self: center;
    padding: 4em 15%;
    /* background-color: rgb(255, 234, 207); */
}
@media (max-width: 750px) {
    .route-details-container {
        grid-template-columns: 1fr;
        padding: 4em 5%;
        height: auto;
    }
}

.route-map {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .4s; /* Animation */
    margin: 0 auto;
    padding: 2em 2em;
}

.route-map:hover {
    transform: scale(1.03); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.route-map-photo {
    width: max(40em, 60%);
    max-inline-size: 100%;
    cursor: pointer;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    border: 3px solid black;
    border-radius: 5px;
}

.route-details {
    display: grid;
    max-inline-size: 100%;
    padding: 2em 2em;
}

.route-details p {
    width: clamp(50em, 20vw, 70%);
    max-inline-size: 100%;
    margin: auto;
    height: auto;
    font-size: clamp(1.5em , 2vw, 2em);
    line-height: 200%;
}

.route-details a {
    color: #1877f2;
}

/* .ul-route159 li p {
    font-size: clamp(1.5em , 2vw, 2em);
    line-height: 1.6;
} */

.route-details p.capital-title {
    text-align: center;
    font-size: clamp(2.5em , 2vw, 5em);
    color: rgb(255, 82, 2);
    font-weight: 700;
    padding: .5em 0 .5em 0;
}

.route-rules-container {
    display: grid;
    grid-template-columns: minmax(6em, 1fr) minmax(6em, 1fr);
    max-width: 100%;
    align-items: center;
    justify-self: center;
    padding: 4em 15%;
    background-color: rgb(255, 234, 207);
}

@media (max-width: 750px) {
    .route-rules-container {
        grid-template-columns: 1fr;
        padding: 4em 5%;
        height: auto;
    }
}

.reg-button-container {
  margin: auto;
  width: 70%;
  max-inline-size: 100%;
  text-align: center;
  padding: 3em 0;
}

.reg-button-container div {
    display: block;
    margin: auto;
    width: clamp(40rem, 25vw, 70%);
    height: auto;
    max-inline-size: 100%;
    /* box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); */
}

.reg-button-container .reg-button img {
    cursor: pointer;
    border-radius: 10px;
    margin-top: min(1vw, 5em);
}

.registration-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    width: auto;
    border: none;
}

@media (max-width: 750px) {
    .registration-form div {
        width: 50%;
        padding: 10px;
    }
}

.roadmap-pictures {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    gap: 20px;
    padding: 20px 20px;
}

.roadmap-column1,
.roadmap-column2,
.roadmap-column3 {
    display: block;
    transition: transform .4s; /* Animation */
    width: 300px;
    height: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 10px;
}


.roadmap-column1:hover,
.roadmap-column2:hover,
.roadmap-column3:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.roadmap-name {
    color: rgb(56, 56, 56);
    font-weight: 500;
}

.roadmap-photo {
    width: 250px;
    height: auto;
    cursor: pointer;
    box-shadow: 1px 1px 10px rgb(51, 51, 51);
}

.shop {
    max-width: 70%;
    margin: auto;
}
@media(max-width: 46rem) {
    .shop {
        max-width: 90%;
    }
}

.shop h1 {
    display: block;
    /* font-size: clamp(3em, 5vw, 6em); */
    /* width: clamp(30ch, 50vw, 50ch); */
    max-inline-size: 100%;
    font-weight: 700;
    color: rgb(255, 82, 2);
    text-align: center;
    margin: auto;
    padding: 3em 0 1em 0;
}

.shop .shop-description {
    display: block;
    width: min(85vw, 100rem);
    max-inline-size: 100%;
    font-size: clamp(1.6em , 1.5vw, 2.5em);
    font-weight: 400;
    color: #000000;
    margin: auto;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.8px;
    /* text-justify: inter-word; */
    padding: 1em 1em 2em 1em;
}

.merchandise-container {
    max-width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: auto;
    gap: 2em;
    padding-top: 2em;
    padding-bottom: clamp(2em, 5vw, 7em);
}
@media(max-width: 46rem) {
    .merchandise-container {
        max-width: 90%;
    }
}

.merchandise img {
    width: clamp(10rem, 40vw, 50rem);
    max-inline-size: 100%;
    height: auto;
    cursor: pointer;
}

.order {
    display: flex;
    width: 50%;
    margin: auto;
    justify-content: center;
    padding: 0;
    max-inline-size: 100%;
}

.order div a {
    display: block;
    margin: auto;
    width: 100%;
    padding: auto;
    font-size: clamp(1rem, 4vw, 2rem);
    height: auto;
    border-radius: 4px;
}

.sponsor-title p {
    color: #222;
    font-weight: 500;
    font-size: clamp(2.5em, 5vw, 5em);
    text-align: center;
    margin-top: clamp(5rem, 20vw, 20rem);
}

.sponsor-container {
    display: flex;
    max-inline-size: 100%;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    gap: 4em;
    padding: 4em 2em;
}

.sponsor-container .sponsor img {
    width: min(20vw, 25rem);
    height: auto;
    box-shadow: var(--shadowdark);
    border-radius: 50%;
}

.certified-title-container {
    display: block;
    width: 100%;
    margin: auto;
    text-align: center;
    max-inline-size: 100%;
    margin-bottom: 50px;
    border: 2px solid black;
}

.progress-bar {
    margin: auto;
    max-width: 100%;
    padding-top: 12em;
    padding-bottom: 12em;
    color: #000000;
    font-size: clamp(1em, 5vw, 3em);
    text-align: center;
}

.profile-container {
    display: grid;
    grid-template-columns: minmax(60px, 1fr) /* minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) */;
/*     grid-template-columns: repeat(auto-fit, 25rem);
    justify-items: center;
    width: 80%;
    align-items: center;
    justify-content: center;
    justify-self: center;
    column-gap: 2em;
    margin-top: 5em; */

    width: 70%;
    align-items: center;
    justify-content: center;
    justify-self: center;
    column-gap: 0.5em;
    margin: auto;
}

.profile {
    display: flex;
    /* flex-direction: column; */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-inline-size: 100%;
    margin-bottom: 0.5em;
    border-radius: 8px;
    border: 3px solid black;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
}
@media (max-width: 46rem) {
    .profile-container {
        grid-template-columns: 1fr 1fr;
        width: 100%;
        max-inline-size: 100%;
        margin: 0;
        padding: 0;
    }
    .profile {
        display: block;
        width: 100%;
        margin: 0;
    }
    .certified-date {
        display: none;
    }
}
@media (max-width: 200px) {
    .profile-container {
        grid-template-columns: 1fr;
        width: 100%;
        max-inline-size: 100%;
        margin: 0;
        padding: 0;
    }
    .profile {
        display: block;
        width: 100%;
        margin: 0;
    }
}


.profile-picture {
    /* width: 100%; */
    display: block;
    max-width: 6rem;
    height: auto;
    border-radius: 4px;
}

.profile-name {
    width: 100%;
    font-size: clamp(1rem, 4vw, 1.5rem);
    font-weight: 500;
    color: #333;
    padding-left: 5px;
   /*  text-wrap: nowrap; */
}

* {box-sizing: border-box}

.rank-container {
  width: 100%;
  height: auto;
  background-color: #d1d1d1;
}

.skills {
  text-align: right;
  padding-top: 5px;
  padding-bottom: 5px;
  color: white;
}

.rank5 {width: 100%; background-color: rgb(235, 23, 23);}
.rank4 {width: 80%; background-color: rgb(252, 155, 28);}
.rank3 {width: 60%; background-color: rgb(22, 134, 0);}
.rank2 {width: 42%; background-color: rgb(0, 73, 133);}
.rank1 {width: 28%; background-color: rgb(24, 119, 242);}

.rankname {
    text-align: left;
    text-wrap: nowrap;
    padding-left: 0.5em;
    font-size: min(1.4em, 4vw);
}

.certified-title {
    width: auto;
    height: auto;
    font-size: min(5vw, 6em);
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
}

.certified-description {
    width: auto;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
}

.certified,
.certified-date {
    width: 100%;
    font-size: 14px;
    color: rgb(99, 99, 99);
    line-height: 1.5;
    padding-left: 5px;
    text-align: left;
}

.facebook-profile {
    max-width: 100%;
    max-inline-size: 100%;
    text-align: center;
    text-wrap: nowrap;
    background-color: #34699A;
    color: white;
    border: none;
    padding: 7px 20px;
    font-size: clamp(0.5rem, calc(1vw + 1rem), 1.5rem);
    margin: 5px 5px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.facebook-profile:hover {
    opacity: 0.8;
}

.facebook-profile:active {
    opacity: 0.5;
}

.fb-profile {
    color: white;
}

/* -------------- FOOTER ---------------- */

.footer-section {
    display: grid;
    grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr);
    height: 6rem;
    min-height: 7rem;
    max-inline-size: 100%;
    height: auto;
    justify-content: space-between;
    padding: 1rem 5%;
    margin: 0;
    background-color: rgb(182, 182, 182);
    position: sticky;
    margin-top: min(20vw, 70rem);
}
@media (max-width: 200px) {
    .footer-section {
        grid-template-columns: 1fr;
    }
}

.left-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-inline-size: 100%;
    margin: auto;
}
@media (max-width: 46rem) {
    .left-footer {
        display: block;
        place-items: center;
        margin: auto;
        width: 100%;
    }
}

.left-footer img.footer-icon {
    display: flex;
    width: clamp(2rem, 6vw, 3rem);
    max-inline-size: 100%;
    height: auto;
    margin-right: 0.5rem;
    padding: 0;
    cursor: pointer;
}

.left-footer p {
    color: rgb(0, 0, 0);
    /* font-size: clamp(1em, 1vw, 1.2em); */
    font-size: max(0.5em, 1.5em);
    padding-right: 5px;
}

.social-media {
    display: flex;
    flex-direction: row;
    margin: auto;
    max-inline-size: 100%;
    gap: 0.3em;
}
@media (max-width: 46rem) {
    .social-media {
        flex-direction: column;
    }
}

.right-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.right-footer .dev-signature {
    font-size: clamp(0.5em, 5vw, .8em);
    color: #34699A;
}

.right-footer svg {
    width: clamp(1em, 5vw, 2.5em);
    color: #34699A;
}