:root {
    --x: 150px;
    --y: 50px;
    --x2: 300px;
    --color: #F4C009;

    @media (max-width: 1600px) {
        --x: 100px;
        --y: 30px;
        --x2: 200px;
    }
    @media (max-width: 1200px) {
        --x: 50px;
        --y: 20px;
        --x2: 100px;
    }
    @media (max-width: 991px) {
        --x: 30px;
        --y: 40px;
        --x2: 60px;
    }
    @media (max-width: 768px) {
        --x: 20px;
        --y: 30px;
        --x2: 40px;
    }
}
a {
    text-decoration: none;
    color: var(--color) !important;
}
a:hover {
    text-decoration: underline;
}
.btn-primary {
    box-shadow: 0px 4px 4px 0px #00000040 !important;
    background: var(--color) !important;
    color: #000 !important;
    padding: 10px 20px !important;
    border-radius: 2px !important;  
    border: 0 !important;
    margin: 0 10px;
}
.btn-secondary {
    box-shadow: 0px 4px 4px 0px #00000040 !important;
    background: #24242E !important;
    color: #FFF !important;
    padding: 10px 20px !important;
    border-radius: 2px !important;  
    border: 0 !important;
    margin: 0 10px;
}
.line {
    display: block;
    width: 135px;
    height: 5px;
    background: var(--color);
    text-align: center;
    margin: 10px auto 40px;
    position: relative;
    z-index: 3;
}
h2 {
    font-size: 28px;
    font-weight: 400;
    line-height: 41.5px;
    color: #000;
    text-align: center;
    position: relative;
    text-transform: uppercase;
}
h3 {
    font-size: 20px;
    font-weight: 300;
    line-height: 29.64px;
    color: #000;    
    text-align: center;    
}

.title-bg {
    position: absolute;
    text-align: center;
    width: 360px;
    height: 360px;
    z-index: 0;
    top: -160px;
    left: 50%;
    margin-left: -180px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(227, 229, 240, 0.98) 10%, rgba(189, 191, 208, 0) 100%);
}    

.col-xxl-2 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 1600px) {
    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}
.col-xxl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 1600px) {
    .col-xxl-auto {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        /* flex-grow: 1; */
        max-width: 100%;
        white-space: nowrap;
        /* margin: 0 auto; */
    }
}

html {
    scroll-behavior: smooth;
}

body {
    scroll-behavior: smooth;
    font-family: Oswald;
    font-size: 16px;
    font-weight: 400;
    line-height: 23.71px;
    color: #FFF;
    background: url('../images/hero-right-bg.jpg') no-repeat center center/cover;
}

header {
    background: url('../images/header-bg.png') no-repeat center center/cover;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    @media (max-width: 768px) {
        .navbar {
            margin-left: auto;
            margin-right: 70px;            

            .navbar-collapse {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.8);
                z-index: 999;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 20px;
                padding: 20px;
                width: 100%;
                transition: all 0.3s ease-in-out;
                color: #FFF;

                .close {
                    top: 5px;
                    right: 80px;
                    position: relative;
                    color: #FFF;
                }

                .navbar-nav {
                    float: right;
                    position: relative;
                    top: 50px;
                    right: 50px;
                    text-align: right;

                    .nav-link {
                        color: #FFF !important;
                        margin-bottom: 15px;
                    }
                }
            }       
        }
    }

    .nav-item {
        .nav-link {
            display: block;
            margin: 0 10px;
            text-transform: uppercase;
            color: #D3D5E3;
        }
    }
}

