@import url(main.css?v=1.1);

li.has-sub-menu .sub-menu.open {
    top: 100px !important;
}

.mobile-banner-text {
    display: none;
}

main {
    section.about {
        display: flex;
        padding: 50px 100px;


        .left {
            background: rgba(16, 77, 95, 0.09);
            padding: 50px 81px;
            width: 40%;

            .title {
                display: flex;
                align-items: center;
                color: #043E66;
                font-family: "Source Serif 4";
                font-size: 40px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                letter-spacing: 1.2px;
                gap: 8px;
            }

            .info {
                p {
                    margin-top: 30px;
                    color: #303030;
                    font-family: "Source Serif 4";
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 22px;
                }
            }

            .show-more {
                display: flex;
                width: 176px;
                height: 48px;
                padding: 0 6px;
                justify-content: center;
                align-items: center;
                gap: 23px;
                border-radius: 4px;
                background: #043E66;

                box-shadow: 10px 8px 14.9px 0 rgba(0, 0, 0, 0.20) inset, 0 4px 13px 0 rgba(0, 0, 0, 0.25);

                color: #CFB53B;
                font-family: "Source Serif 4";
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                letter-spacing: 0.54px;
                text-align: center;
                margin-top: 50px;
            }
        }

        .right {
            width: 60%;
            flex-shrink: 0;
            background: url(../images/home-about.jpg) lightgray 0 0 / 107.106% 102.929% no-repeat;
            background-size: cover;
        }


    }

    section.akvakultura {
        width: 100%;
        flex-shrink: 0;
        background: #053F67;
        padding: 63px 100px;

        .mobile-title {
            display: none;
            color: #DBAB26;
            font-family: "Source Serif 4";
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            letter-spacing: 1.44px;
        }


        .row-1 {
            display: flex;
            gap: 65px;

            .left {
                width: 50%;
                flex-shrink: 0;
                aspect-ratio: 102/67;
                background: url(../images/neres.gif) lightgray -76.014px -1.045px / 128.643% 110.163% no-repeat;
            }

            .right {
                .title {
                    color: #DBAB26;
                    font-family: "Source Serif 4";
                    font-size: 48px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 52px;
                    letter-spacing: 1.44px;
                }

                .info {
                    margin-top: 30px;
                    color: #CACACA;
                    font-family: "Source Serif 4";
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 23px;
                    letter-spacing: 0.18px;
                }
            }
        }

        .row-2 {
            margin-top: 53px;
            display: flex;
            justify-content: space-between;
            gap: 60px;

            .left p {
                color: #CACACA;
                font-family: "Source Serif 4";
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 23px;
                letter-spacing: -0.9px;
                max-width: 500px;
            }

            .right {
                width: 50%;
                flex-shrink: 0;
                aspect-ratio: 127/67;
                background: url(../images/hand-nere.png) lightgray -7px -32.946px / 102.978% 140.542% no-repeat;
            }
        }
    }

    section.statistik {
        margin-top: 80px;
        padding: 0 100px 90px 100px;

        .row-1 {
            .nere {
                width: 494px;
                height: 120px;
                flex-shrink: 0;
                aspect-ratio: 247/60;
                background: url(../images/statistik-nere.png) white 50% / cover no-repeat;
            }
        }

        .row-2 {
            .wave-container {
                position: relative;
                width: 100%;
                height: 120px;
                overflow: hidden;
                background: linear-gradient(to top, #cfe8f6, #ffffff);
            }

            .wave {
                position: absolute;
                bottom: -30px;
                left: 0;
                width: 200%;
                height: 100%;
                background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 519 65" fill="none"><path d="M0 64.7755V22.5366C9.59111 22.0098 15.8727 15.731 22.5468 9.8597C36.7875 -2.66825 49.3168 -2.55253 63.6289 9.89316C66.3554 12.2641 68.9312 14.8243 71.828 16.9799C81.7138 24.3362 91.8221 24.1316 101.447 16.4233C105.552 13.1361 109.278 9.38651 113.511 6.27302C123.776 -1.2786 135.502 -1.2242 145.757 6.37567C149.582 9.21007 152.947 12.6182 156.636 15.634C167.706 24.6839 178.462 24.5655 189.353 15.3259C192.61 12.5624 195.682 9.58304 199.042 6.94581C209.814 -1.50872 222.631 -1.42467 233.293 7.15192C237.007 10.1391 240.392 13.5128 244.138 16.4581C254.193 24.3631 264.606 24.2973 274.54 16.3321C277.616 13.8657 280.467 11.1372 283.46 8.57097C295.797 -2.00925 309.295 -2.00333 321.579 8.57211C324.941 11.4656 328.146 14.5493 331.673 17.2374C340.471 23.9418 350.318 24.1275 359.269 17.5933C363.645 14.3995 367.481 10.5219 371.732 7.15668C382.731 -1.54975 395.493 -1.51029 406.392 7.23623C409.724 9.91051 412.79 12.8936 416.067 15.6361C426.623 24.4719 437.382 24.5733 448.012 15.9176C450.943 13.5311 453.702 10.9473 456.561 8.47677C468.468 -1.81381 481.743 -1.97198 493.918 8.0282C494.807 8.75849 495.679 9.51113 496.517 10.2962C502.77 16.1573 509.065 21.9446 518.489 22.4553V64.7755H0Z" fill="%23D3E3F0"/></svg>');
                background-repeat: repeat-x;
                background-size: 519px 100%;
                animation: waveMove 12s linear infinite;
            }

            .wave2 {
                opacity: 0.6;
                bottom: -20px;
                animation: waveMove2 8s linear infinite;
                filter: blur(1px);
            }

            .wave3 {
                opacity: 0.3;
                bottom: -10px;
                animation: waveMove3 12s linear infinite reverse;
                filter: blur(2px);
            }
        }

        .row-3 {
            width: 100%;
            flex-shrink: 0;
            background: #D5E3F0;
            gap: 60px;

            .kol-1 {
                height: 109px;
                flex-shrink: 0;
                color: #043E66;
                font-family: "Source Serif 4";
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: 23px;
                letter-spacing: 0.54px;
                margin: 70px 0;
            }

            .kol-2 {
                width: 300px;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                background: #E6F2FE;
                margin: 70px 0;

                color: #043E66;
                font-family: "Source Serif 4";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                /* 100% */
                letter-spacing: 0.54px;

                .qayci {
                    width: 77px;
                    height: 78px;
                    flex-shrink: 0;
                    border-radius: 4px;
                    background: #043E66;
                    margin: 9px;
                    background: url(../images/qayci.png) #043E66 50% / cover no-repeat;
                    background-size: 80%;
                }
            }

            .kol-3 {
                width: 300px;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                background: #E6F2FE;
                margin: 70px 0;

                color: #043E66;
                font-family: "Source Serif 4";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                /* 100% */
                letter-spacing: 0.54px;

                .stat {
                    width: 77px;
                    height: 78px;
                    flex-shrink: 0;
                    border-radius: 4px;
                    background: #043E66;
                    margin: 9px;
                    background: url(../images/stat.png) #043E66 50% / cover no-repeat;
                    background-size: 80%;
                }
            }
        }


    }

    section.blog {
        padding: 0 100px;
        margin-bottom: 60px;

        .row-1 {
            color: #043E66;
            text-align: center;
            font-family: "Source Serif 4";
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            letter-spacing: 0.4px;

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

        .row-2 {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            margin-bottom: 23px;

            .left {
                width: 299px;
                color: #043E66;
                font-family: "Source Serif 4";
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                line-height: 23px;
                letter-spacing: 0.6px;
            }

            .right {
                .show-more {
                    display: flex;
                    width: 176px;
                    height: 48px;
                    padding: 0 6px;
                    justify-content: center;
                    align-items: center;
                    gap: 23px;
                    flex-shrink: 0;
                    border-radius: 4px;
                    background: #DBAB26;
                    box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.20);

                    color: #043E66;
                    font-family: "Source Serif 4";
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    letter-spacing: 0.54px;
                }
            }
        }

        .row-3 {
            gap: 20px;

            .blog-card {
                display: flex;
                height: 550px;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                flex-shrink: 0;
                border-radius: 12px;
                background: #D3E3F0;

                .image {
                    width: 100%;

                    img {
                        width: 100%;
                        height: 380px;
                        flex-shrink: 0;
                        border-radius: 35px;
                        padding: 20px;
                        object-fit: cover;
                    }
                }

                .body {
                    width: 100%;
                    padding: 0 20px;
                    height: 110px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .title {
                        color: #043E66;
                        font-family: "Source Serif 4";
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 24px;
                    }

                    .more {
                        display: flex;
                        justify-content: space-between;
                        align-items: end;

                        .icon {
                            display: flex;
                            width: 40px;
                            height: 41px;
                            padding: 9px 11px;
                            justify-content: center;
                            align-items: center;
                            gap: 10px;

                            border-radius: 30px;
                            background: #DBAB26;
                            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                        }

                        .text-link {
                            color: #043E66;
                            font-family: "Source Serif 4";
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: 27px;
                            letter-spacing: 0.48px;
                            text-decoration-line: underline;
                            text-decoration-style: solid;
                            text-decoration-skip-ink: auto;
                            text-decoration-thickness: auto;
                            text-underline-offset: auto;
                            opacity: 0.5;
                        }
                    }
                }
            }
        }
    }

    section.contact {
        width: 100%;
        opacity: 1;
        background: #D3E3F0;
        margin-bottom: 110px;
        overflow: hidden;

        .row {
            justify-content: space-between;
        }

        img.Polygon {
            position: absolute;
        }

        .contact-block {
            padding-right: 120px;
            padding-top: 60px;
        }

        label {
            width: 100px;
            height: 18px;
            opacity: 1;
            font-family: Source Serif 4;
            font-weight: 400;
            font-style: Regular;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: 0%;
            display: block;
            margin-bottom: 4px;
            color: #043E66;
        }

        .form-control {
            /* width: 100%; */
            height: 45px;
            opacity: 1;
            border-radius: 4px;
            border-width: 1px;
            background: #FFFFFF;
            border: 1px solid #FFFFFF;
            outline: none;
            margin: 0;

        }

        .textarea-control {
            width: 100%;
            height: 225px;
            opacity: 1;
            border-radius: 10px;
            border-width: 1px;
            background: #FFFFFF;
            border: 1px solid #FFFFFF;
            outline: none;
            padding: 12px 20px;
            resize: vertical;

        }

        .mt-2 {
            margin-top: 20px;
        }

        .btn-warning {
            width: 100%;
            height: 48px;
            opacity: 1;
            border-radius: 4px;
            padding-right: 6px;
            padding-left: 6px;
            gap: 23px;
            background: #DBAB26;
            box-shadow: 0px 2px 12.9px 0px #00000033;
            color: #043E66;
            font-family: Source Serif 4;
            font-weight: 600;
            font-style: SemiBold;
            font-size: 18px;
            line-height: 100%;
            letter-spacing: 3%;

        }

    }
}

@keyframes waveMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-519px);
    }
}

