﻿.spring-25-lto {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    color: black;
}

    .spring-25-lto .block1 {
        width: 100%; height: auto;
        position:relative;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;


    }

    .spring-25-lto .Block1Content {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        width: 100%;
        max-width: 1400px;
        margin: auto;
        z-index: 3;
    }
        .spring-25-lto .Block1Content .Contain1 {
            width: 70%;
            position: relative;
            height: auto;
            background-size: contain;
            background-position: top right;
            background-repeat: no-repeat;
        }
        .spring-25-lto .Block1Content .Contain2 {
            width: 30%;
            padding: 60px 0PX;
            position: relative; height: auto;
        }
        .spring-25-lto .Block1Content .Contain3 {
            width: 100%;
            height: auto; min-height: 200px;
            position: relative;
            height: auto;
        }

    .spring-25-lto .block1 .Contain4 {
        width: 77%;
        height: 100%;
        position: absolute;
        top: -100%;
        left: 0px;
        z-index: 4;
        transform: rotate(-20deg);
        transition: top 2s ease-in-out, transform 2s ease-in-out;
        animation: float-horizontal 14s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    }
.block1-product-img {
    width: 80%;
    height: auto;
    animation: float-vertical 10s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    margin-top: -220px;
}

@keyframes float-vertical {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes float-horizontal {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        transform: translateX(10px) rotate(2deg);
    }

    100% {
        transform: translateX(0) rotate(0deg);
    }
}

.block1-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background: linear-gradient( to top, rgba(0, 75, 46, 0.8) 0%, rgba(0, 177, 108, 0.4) 50%, rgba(0, 177, 108, 0) 100% );
}
.block1-parallax {
    width: auto;
    height: auto;
    position: absolute;
    top: 260px;
    left: 60%;
    z-index: 3;
    
}

.fish-lure1 {
    width: 600px;
    height: auto;
    position: relative;
}

.block3-parallax {
    width: auto;
    height: auto;
    position: absolute;
    top: 1650px;
    right: 25%;
    z-index: 1;
}

.fish-lure2 {
    width: 500px;
    height: auto;
    position: relative;
}

.block4-parallax {
    width: auto;
    height: auto;
    position: absolute;
    top: 1900px;
    left: 13%;
    z-index: 1;
}

.fish-lure3 {
    width: 500px;
    height: auto;
    position: relative;
}
.wood2-parallax {
    width: auto;
    height: auto;
    position: absolute;
    top: 570px;
    left: 10%;
    z-index: 1;
}
.fish-wood2 {
    width: 100vw;
    height: auto;
    position: relative;
}
.wood3-parallax {
    width: auto;
    height: auto;
    position: absolute;
    top: 1000px;
    left: -10%;
    z-index: 1;
}

.fish-wood3 {
    width: 100vw;
    height: auto;
    position: relative;
}
.wood4-parallax {
    width: auto;
    height: auto;
    position: absolute;
    top: 3000px;
    right: -10%;
    z-index: 1;
}

.fish-wood4 {
    width: 100vw;
    height: auto;
    position: relative;
}

.block1-text {
    position: relative;
    text-align: left;
    z-index: 3;
    width: 100%;
    max-width: 300px;
    float: right;
    height: auto;
    cursor: pointer;
}
    .block1-text h1 {
        font: bold 24px poppins;
        color: white; 
        
    }
    .block1-text p {
        font: normal 18px poppins;
        color: white;
   
        line-height: 140%;
    }
.block1-circle {
    width: 600px; height: 600px; border-radius: 50%;
    background: #002315;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: -1;
}

.fish-blocks {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    position: relative;
}

#myArrow {
    height: 60px;
    width: auto;
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translatex(-50%);
    border: 0px;
}
.block1-text:hover #myArrow {
    bottom: -80px;
}

#block3 {
}

