use{
animation:move-forever 7.5s linear infinite;
&:nth-child(2){ animation-duration: 7.5s; animation-delay:-1ss; }
&:nth-child(1){ animation-duration: 7.5s}
}

@keyframes move-forever{
0%{transform: translate(-2px , 0)}
100%{transform: translate( 0px , 0)} 
}

:root{
    --bgc: #191919;
    --lc: #cdcdcdb4;
    --hover-clr: #494949;
    --tc: white;
    --sc: #cccccc8e;
    --ac: #006ddf;
    --acdark: #003369;
    --stc: #ffffff5c;
    --ttc: #ffffff20;
    --bsc: #0000005e;
    --dropc: #b3b3b379;
    --rhc: #373737;
    --rhc2: #565656;


    --red: #e22e12;
    --pink: #ffb4e5;
    --green: #23a950;
    --dark_green: #205b41;
    --yellow: #ffe627;

    --org_green:rgba(0, 128, 0);
} 
html {
scroll-behavior: smooth;
}
/* layout only*/
body {
    margin: 0; 
    overflow-y: scroll;
    font-family: Nunito Sans;
}
svg {
    width: 100vw;
    height: 300px;
}
a{
    all: unset;
}
.header {
    color: black;
    font-weight: 650;
    font-size: 16px;
    position: sticky;
    top: 0px;
    height: 125px;
    max-height: 125px;
    left: 0px;
    right: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    margin: 0px;
    padding: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    z-index: 100;
}
.header-options {
    display: flex;
    flex-direction: row;
    gap: 15px;
    height: 125px;
    font-weight: bold;
    color: var(--acdark);
    fill: var(--acdark)
}
.header-home {
    padding: 5px;
    border-bottom: 1px solid transparent;
    transition: 0.25s all;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.header-option-box {
    display: flex;
    align-items: center;
    padding: 0px;
    position: relative;
}
.header-option {
    padding: 5px;
    padding-right: 15px;
    border-bottom: 1px solid transparent;
    transition: 0.25s all;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-width: fit-content;
    white-space: nowrap;
}
.header-option-image {
    max-height: 30px;
    max-width: 30px;
    margin-left: 5px;
}
.header-img {
    max-width: 200px;
    max-height: 200px;
}
.header-option-box:hover .header-option{
    /* border-bottom: 1px solid black; */
    color: var(--ac);
}
.header-option-box:hover .header-menu-box {
    display: flex;
}
.header-option-box:hover .header-option-image {
    fill: var(--ac)
}

.header-menu-box {
    padding: 5px;
    background-color: white;
    position: absolute;
    top: 125px;
    border: 1px solid gray;
    border-top: 0px;
    min-width: 200px;
    left: 0px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    display: none;
}
.header-menu-box.show {
    display: flex;
}
.header-menu-option {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 10px 10px 15px;
    transition: 0.4s all;
}
.header-menu-option:hover {
    color: white;
    cursor: pointer;
    transform: scale(1.01);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.223);
}
.header-menu-option.squirrels:hover {
    background-color: var(--red);
}
.header-menu-option.beavers:hover {
    background-color: var(--ac);
}
.header-menu-option.cubs:hover {
    background-color: var(--green);
}
.header-menu-option.scouts:hover {
    background-color: var(--acdark);
}
.header-menu-title {
    text-align: left;
}
.header-menu-info {
    text-align: left;
    color: darkgray;
    font-size: 14px;
}

.box {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: white;
    min-height: 100vh;
    height: fit-content;
}
.wave-container {
    overflow: hidden;
    padding: 0px;
    position: absolute;
    bottom: -10px;
}
.section {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--acdark);
}

.text {
    /* background-color: red; */
    flex: 1;
    padding: 10px;
}
.glass-text-home {
    background: rgba(0, 0, 0, 0.562);
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
    height: 30vh;
    width: 80%;
    margin: auto;
    margin-bottom: 200px;
    padding: 30px;
    color: white;
}
.glass-title {
    font-size: 50px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 15px;
}

.first-section {
    display: flex;
    flex-direction: row;
    gap: 40px;
    flex: 1;

    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    flex-wrap: wrap;

    padding-left: 100px;
    padding-right: 100px;
}
.title-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
    padding: 10px;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 400px;
}
.title-section-title {
    height: fit-content;
    font-size: 80px;
    font-weight: 900;
    color: white
}
.title-section-text {
    flex: 1;
    font-size: 30px;
    color: white;
}
.title-section-buttons {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
}

.first-section-images {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex: 1;
    margin-top: auto;
    margin-bottom: auto;
    justify-content: space-evenly;
}
.first-section-image {
    /* min-width: 300px;
    min-height: 300px; */
    width: 700px;
    padding-left: 25px;
    background-color: transparent;
    border: 0px;
    /* max-width: 100%; */
}

.button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 30px;
    padding: 15px;
    flex: 1;
    border: 1px solid white;

    font-size: 20px;
    font-weight: bold;
    color: white;

    transition: all 0.4s;
    cursor: pointer;
}
.button:hover {
    background-color: white;
    color: black;
}