@keyframes waveMove2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-259.5px);
    }
}

@keyframes waveMove3 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-173px);
    }
}


@media (max-width: 768px) {
    .header {
        background: url(../images/nere.gif) lightgray -24px -74.406px / 107.658% 126.187% no-repeat;
        height: 437px;

        .main-text {
            display: none;
        }

        .banner {
            top: 330px;

            a {
                display: none;
            }
        }
    }

    .mobile-banner-text {
        display: block;
    }

    .main-text {
        opacity: 1;
        font-weight: 600;
        font-size: 31px;
        line-height: 30px;
        text-align: center;
        padding: 20px;
        color: #043E66;
    }

    .banner-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        opacity: 1;
        border-radius: 4px;
        padding-right: 6px;
        padding-left: 6px;
        gap: 23px;
        background: #DBAB26;
        box-shadow: 0 4px 13px 0 #00000033;
        font-weight: 600;
        font-size: 18px;
        line-height: 100%;
        color: #043E66;
        margin: 20px 20px 60px;
    }

    li.has-sub-menu .sub-menu.open {
        /* position: absolute; */
        top: 0px !important;
    }

    main {
        section.about {
            flex-direction: column-reverse;
            padding: 20px;

            .left {
                width: 100%;
                padding: 40px 20px;

                .title {
                    font-size: 28px;
                    display: flex;
                    justify-content: center;
                }

                .info {
                    p {
                        font-size: 16px;
                        line-height: 20px;
                        text-align: center;
                    }
                }

                .show-more {
                    width: 100%;
                    height: 44px;
                    font-size: 16px;
                    gap: 16px;
                    margin-top: 30px;
                }
            }

            .right {
                width: 100%;
                height: 250px;
                flex-shrink: 0;
            }
        }

        section.akvakultura {
            flex-direction: column;
            padding: 20px;
            height: auto;

            .mobile-title {
                display: block;
            }

            .row-1 {
                flex-direction: column;
                margin-top: 20px;
                gap: 20px;

                .left {
                    width: 100%;
                }

                .right {
                    margin-top: 0px;

                    .title {
                        display: none;
                    }

                    .info {
                        font-size: 16px;
                        line-height: 20px;
                        margin-top: 0;
                    }
                }
            }

            .row-2 {
                flex-direction: column-reverse;
                gap: 20px;
                margin-top: 30px;

                .left p {
                    font-size: 16px;
                    line-height: 20px;
                }

                .right {
                    width: 100%;
                }
            }
        }

        section.statistik {
            flex-direction: column;
            padding: 20px;

            .row-1 {
                .nere {
                    width: 100%;
                    height: 88px;
                    flex-shrink: 0;
                    background-size: 90%;
                }
            }

            .row-3 {
                flex-direction: column;
                gap: 0px;
                align-items: center;
                padding: 20px;
            }

            .kol-1,
            .kol-2,
            .kol-3 {
                margin: 10px !important;
            }
        }

        section.blog {
            padding: 0 20px !important;
            margin-bottom: 30px !important;

            .row-1 {
                font-size: 22px;
            }

            .row-2 {
                margin-top: 10px;

                .left {
                    font-size: 15px !important;
                }

                .right {
                    .show-more {
                        display: none;
                    }
                }
            }

            .row-3 {
                overflow-x: auto;
                scrollbar-width: none;

                .blog-card {
                    width: 208px;
                    height: 345px;

                    .image {
                        img {
                            height: 200px;
                        }
                    }
                }
            }
        }

        section.contact {
            .contact-icon {
                display: none;
            }

            .contact-block {
                padding: 20px;
            }

            .row {
                flex-wrap: wrap;
            }
        }
    }
}