.hero {
    width: 100%;
    height: calc(100vh - 80px);
    position: relative;

    .image {
        background: url('../images/cnc.png') no-repeat center center/cover;
        width: 100%;        
        height: calc(100vh - 80px);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .content {
        position: relative;
        padding: var(--y) var(--x);
        z-index: 3;
        height: 100%;
        width: 100%;            

        h1 {
            font-size: 36px;
            font-weight: 700;
            line-height: 53.35px;        
            margin: 25px 0px 10px;
        }
        h2 {
            font-size: 24px;
            font-weight: 500;
            line-height: 35.57px;
            color: #FFF;
            text-align: left;
        }

        @media (max-width: 768px) {
            h1, h2 {
                display: none;
            }
        }

        .box {
            position: absolute;
            top: 200px;
            right: 200px;
            background: #24242E;
            padding: 25px;
            max-width: 250px;

            p {
                font-size: 14px;
                font-weight: 300;
                line-height: 20.75px;
                
                i {
                    color: var(--color);
                    margin-right: 15px;
                }
            }
            .h3 {
                font-size: 18px;
                font-weight: 400;
                line-height: 26.68px;    
                margin-bottom: 40px;        
                color: #FFF;
                text-align: left;                
            }
        }

        @media (max-width: 768px) {
            .box {
                position: relative;
                width: 100%;
                top: auto;
                bottom: 0;
                right: 0;
                max-width: none;
                margin-top: 50px;
            }
        }

    }
}

.hero::after {
    content: ' ';
    position: absolute;
    top: -80px;
    right: 0;
    background: #F4C009;
    width: 20vw;
    height: 80%;
    clip-path: polygon(38% 0, 100% 0%, 100% 100%, 0% 100%);
    z-index: 2;
}

@media (max-width: 768px) {
    .hero::after {
        width: 100px;
        height: 70%;
    }
}

.references {
    background: url('../images/references-bg.png') no-repeat bottom center/cover;
    padding: 0 var(--x);
    position: relative;
    min-height: 50vh;

    .title-bg {
        top: -340px;
    }

    .content {
        position: relative;
        top: -170px;
        /* top: -80px; */
        /* padding-top: 100px; */
        overflow: hidden;
        z-index: 2;

        .mySwiper {
            overflow: hidden;
            position: relative;

            .swiper-slide {
                img {
                    width: 100%;
                    min-width: 400px;
                    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
                    object-fit: cover;
                    height: 180px;
                    filter: grayscale(100%);
                }
                @media (max-width: 768px) {
                    img {
                        min-width: 100%;
                        clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
                    }
                }
            }
        }
        .buttons {
            position: absolute;
            top: 40px;
            right: -13px;
            display: flex;
            z-index: 3;

            .button-prev {
                background: #24242E;
                clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
                padding: 13px 20px;
                cursor: pointer;
            }
            .button-next {
                background: var(--color);
                clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
                padding: 13px 20px;
                position: relative;
                left: -13px;
                cursor: pointer;
            }
        }

        @media (max-width: 768px) {
            .buttons {
                display: none;
            }
        }

        .info {
            width: 50%;
            margin: 70px auto 0px;

            p:last-child {
                display: block;
                padding-top: 70px;
            }

        }      
    }

}

.services {
    background: url('../images/services-bg.png') no-repeat center center/cover;
    width: 100%;
    /* margin-top: -100px; */

    .content {
        background: url('../images/services-bg2.png') no-repeat center center/cover;
        backdrop-filter: blur(5px);
        width: 100%;
        position: relative;    
        padding: var(--y) var(--x);

        .service {
            display: flex;
            align-items: center;
            border: 1px solid var(--color);
            background: radial-gradient(50% 151.57% at 50% 50%, rgba(255, 255, 255, 0.2) 0%, rgba(160, 158, 158, 0.7) 100%);
            text-align: left;
            /* width: 100%; */
            width: auto;
            padding: 7px 10px 2px;
            margin-bottom: 20px;

            h3 {
                font-size: 14px;
                font-weight: 400;
                line-height: 20.75px;
                margin-left: 10px;     
                text-align: left;           
            }
        }
        .info {
            width: 50%;
            margin: 20px auto 0px;
            color: #000;
            max-width: 700px;
        }             
    }
}

.about {
    background: radial-gradient(50% 50% at 50% 50%, rgba(227, 229, 240, 0.8) 10%, rgba(189, 191, 208, 0) 100%);
    padding: var(--y) var(--x2);
    color: #000;
    text-align: left;

    .content {
        position: relative;

        .info {
            position: relative;
        }
    }

    @media (max-width: 768px) {
        .content {
            display: block !important;
        }
    }


}

.materials {
    background: url('../images/materials-bg.png') no-repeat center center/cover;
    padding: var(--y) var(--x);
    color: #FFF;
    text-align: left !important;
    position: relative;

    .content {
        padding-right: 350px;
        position: relative;

        @media (max-width: 768px) {
            padding-right: 0;

            .image {
                display: none;
            }
        }


        h2 {
            text-align: left !important;
            color: #fff;
        }
        .line {
            margin-left: 0;
            margin-right: 0;
        }
        .info {
            margin: 0px 130px 0px 0px;
        }

        .image {
            position: absolute;
            bottom: -65px;
            right: 0;
    
            img {
                position: relative;
                z-index: 2;
            }
        }
        .image::before {
            content: ' ';
            position: absolute;
            bottom: -30px;
            left: -60px;
            background: #F4C009;
            width: 170px;
            height: 50%;
            clip-path: polygon(30% 0%, 100% 0%, 75% 100%, 0% 100%);
            z-index: 1;
        }          
    }

  


    @media (max-width: 1100px) {
        .image {          
            bottom: -35px;
            img {
                width: 80%;
            }
        }
    }

}

.quality {
    .content {
        background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0) 100%);
        width: 100%;
        position: relative;    
        padding: var(--y) var(--x);
        color: #000;

        .col-lg-3 {
            -ms-flex-preferred-size: 0;
            flex-basis: 0;
            -ms-flex-positive: 1;
            flex-grow: 0;
            max-width: 100%;
            white-space: nowrap;            
        }

        .service {
            padding: 0px 50px;

            .image {
                border: 15px solid #D3D5E3;
                background: #24242E;
                padding: 15px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                position: relative;
            }
            .image::after {
                position: absolute;
                content: ' ';
                /* right: -13vw; */
                /* width: 5vw; */
                right: -160%;
                width: 100%;
                background: #000;
                height: 2px;
            }


            .text {
                margin-top: 30px;
                color: #000;

                .number {
                    color: #505166;
                    font-size: 30px;
                    font-weight: 400;
                    line-height: 44.46px;       
                    margin-bottom: 10px;
                }
                h3 {
                    font-size: 22px;
                    font-weight: 500;
                    line-height: 32.6px;        
                    margin-bottom: 10px;         
                    text-align: left;   
                }
                p {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 20.75px;                    
                }
            }
        }
        @media (min-width: 991px) {
            .col-lg-3:last-child .image::after {
                display: none;
            }        
        }
        @media (max-width: 991px) {
            .col-lg-3 .image::after {
                display: none;
            }        
        }
        .info {
            width: 50%;
            margin: 20px auto 0px;
            color: #000;
            max-width: 700px;
        }          
    }    
}