.section-title {
    color: var(--acdark);
    text-align: center;
    display: block;
    margin-top: 50px;
    font-size: 50px;
    font-weight: 900;
}
.section-title.beavers {
        color: var(--ac);
}
.section-title.cubs {
        color: var(--green);
}
.section-title.white {
        color: white;
}
.section-title.squirrels {
    color: var(--red);
}
.section-subtitle {
    color: #003369d2;
    text-align: center;
    display: block;
    margin-top: 10px;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 40px;
}
.section-title-image {
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    margin-bottom: 50px;
}
.section-info {
    color: black;
    font-weight: bold;
    text-align: center;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}
.section-info.white {
    color: white;
}

.my-badges-section {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    min-width: fit-content;
    /* width: 750px; */
    justify-items: center;
    color: white;
}
.my-badges-section.black {
    color: black;
}

.my-sections-section {
    display: flex;
    flex-direction: row;
    padding: 75px 0px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px;
    margin: 10px;
}
.my-sections-section.black {
    color: black;
}

.my-sections-box {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: transparent;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.223);
    padding: 20px;
    transition: all 0.25s;
    cursor: pointer;
    max-width: 200px;
    width: 200px;     
    align-items: center;  
}
.my-sections-box:hover {
    background-color: white;
    color: black;
    transform: scale(1.05);
}

.my-sections-box.squirrels:hover {
    background-color: var(--red);
    color: white;
    transform: scale(1.05);

    .my-section-image {
    filter: brightness(0) invert(1);
    }
}

.my-sections-box.beavers:hover {
    background-color: var(--ac);
    color: white;
    transform: scale(1.05);

    .my-section-image {
    filter: brightness(0) invert(1);
    }
}
.my-sections-box.cubs:hover {
    background-color: var(--green);
    color: white;
    transform: scale(1.05);

    .my-section-image {
    filter: brightness(0) invert(1);
    }
}
.my-sections-box.scouts:hover {
    background-color: var(--acdark);
    color: white;
    transform: scale(1.05);

    .my-section-image {
    filter: brightness(0) invert(1);
    }
}
.my-sections-box.acorn:hover {
    background-color: var(--red);
    color: white;
    transform: scale(1.05);
}
.my-sections-box.bronze:hover {
    background-color: #917b49;
    color: white;
    transform: scale(1.05);
}
.my-sections-box.silver:hover {
    background-color: silver;
    color: white;
    transform: scale(1.05);
}
.my-sections-box.gold:hover {
    background-color: #917b49;
    color: white;
    transform: scale(1.05);
}
.my-section-image {
    display: block;
    max-width: 225px;
}
.my-section-info {
    margin-top: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

.running-scouts-section {
    display: grid;
    grid-gap: 20px; 
    grid-template-columns: 1fr 1fr 1fr;
    min-width: fit-content;
    width: 750px;
    justify-items: center;
}
.running-scouts-box {
    background-color: transparent;
    box-shadow: 0px;
    height: fit-content;
    width: fit-content;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    padding-bottom: 60px;
    transition: all 0.4s;
}
.running-scouts-box:hover {
    background-color: white;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.223);
    cursor: pointer;
    transform: scale(1.05);
}
.running-scouts-circle {
    border-radius: 100%;
    background-color: var(--dark_green);
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 35px;
}
.running-scouts-image {
    height: 60px;
    width: 60px;
}
.running-scouts-text {
    color: black;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.event-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.223);
    padding-bottom: 20px;
    transition: all 0.4s;
}
.event-box:hover {
    transform: scale(1.05);
}
.event-image {
    height: 300px;
    background-color: white;
}
.event-title {
    color: white;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    padding: 10px;
}
.event-subtitle {
    color: var(--stc);
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    padding: 10px;
}


.footer-image {
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}
.footer-box {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.footer-text {
    color: white;
}

.promise-box {
    margin: 20px;
}
.promise-title {
    font-weight: bold;
}
.promise-info {
    margin-top: 20px;
}


.badge-layout {
    max-width: 70vw;
}


.thanks-word {
    font-family: Nunito Sans;
    font-size: 6vw;
    min-width: fit-content;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40%;
}

/* @media (min-width: 1500px) {
    .first-section {
        
    }
} */

@media (min-width: 1400px) {
    .running-scouts-section {
        width: 1000px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

@media (max-width: 1200px) {
        .my-badges-section {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 800px) {
    .header-option-image {
        display: none;
    }
    .title-section-title {
        text-align: center;
        font-size: 60px;
    }
    .title-section-text {
        text-align: center;
    }
    .first-section {
        padding-top: 20px !important;
        padding-left: 0px;
        padding-right: 0px;
    }
    .running-scouts-section {
        width: 500px;
        grid-template-columns: 1fr 1fr;
    }
    .first-section-image {
        max-width: 90vw;
    }
    .my-badges-section {
        grid-template-columns: 1fr 1fr;
    }
    .header {
        justify-content: space-evenly;
    }
    .header-img {
        width: 150px;
    }
}