/*========================================

LASER ENGRAVER 

Premium Design V1

========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:#090909;

    color:#ffffff;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:90%;

    max-width:1400px;

    margin:auto;

}
/*========================================

HEADER

========================================*/

#header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    transition:.4s;

    background:rgba(0,0,0,.18);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

}

#header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:95px;

}
.logo img{

    height:72px;

    transition:.3s;

}

.logo img:hover{

    transform:scale(1.05);

}
.menu{

    display:flex;

    align-items:center;

    gap:45px;

}

.menu>li{

    position:relative;

}

.menu>li>a{

    color:#ffffff;

    font-size:16px;

    font-weight:500;

    transition:.35s;

}

.menu>li>a:hover{

    color:#ff6b00;

}
.dropdown ul{

    position:absolute;

    top:45px;

    left:0;

    width:250px;

    background:#161616;

    border-radius:12px;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    box-shadow:0 20px 45px rgba(0,0,0,.45);

}

.dropdown:hover ul{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown ul li{

    border-bottom:1px solid rgba(255,255,255,.05);

}

.dropdown ul li:last-child{

    border:none;

}

.dropdown ul li a{

    display:block;

    color:#fff;

    padding:15px 20px;

    transition:.3s;

}

.dropdown ul li a:hover{

    background:#ff6b00;

    padding-left:28px;

}
.hero{

    height:100vh;

    background:url("../images/background.jpg");

    background-size:cover;

    background-position:center;

    position:relative;

    display:flex;

    align-items:center;

}
.hero-overlay{


    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.35) 0%,
        rgba(0,0,0,.15) 45%,
        rgba(0,0,0,0) 100%
    );

}
/*========================================

HERO CONTENT

========================================*/

.hero-container{

    position:relative;

    z-index:10;

    width:100%;

}

.hero-left{

    width:650px;

    animation:fadeUp 1.2s ease;

}

.hero-small{

    display:inline-block;

    color:#ff6b00;

    font-size:15px;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:25px;

    font-weight:600;

}

.hero-left h1{

    font-size:72px;

    line-height:82px;

    font-weight:800;

    margin-bottom:30px;

    color:#ffffff;

}

.hero-left h1 span{

    color:#ff6b00;

}

.hero-left p{

    font-size:19px;

    color:#d2d2d2;

    line-height:34px;

    width:90%;

    margin-bottom:45px;

}
/*========================================

BUTTONS

========================================*/

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn-orange{

    background:#ff6b00;

    color:#fff;

    padding:18px 42px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 10px 30px rgba(255,106,0,.35);

}

.btn-orange:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(255,106,0,.55);

}

.btn-transparent{

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

    padding:18px 42px;

    border-radius:50px;

    transition:.35s;

    backdrop-filter:blur(10px);

}

.btn-transparent:hover{

    background:#ffffff;

    color:#111;

}
/*========================================

SCROLL DOWN

========================================*/

.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    z-index:20;

}

.scroll-down span{

    width:28px;

    height:48px;

    border:2px solid #ffffff;

    display:block;

    border-radius:40px;

    position:relative;

}

.scroll-down span::before{

    content:"";

    width:6px;

    height:6px;

    background:#ff6b00;

    border-radius:50%;

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:8px;

    animation:scrollDown 2s infinite;

}
/*========================================

ANIMATIONS

========================================*/

@keyframes fadeUp{


    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*====================================================

HEADER ON SCROLL

====================================================*/

.header-scrolled{

    background:rgba(8,8,8,.95)!important;

    backdrop-filter:blur(25px);

    box-shadow:0 12px 35px rgba(0,0,0,.45);

    border-bottom:1px solid rgba(255,255,255,.05);

}

.header-scrolled .logo img{

    height:64px;

}
.menu>li>a{

    position:relative;

    padding:8px 0;

}

.menu>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#ff6b00;

    transition:.35s;

}

.menu>li>a:hover::after{

    width:100%;

}

.hero-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.hero-right{

    width:55%;

    display:flex;

    justify-content:flex-end;

}

.hero-right img{

    width:100%;

    max-width:850px;

    animation:floatImage 6s ease-in-out infinite;

}

@keyframes floatImage {

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.btn-transparent::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transition:.7s;

}

.btn-transparent:hover::before{

    left:100%;

}
.btn-orange{

    position:relative;

}

.btn-orange::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:50px;

    background:#ff6b00;

    z-index:-1;

    filter:blur(25px);

    opacity:.45;

}
.dropdown>a::before{

    content:"▼";

    font-size:9px;

    margin-right:8px;

    color:#ff6b00;

}
.language>a{

    color:#ff6b00!important;

    font-weight:600;

}
.logo{

    overflow:hidden;

}

.logo img{

    transition:.45s;

}

.logo:hover img{

    transform:scale(1.08);

}

.hero h1{color:#fff !important;}
.hero p{color:#d0d0d0 !important;}
.hero-right img{max-width:700px;width:100%;border-radius:18px;box-shadow:0 20px 50px rgba(255,120,0,.25);} 
.service-card img{width:64px !important;height:64px !important;object-fit:contain;margin:0 auto 20px;max-width:none !important;}


.flag-icon{width:20px;height:14px;object-fit:cover;vertical-align:middle;margin-right:8px;border-radius:2px;}


.contact-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:5000;align-items:center;justify-content:center}
.contact-modal.active{display:flex}
.contact-box{background:#161616;padding:30px;border-radius:16px;max-width:420px;width:90%;color:#fff;position:relative}
.contact-box h2{margin-bottom:15px;color:#ff6b00}
.contact-box p,.contact-box a{display:block;margin:10px 0;color:#fff}
.contact-close{position:absolute;top:12px;right:16px;font-size:28px;cursor:pointer}
.contact-box a.map{color:#ff6b00}

.quote-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);justify-content:center;align-items:center;z-index:9999}
.quote-box{background:#161616;padding:30px;border-radius:16px;width:90%;max-width:500px;color:#fff;position:relative}
.quote-close{position:absolute;right:18px;top:10px;font-size:30px;cursor:pointer}
.quote-box input,.quote-box textarea{width:100%;margin:10px 0;padding:12px;border-radius:8px;border:1px solid #444;background:#222;color:#fff}
.quote-box button{margin-top:10px;border:none;cursor:pointer}
