:root {
    --main-hex-size: 460px;
    --med-hex-size: 319px;
    --sml-hex-size: 215px;
}

@media only screen and (max-width: 550px) {
    :root {
        --med-hex-size: 260px;
        --sml-hex-size: 190px;
    }
}



.advantages-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
    padding-bottom: 50px;
    box-sizing: border-box;
    height: 1000px;
}

.advantages-container .background-img {
    position: relative;
    z-index: -2;
    width: 100%;
}

.advantages-container .tagline {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.advantages-container .tagline h1 {
    font-size: 38px;
    color: var(--fg2);
    text-align: center;
    margin: 0 auto;
}

.main-hex-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    --b: 10px;
    height: var(--main-hex-size);
    aspect-ratio: 1/cos(30deg);
    clip-path: 
      polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
      var(--b) 50%,
      calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
      calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
      calc(100% - var(--b)) 50%,
      calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
      calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
      var(--b) 50%);
    background: var(--bg2);
}

.main-hex-fill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    height: var(--main-hex-size);
    aspect-ratio: 1/cos(30deg);
    clip-path: 
      polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%);
    background: black;
    opacity: 0.6;
}

.content-hex-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    --b: 10px;
    height: var(--med-hex-size);
    aspect-ratio: 1/cos(30deg);
    clip-path: 
      polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
      var(--b) 50%,
      calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
      calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
      calc(100% - var(--b)) 50%,
      calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
      calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
      var(--b) 50%);
    background: var(--bg2);
}

.content-hex-fill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    height: var(--med-hex-size);
    aspect-ratio: 1/cos(30deg);
    clip-path: 
      polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%);
    background: black;
    opacity: 0.6;
    z-index: -1;
}

.hex-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    --b: 5px;
    height: var(--sml-hex-size);
    aspect-ratio: 1/cos(30deg);
    clip-path: 
      polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
      var(--b) 50%,
      calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
      calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
      calc(100% - var(--b)) 50%,
      calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
      calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
      var(--b) 50%);
    background: var(--bg2);
}

.hex-fill {   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    height: var(--sml-hex-size);
    aspect-ratio: 1/cos(30deg);
    clip-path: 
      polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%);
    background: black;
    opacity: 0.6;
    z-index: -1;
}

.advantage {
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--sml-hex-size);
    display: flex;
    align-items: center;
}

.advantage h3 {
    color: var(--fg2);
    font-size: 18px;
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.advantages-container .advantage:nth-of-type(4) {
    transform: translate(123%, -161%);
}

.advantages-container .advantage:nth-of-type(5) {
    transform: translate(-195%, -105%);
}

.advantages-container .advantage:nth-of-type(6) {
    transform: translate(-26%, 115%);
}

.advantages-container .advantage:nth-of-type(4) .advantage-content {
    transform: translate(58%, 35%);
}

.advantages-container .advantage:nth-of-type(5) .advantage-content {
    transform: translate(-87%, 52%);
}

.advantages-container .advantage:nth-of-type(6) .advantage-content {
    transform: translate(78%, -36%);
}

.advantage-content {
    position: absolute;
    height: var(--med-hex-size);
    width: var(--med-hex-size);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--fg2);
    visibility: hidden;
    opacity: 0;
    transition: opacity 100ms ease-in, visibility 0ms ease-in 100ms;
}

.advantage-content.show {
    visibility: visible;
    opacity: 1;
    transition-delay: 0ms;
}

.advantage-content-text {
    margin-top: 20px;
    text-align: center;
    width: 70%;
}

.advantage svg {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    color: var(--fg3);
    cursor: pointer;
    padding: 10px;
}

.advantage svg.flipped {
    rotate: 180deg;
    transform: translate(50%, 50%);;
}

@media only screen and (max-width: 1550px) {
    .advantages-container .advantage:nth-of-type(4) .advantage-content {
        transform: translate(-99%, -53%);
    }

    .advantages-container .advantage:nth-of-type(5) .advantage-content {
        transform: translate(-22%, 90%);
    }

    .advantages-container {
        height: 1200px;
        margin: 0;
        padding: 0;
    }
}

@media only screen and (max-width: 700px) {

    .advantages-container {
        height: 1350px;
        margin: 0;
        padding: 0;
    }

    .main-hex-border {
        display: none;
    }

    .main-hex-fill {
        display: none;
    }

    .advantages-container .tagline {
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .advantages-container .advantage:nth-of-type(4) {
        transform: translate(49%, -250%);
    }
    
    .advantages-container .advantage:nth-of-type(5) {
        transform: translate(-115%, -67%);
    }
    
    .advantages-container .advantage:nth-of-type(6) {
        transform: translate(7%, 118%);
    }
    
    .advantages-container .advantage:nth-of-type(4) .advantage-content {
        transform: translate(-108%, 34%);
    }
    
    .advantages-container .advantage:nth-of-type(5) .advantage-content {
        transform: translate(70%, 35%);
    }
    
    .advantages-container .advantage:nth-of-type(6) .advantage-content {
        transform: translate(-87%, 34%);
    }
}

@media only screen and (max-width: 550px) {

    .advantages-container {
        height: 1000px;
    }

    .advantages-container .advantage:nth-of-type(4) {
        transform: translate(-50%, -190%);
    }
    
    .advantages-container .advantage:nth-of-type(5) {
        transform: translate(-50%, -37%);
    }
    
    .advantages-container .advantage:nth-of-type(6) {
        transform: translate(-50%, 115%);
    }

    .advantage-content {
        z-index: -1;
    }
    
    .advantages-container .advantage:nth-of-type(4) .advantage-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .advantages-container .advantage:nth-of-type(5) .advantage-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .advantages-container .advantage:nth-of-type(6) .advantage-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .mobile-svg-flipped {
        bottom: -60px !important;
    }

    .advantage svg {
        bottom: -30px;
    }
}