.fish-block-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1; overflow: hidden;
}
#block2-back {
    background: white;
}
#block3-back {
    background: linear-gradient(to bottom, #B17323 0%, #B17323 50%, #5A3300 100%);
}
#block4-back {
    background: linear-gradient(to bottom, #cfdeea 0%, #ffffff 50%, #ffffff 100%);
}
.fish-block-middle {
    width: 100%;
    height: auto; margin: auto;
    min-height: 500px;
    position: relative;
    padding: 20px;
    z-index: 2; text-align: left;
}

.fish-block-front {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.block2-product {
    width: 50%;
    height: 600px;
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: -800px;
    transition: right 0.5s ease;
}

.block3-product {
    width: 50%;
    height: 700px;
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    position: absolute;
    top: 380px;
    right: 50%;
    transition: right 0.5s ease;
}
.block4-product {
    width: 50%;
    height: 500px;
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    position: absolute;
    top: 380px;
    left: 35%;
    transition: left 0.5s ease;
}

.fish-hooks-1 {
    width: 550px;
    height: 550px;
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
}

.fish-hooks-2 {
    width: 100%;
    height: 900px;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px;
    left: 0px; z-index: -1;
}
.fish-bottom2 {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: -1;
}


.fish-title-block {
    width: 100%;
    height: auto;
    padding: 0px 0px;
    margin: auto;
    position: relative;
}
    .fish-title-block h2 {
        font: 600 60px Rubik; max-width: 50%; letter-spacing: -1px;
        text-align: left;
        line-height: 100%; margin-bottom: 0px;
    }
    .fish-title-block p {
        font: 400 60px Rubik;
        letter-spacing: -1px;
        max-width: 70%;
        text-align: left;
        line-height: 100%;
        margin-top: 0px;
    }
#block2 .fish-title-block h2 {
    color: #007046;
}
#block2 .fish-title-block p {
    color: #007046;
}

#block3 .fish-title-block h2 { color: white; }
#block3 .fish-title-block p {  color: white; }

#block4 .fish-title-block { 
    width: 50%; margin-left: 50%;
}
    #block4 .fish-title-block h2 {
        color: #003C9F;
        max-width: 100%;
    }

    #block4 .fish-title-block p {
        color: #003C9F;
        max-width: 100%;
    }

.fish-spacer-block {
    width: 100%;
    height: 800px;
}
.fish-spacer-block2 {
    width: 100%;
    height: 600px;
}

.info-fish {
    position: absolute;
    top: 280px;
    right: 20%;
    display: flex;
    height: 500px;
    width: 100%;
}
.fish-box1 {
    flex: 0 0 60%;
    height: 100%;
}
.fish-circle1 {
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    height: 750px; width: 750px; border-radius: 50%;
    float: right;

}
.fish-circle2 {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 650px;
    width: 650px;
    border-radius: 50%;
    position: absolute; bottom: 200px; left: 60%;
}
.fish-circle3 {
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    height: 750px;
    width: 750px;
    border-radius: 50%;
    position: absolute;
    top: 50px;
    left: 50%; 
}
.fish-circle4 {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 650px;
    width: 650px;
    border-radius: 50%;
    position: absolute;
    bottom: 200px;
    right: 60%;
}
.fish-circle5 {
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    height: 750px;
    width: 750px;
    border-radius: 50%;
    position: absolute;
    top: -60px;
    right: 60%;
}
.fish-circle6 {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 650px;
    width: 650px;
    border-radius: 50%;
    position: absolute;
    bottom: 500px;
    left: 70%;
}


.fish-text1 {
    flex: 0 0 40%;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    padding-top: 20%;
}
.fish-text1-in {
    width: 80%;
    height: auto;
    text-align: left;
    font: normal 18px Rubik; 
    line-height: 160%;
    color: #007046; margin-left: 20px;
}
.fish-text2 {
    position: relative;
    width: 100%; height: auto;
    padding-top: 0px; max-width: 400px;
}