.machines {
    .content {
        position: relative;    

        .row {
            .service {
                background: linear-gradient(180deg, rgba(111, 112, 125, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
                padding: var(--y) var(--x);
                color: #fff;
                position: relative;
    
                h3 {
                    font-size: 22px;
                    font-weight: 500;
                    line-height: 32.6px;
                    text-align: left;                
                    color: #000;
                }
                h4 {
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 26.68px;
                    text-align: left;            
                    margin-bottom: 25px;    
                }
            }   
            .col-lg-6:nth-child(odd) .service {
                margin: 0px 5px 0px 0px;
            }
            .col-lg-6:nth-child(odd) .service::after {
                background: var(--color);
                clip-path: polygon(0 0, 100% 100%, 100% 0);
                content: ' ';
                position: absolute;
                top: 0;
                right: 0;
                width: 20%;
                height: 40%;
            }
            .col-lg-6:nth-child(even) .service {
                margin: 0px 0px 0px 5px;
            }   
            .col-lg-6:nth-child(even) .service::after {
                background: var(--color);
                clip-path: polygon(0 0, 0 100%, 100% 0);
                content: ' ';
                position: absolute;
                top: 0;
                left: 0;
                width: 20%;
                height: 40%;
            }   

            @media (max-width: 1200px) {
                .col-lg-6:nth-child(odd) .service::after {
                    width: 10%;
                    height: 20%;   
                }
                .col-lg-6:nth-child(even) .service::after {
                    width: 10%;
                    height: 20%;   
                }
            }
            @media (max-width: 991px) {
                .col-lg-6:nth-child(odd) .service {
                    margin: 0px 0px 0px 0px;
                }
                .col-lg-6:nth-child(even) .service {
                    margin: 0px 0px 0px 0px;
                }
                .col-lg-6:nth-child(odd) .service::after {
                    display: none; 
                }
                .col-lg-6:nth-child(even) .service::after {
                    display: none;
                }
            }

        }
    }
}

.contact {
    padding: var(--y) var(--x);

    @media (max-width: 768px) {
        padding: var(--y) 0;
    }

    .content {
        position: relative;
        padding: 30px 80px;
        z-index: 1;

        @media (max-width: 768px) {
            padding: 30px 20px;
        }

        h2 {
            text-align: left;
            color: #fff;
            font-size: 26px;
            font-weight: 400;
            line-height: 38.53px;            
        }
        .line {
            margin-left: 0;
            margin-right: 0;
        }

        .label {
            font-weight: 300;
            font-size: 14px;
            line-height: 21px;
            color: #FFFFFF; 
        }

        input, textarea {
            font-weight: 300;
            font-size: 14px;
            line-height: 21px;
            color: #000;
            background: #EDEEF066;
        }
        textarea {
            padding: 10px; 
            height: 200px;
        }
        
    }
    .content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-image: url('../images/contact-bg.png');
        background-size: cover;
        background-position: center;
        opacity: 0.7;
    }
}

.reviews {
    .content {
        position: relative;
        padding: var(--y) var(--x);

        .reviewsSwiper {
            overflow: hidden;
            position: relative;

            .swiper-wrapper {
                display: flex;
                justify-content: center; /* Horizontális középre igazítás */             
            }

            .swiper-slide {
                background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
                width: 100%;
                clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
                object-fit: cover;
                height: 180px;
                filter: grayscale(100%);
                padding: 25px 45px 45px 55px;

                .name {
                    position: absolute;
                    bottom: 20px;
                    right: 70px;
                }
            }
        }
    }
}

footer {
    .content {
        position: relative;
        padding: var(--y) var(--x);
        text-align: center;

        .d-flex {
            justify-content: center;
            gap: 20px;
            margin: 20px 0px;

            @media (max-width: 768px) {
                flex-direction: column;
                gap: 5px;
            }
        }
        .embed-responsive {
            height: 250px;
        }
    }   
    .links {
        background: #28282F;
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 20px;

        a, p {
            font-size: 12px;
            font-weight: 400;
            line-height: 17.78px;            
            margin-bottom: 0;
            color: #D3D5E3 !important;

        }
    }
}

@media (max-width: 1200px) {
    .info {
        width: 70% !important;
    }
}     

@media (max-width: 1000px) {
    .info {
        width: 90% !important;
    }
}     

@media (max-width: 768px) {
    .info {
        width: 100% !important;
    }
}     

.upload-container {
    input[type="file"] {
        display: none;
    }     

    .upload-list {
        display: flex;
        gap: 15px 30px;
        flex-wrap: wrap;
        color: #FFF;
        margin-bottom: 10px;

        .upload-item {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 300;
            line-height: 20.75px;          

            .upload-item-remove {
                cursor: pointer;
                margin-left: 10px;
            }
        }
    }
    .upload-button {
        color: var(--color);
        font-size: 14px;
        font-weight: 300;
        line-height: 20.75px;
        text-decoration-line: underline;
        text-decoration-style: solid;        
        cursor: pointer;
    }
}


/* Custom checkbox */
.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
    padding-top: 3px;
    cursor: pointer;
    font-size: 16px;
}
.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.control_indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 24px;
    width: 24px;
    background: #EDEEF0;
    border: 1px solid #ffffff;
    border-radius: 0px;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #cccccc;
}

.control input:checked ~ .control_indicator {
    background: #f4c009;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #0e6647d;
}
.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator:after {
    display: block;
}
.control-checkbox .control_indicator:after {
    left: 9px;
    top: 5px;
    width: 3px;
    height: 8px;
    border: solid #000000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}
.control-checkbox .control_indicator::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4.5rem;
    height: 4.5rem;
    margin-left: -1.3rem;
    margin-top: -1.3rem;
    background: #F4C009;
    border-radius: 3rem;
    opacity: 0.6;
    z-index: 99999;
    transform: scale(0);
}
@keyframes s-ripple {
    0% {
        transform: scale(0);
    }
    20% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes s-ripple-dup {
   0% {
       transform: scale(0);
    }
   30% {
        transform: scale(1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
.control-checkbox input + .control_indicator::before {
    animation: s-ripple 250ms ease-out;
}
.control-checkbox input:checked + .control_indicator::before {
    animation-name: s-ripple-dup;
}

.modal-content {
    color: #000;
}