/* =========================================
           MAIN SECTION
        ========================================= */

        .achievement-section {

            width: 100%;

            padding: 70px 5%;

            overflow: hidden;

        }


        .achievement-wrapper {

            width: 100%;

            max-width: 1800px;

            margin: auto;

            display: flex;

            align-items: center;

            gap: 50px;

        }


        /* =========================================
           LEFT CONTENT
        ========================================= */

        .achievement-text {

            width: 30%;

            padding-left: 10px;

        }


        .achievement-small-title {

            font-size: 14px;

            font-weight: 600;

            letter-spacing: 3px;

            color: #777;

            margin-bottom: 15px;

            text-transform: uppercase;

        }


        .achievement-text h2 {

            font-size: 42px;

            line-height: 1.15;

            color: #222;

            font-weight: 700;

            margin-bottom: 20px;

        }


        .achievement-text h2 span {

            color: #1c5aa6;

        }


        .achievement-line {

            width: 65px;

            height: 4px;

            background: #1c5aa6;

            margin-bottom: 25px;

        }


        .achievement-text p {

            font-size: 16px;

            line-height: 1.8;

            color: #666;

            max-width: 430px;

        }


        /* =========================================
           CAROUSEL AREA
        ========================================= */

        .achievement-carousel {

            width: 70%;

            min-width: 0;

        }


        .embla {

            overflow: hidden;

            width: 100%;

        }


        .embla__viewport {

            overflow: hidden;

            width: 100%;

            padding: 0 5%;

        }


        .embla__container {

            display: flex;

            touch-action: pan-y pinch-zoom;

            margin-left: -10px;

        }


        .embla__slide {

            flex: 0 0 70%;

            min-width: 0;

            padding-left: 10px;

            position: relative;

        }


        /* =========================================
           IMAGE
        ========================================= */

        .achievement-card {

            width: 100%;

            height: 330px;

            overflow: hidden;

            border-radius: 18px;

            position: relative;

            background: #222;

        }


        .achievement-card img {

            width: 100%;

            height: 100%;

            display: block;

            object-fit: cover;

            transition:
                transform 0.5s ease,
                opacity 0.5s ease;

            opacity: 0.35;

        }


        /* ACTIVE SLIDE */

        .embla__slide.is-selected
        .achievement-card img {

            opacity: 1;

            transform: scale(1);

        }


        /* NON ACTIVE */

        .embla__slide:not(.is-selected)
        .achievement-card {

            transform: scale(0.96);

        }


        /* =========================================
           IMAGE TITLE
        ========================================= */

        .achievement-overlay {

            position: absolute;

            left: 0;

            right: 0;

            bottom: 0;

            padding: 30px 25px 20px;

            background:
                linear-gradient(
                    transparent,
                    rgba(0,0,0,0.8)
                );

            color: white;

            opacity: 0;

            transition: 0.4s ease;

        }


        .is-selected .achievement-overlay {

            opacity: 1;

        }


        .achievement-overlay h3 {

            font-size: 22px;

            margin-bottom: 5px;

        }


        .achievement-overlay p {

            font-size: 14px;

            opacity: 0.9;

        }


        /* =========================================
           CONTROLS
        ========================================= */

        .embla__controls {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-top: 20px;

            padding: 0 5%;

        }


        .embla__buttons {

            display: flex;

            gap: 10px;

        }


        .embla__button {

            width: 38px;

            height: 38px;

            border-radius: 50%;

            border: 1px solid #ddd;

            background: white;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            transition: 0.3s;

        }


        .embla__button:hover {

            background: #1c5aa6;

            color: white;

            border-color: #1c5aa6;

        }


        .embla__button:disabled {

            opacity: 0.35;

            cursor: not-allowed;

        }


        .embla__button svg {

            width: 16px;

            height: 16px;

        }


        /* =========================================
           DOTS
        ========================================= */

        .embla__dots {

            display: flex;

            align-items: center;

            gap: 12px;

        }


        .embla__dot {

            width: 10px;

            height: 10px;

            border-radius: 50%;

            border: 0;

            background: #ddd;

            padding: 0;

            cursor: pointer;

            transition: 0.3s;

        }


        .embla__dot.is-selected {

            width: 14px;

            height: 14px;

            background: #1c5aa6;

        }


        /* =========================================
           MOBILE
        ========================================= */

        @media (max-width: 900px) {

            .achievement-wrapper {

                flex-direction: column;

                gap: 40px;

            }


            .achievement-text {

                width: 100%;

                text-align: center;

                padding-left: 0;

            }


            .achievement-text p {

                margin: auto;

            }


            .achievement-line {

                margin-left: auto;

                margin-right: auto;

            }


            .achievement-carousel {

                width: 100%;

            }

        }


        @media (max-width: 600px) {

            .achievement-section {

                padding: 50px 0;

            }


            .achievement-text {

                padding: 0 25px;

            }


            .achievement-text h2 {

                font-size: 32px;

            }


            .embla__viewport {

                padding: 0 8%;

            }


            .embla__slide {

                flex: 0 0 84%;

            }


            .achievement-card {

                height: 250px;

            }


            .embla__controls {

                padding: 0 8%;

            }

        }