.fish-text2-in {
    width: 100%;
    height: auto;
    text-align: left;
    font: normal 18px Rubik;
    line-height: 160%;
    color: white;
}
.fish-text3 {
    position: absolute; top: 250px; height: auto;
    left: 50%; width: 50%; max-width:400px;
}

.fish-text3-in {
    width: 100%;
    height: auto;
    text-align: left;
    font: normal 18px Rubik;
    line-height: 160%;
    color: #003c9f;
}

.fish-info-block {
    width: 100%;
    height: auto;
    display: flex;
    gap: 10px;
    z-index: 3;
}
.fish-info-block-in {
    flex: 1; position: relative;
    border-radius: 10px;
    background-color: #004B2E;
    padding: 10px;
    display: flex;
    align-items: stretch;
}
    .fish-info-block-in.alt1 {
        background-color: #00301D;
    }
    .fish-info-block-in.alt2 {
        background-color: #5A3300;
    }
    .fish-info-block-in.alt3 {
        background-color: #371F00;
    }

    .fish-info-block-in.alt4 {
        background-color: #003c9f;
    }

    .fish-info-block-in.alt5 {
        background-color: #00296c;
    }

    .fish-info-block-in h2 {
        font: bold 30px Rubik; margin-bottom: 20px;
        color: white; text-align: center;
    }
    .fish-info-block-in p {
        font: 200 16px Rubik; line-height: 130%;
        color: white; text-align: left;
    }

    .fish-info-textblock {
        width: 100%;
        padding: 20px; margin-top: 20px;
    }

.fish-info-circle {
    width: 120px;
    height: 120px;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #00301D;
    border: 3px solid #004B2E;
    border-radius: 50%;
}
.fish-info-block-in.alt1 .fish-info-circle {
    background-color: #004B2E;
    border: 3px solid #00301D;
}
.fish-info-block-in.alt2 .fish-info-circle {
    background-color: #371F00;
    border: 3px solid #5A3300;
}
.fish-info-block-in.alt3 .fish-info-circle {
    background-color: #5A3300;
    border: 3px solid #371F00;
}
.fish-info-block-in.alt4 .fish-info-circle {
    background-color: #00296c;
    border: 3px solid #003c9f;
}
.fish-info-block-in.alt5 .fish-info-circle {
    background-color: #003c9f;
    border: 3px solid #00296c;
}

.fish-info-circle .fish-icon {
    border: 0px;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (min-width: 701px) and (max-width: 950px) {
    .fish-hooks-1 {
        width: 300px;
        height: 300px;
        top: 150px;
        right: 0px;
    }

    .fish-title-block h2 {
        max-width: 100%;
        font-size: 40px;
    }

    .fish-title-block p {
        max-width: 100%;
        font-size: 40px;
    }

    .block1-product-img {
        margin-top: -120px;
        margin-right: 10%;
    }

    .block2-product {
        top: 90px;
    }

    .fish-info-block {
        gap: 5px;
    }

    .fish-info-textblock {
        padding: 10px;
    }

    .fish-info-block-in h2 {
        font-size: 20px;
    }

    .fish-info-block-in p {
        font-size: 14px;
    }
    .info-fish {
        position: absolute;
        top: 250px;
        right: 22%;
        display: flex;
        height: 500px;
        width: 100%;
    }

    .fish-circle1 {
        height: 450px;
        width: 450px;
    }
    .fish-circle2 {
        height: 400px;
        width: 400px;
        bottom: 350px;
        left: 70%;
    }
    .fish-circle3 {
        height: 450px;
        width: 450px;
        border-radius: 50%;
        position: absolute;
        top: 200px;
        left: 60%;
    }

    .fish-circle4 {
        height: 400px;
        width: 400px;
        border-radius: 50%;
        position: absolute;
        bottom: auto;
        top: 750px;
        right: 65%;
    }
    .block3-parallax {
        top: 1350px;
        right: 10%;
    }
        .fish-circle5 {
        height: 450px;
        width: 450px;
        border-radius: 50%;
        position: absolute;
        top: 50px;
        right: 55%;
    }

    .fish-circle6 {
        height: 400px;
        width: 400px;
        border-radius: 50%;
        position: absolute;
        bottom: 600px;
        left: 60%;
    }

        .fish-hooks-2 {
        height: 700px;
    }
    .fish-text3 {
        top: 200px;
    }
    }
@media (min-width: 451px) and (max-width: 700px) {


    .block1-text h1 { font-size: 14px; }
    .block1-text p {
        font-size: 12px;
    }
    .fish-text3 {
        top: 300px;
    }

    .block1-parallax {
        top: 350px;
        left: 30%;
    }

    .fish-hooks-1 {
        width: 300px;
        height: 300px;
        top: 150px;
        right: 0px;
    }


    .fish-title-block h2 {
        max-width: 100%;
        font-size: 40px;
    }

    .fish-title-block p {
        max-width: 100%;
        font-size: 40px;
    }

    .block1-product-img {
        margin-top: -10px;
        margin-right: 10%;
    }


    .fish-info-block {
        gap: 5px;
    }

    .fish-info-textblock {
        padding: 10px;
    }

    .fish-info-block-in h2 {
        font-size: 20px;
    }

    .fish-info-block-in p {
        font-size: 14px;
    }

    .info-fish {
        position: absolute;
        top: 250px;
        right: 22%;
        display: flex;
        height: 500px;
        width: 100%;
    }
    .fish-text1-in {
        width: 90%;
        text-align: center;
        font: normal 18px Rubik;
        margin-left: 5%;
        padding: 20px;
        text-align: left;
        padding-top: 70px;
    }

        .fish-text1-in p {
            text-align: left;
            line-height: 160%;
            font-size: 14px;
        }

    .block2-product {
        width: 60%;
        height: 300px;
        background-size: contain;
        background-position: top right;
        background-repeat: no-repeat;
        position: absolute;
        top: 140px;
        right: 0px;
    }

    .block3-product {
        width: 60%;
        height: 300px;
        background-size: contain;
        background-position: top right;
        background-repeat: no-repeat;
        position: absolute;
        top: 360px;
        right: 50%;
    }

    .block4-product {
        width: 60%;
        height: 300px;
        background-size: contain;
        background-position: top right;
        background-repeat: no-repeat;
        position: absolute;
        top: 550px;
        left: 35%;
    }


    .fish-circle1 {
        height: 350px;
        width: 350px;
    }

    .fish-circle2 {
        height: 300px;
        width: 300px;
        bottom: 350px;
        left: 70%;
    }

    .fish-circle3 {
        height: 350px;
        width: 350px;
        border-radius: 50%;
        position: absolute;
        top: 200px;
        left: 60%;
    }

    .fish-circle4 {
        height: 300px;
        width: 300px;
        border-radius: 50%;
        position: absolute;
        bottom: auto;
        top: 750px;
        right: 65%;
    }

    .block3-parallax {
        top: 1200px;
        right: 10%;
    }

    .fish-circle5 {
        height: 450px;
        width: 450px;
        border-radius: 50%;
        position: absolute;
        top: 50px;
        right: 55%;
    }

    .fish-circle6 {
        height: 400px;
        width: 400px;
        border-radius: 50%;
        position: absolute;
        bottom: 600px;
        left: 60%;
    }


    .fish-hooks-2 {
        height: 700px;
    }
}


@media (max-width: 450px) {
    .spring-25-lto .Block1Content .Contain1 {
        height: 300px;
    }

    .spring-25-lto .Block1Content .Contain2 {
        width: 100%;
        padding: 40px;
    }

    .block1-text {
        position: relative;
        text-align: left;
        z-index: 3;
        width: 100%;
        max-width: 350px;
        float: none;
        height: auto;
        padding: 0px 20px;
    }


    .block1-circle {
        width: 450px;
        height: 450px;
    }

    .spring-25-lto .block1 .Contain4 {
        width: 100%;
        height: 300px;
        position: absolute;
        top: -100%;
        left: 0px;
    }

    .block1-parallax {
        top: 740px;
        left: 0px;
    }

    .fish-lure1 {
        width: 600px;
    }

    .block1-product-img {
        margin-top: -60px;
        width: 100%;
    }


    .info-fish {
        position: absolute;
        top: 160px;
        right: 0px;
        display: flex;
        height: 470px;
        width: 100%;
        flex-direction: column;
    }

    .fish-box1 {
        flex: 0 0 100%;
        height: 100%;
    }

    .fish-text1 {
        flex: 0 0 100%;
        display: flex;
        justify-content: start;
        align-items: baseline;
        padding-top: 0px;
    }


    .fish-circle1 {
        height: 300px;
        width: 300px;
        border-radius: 50%;
        float: none;
        margin-left: -50px;
    }

    .fish-circle2 {
        height: 250px;
        width: 250px;
        bottom: 600px;
    }

    .fish-circle3 {
        height: 300px;
        width: 300px;
        border-radius: 50%;
        position: absolute;
        top: 250px;
        left: 50%;
    }

    .fish-circle4 {
        height: 250px;
        width: 250px;
        border-radius: 50%;
        position: absolute;
        bottom: auto;
        top: 850px;
        right: 60%;
    }

    .fish-circle5 {
        height: 300px;
        width: 300px;
        border-radius: 50%;
        position: absolute;
        top: 160px;
        right: 40%;
    }

    .fish-circle6 {
        height: 250px;
        width: 250px;
        border-radius: 50%;
        position: absolute;
        bottom: 1450px;
        left: 50%;
    }

    .block2-product {
        width: 90%;
        height: 500px;
        background-size: contain;
        background-position: top right;
        background-repeat: no-repeat;
        position: absolute;
        top: 420px;
        right: 0px;
    }

    .block3-product {
        width: 90%;
        height: 600px;
        background-size: contain;
        background-position: top right;
        background-repeat: no-repeat;
        position: absolute;
        top: 160px;
        right: 50%;
    }

    .block4-product {
        width: 90%;
        height: 500px;
        background-size: contain;
        background-position: top right;
        background-repeat: no-repeat;
        position: absolute;
        top: 350px;
        left: 35%;
    }

    .fish-info-block {
        gap: 70px;
        flex-direction: column;
    }

    #block3-text {
        margin-top: 500px;
    }

    .fish-spacer-block2 {
        width: 100%;
        height: 200px;
    }

    .fish-info-block-in {
        flex: 1;
        position: relative;
        border-radius: 10px;
        background-color: #004B2E;
        padding: 10px;
        display: flex;
        align-items: stretch;
    }


    .fish-text1-in {
        width: 90%;
        text-align: center;
        font: normal 18px Rubik;
        margin-left: 5%;
        padding: 20px;
        text-align: left;
        padding-top: 70px;
    }

        .fish-text1-in p {
            text-align: left;
            line-height: 160%;
        }

    .fish-hooks-1 {
        width: 200px;
        height: 200px;
        top: 200px;
        right: 0px;
    }

    .fish-title-block {
        width: 100%;
        margin: 0px;
    }

    #block4 .fish-title-block {
        width: 100%;
        margin-left: 0%;
    }

    .fish-title-block h2 {
        max-width: 100%;
        font-size: 34px;
    }

    .fish-title-block p {
        max-width: 100%;
        font-size: 34px;
    }

    .fish-text3 {
        position: absolute;
        top: 620px;
        height: auto;
        left: 5%;
        width: 90%;
        max-width: 600px;
    }

    .block4-parallax {
        top: 2050px;
    }
    .wood2-parallax {
        top: 900px;
        right: 0px;
        width: 100%;
    }

    .wood3-parallax {
        top: 1600px;
        right: 0px;
        width: 100%;
    }

    .wood4-parallax {
        top: 4750px;
        right: 0px;
        width: 100%;
    }
    .fish-bottom2 {
        height: 130px;
    }
    }