*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter', sans-serif;

}

html, body{
    background:#0A0F10;
    color:#fff;

    /*overflow-x:hidden;*/
    width:100%;
    
}

section,
.container,
.hero,
header,
footer{

    max-width:100%;
    /*overflow:hidden;*/

}

img{

    max-width:100%;
    height:auto;
    display:block;
}

/* TOP BAR */
.topbar{
    display:flex;
    justify-content:space-between;
    padding:10px 40px;
    background:#0d1112;
    font-size:12px;
    color:#aaa;
}

.topbar a{
    color:#F7941D;
    margin-left:10px;
    text-decoration:none;
}

/* HEADER */
.header{
    position:sticky;
    top:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 50px;
    background:rgba(10,15,16,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(247,148,29,0.2);
    z-index:10000; /* very high */
}

/* LOGO CONTAINER */
.logo{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* LOGO IMAGE */
.logo img{
    height:60px;
    width:auto;
    object-fit:contain;
    /*transition:0.3s;*/
}

/* OPTIONAL HOVER EFFECT */
.logo img:hover{
    transform:scale(1.05);
}

/* HAMBURGER */
.menu-toggle{
    display:none;
    font-size:26px;
    cursor:pointer;
    color:#fff;
    z-index:10001;
}

.menu-toggle:hover{
    transform:scale(1.05);
}

/* MOBILE MENU */
.mobile-menu{
    position:fixed;
    top:120px;
    right:-100%;
    width:260px;
    height:100%;
    background:#111;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:15px;
    /*transition:0.4s ease;*/
    z-index:10000;
}

/* ACTIVE */
.mobile-menu.active{
    right:0;
}

/* LINKS */
.mobile-menu a,
.mobile-link{
    color:#ccc;
    text-decoration:none;
    font-size:16px;
    cursor:pointer;
}

.mobile-menu a:hover,
.mobile-link:hover{
    color:#F7941D;
}

/* SUBMENUS */
.mobile-submenu{
    display:none;
    padding-left:15px;
    margin-top:5px;
}

.mobile-submenu.active{
    display:flex;
    right : 100%;
    flex-direction:column;
}

nav a{
    margin-left:20px;
    text-decoration:none;
    color:#fff;
    font-size:14px;
    /*transition:0.3s;*/
}
nav .active{
    border:1px solid #F7941D;
    border-radius:6px;
    padding:8px 14px;
}

nav a:hover{
    color:#F7941D;
}

.cta{
    padding:8px 14px;
    background:#F7941D;
    color:#111 !important;
    border-radius:6px;
}

.cta-active{
    padding:8px 14px;
    background:transparent;
    color:#F7941D !important;
    border-radius:6px;
    
    border:1px solid #F7941D;
    padding:8px 14px;
}


/* DROPDOWN BASE */
.dropdown{
    position:relative;
    display:inline-block;
}

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    background:#111;
    min-width:220px;
    border-radius:8px;
    border:1px solid rgba(247,148,29,0.2);
    display:none;
    flex-direction:column;
    z-index:1000;
}

/* SHOW ON HOVER */
.dropdown:hover .dropdown-menu{
    display:flex;
}

/* LINKS */
.dropdown-menu a{
    padding:10px 15px;
    color:#ccc;
    text-decoration:none;
    /*transition:0.3s;*/
}

.dropdown-menu a:hover{
    background:#1a1a1a;
    color:#F7941D;
}

/* SUB MENU */
.dropdown-sub{
    position:relative;
}

.sub-menu{
    position:absolute;
    top:100%;
    left:0;
    background:#111;
    min-width:200px;
    border-radius:8px;
    border:1px solid rgba(247,148,29,0.2);
    display:none;
}

/* SHOW SUB MENU */
.dropdown-sub:hover .sub-menu{
    display:flex;
    left: 50px;
    flex-direction:column;
    
}

/* ARROW ALIGN */
.dropdown-sub > a{
    display:flex;
    justify-content:space-between;
    align-items:center;
}



/* HERO */
.hero{
    height:95vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:url('../images/technical-station.jpg') center/cover no-repeat;
    position:relative;
    
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(10,15,16,0.6), rgba(10,15,16,0.95));
    z-index:1; /* very low */
}

.hero-content{
    position:relative;
    max-width:850px;
    z-index:2; /* very high */
}

.hero h1{
    font-size:52px;
    line-height:1.2;
}

.hero p{
    margin-top:15px;
    color:#bbb;
}

.hero-buttons{
    margin-top:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;
}

.btn-primary{
    background:#F7941D;
    color:#111;
    padding:12px 18px;
    border-radius:8px;
    text-decoration:none;
    margin-right:10px;
}

.btn-outline{
    border:1px solid #F7941D;
    color:#F7941D;
    padding:12px 18px;
    border-radius:8px;
    text-decoration:none;
}

/* INTRO */
.intro{
    padding:60px 40px;
    text-align:center;
}

.intro-box{
    max-width:800px;
    margin:auto;
}

.intro h2{
    color:#F7941D;
}

/* SERVICES */
.services{
    padding:80px 40px;
}

.services h2{
    text-align:center;
    font-size:34px;
}

.subtext{
    text-align:center;
    color:#777;
    margin-bottom:40px;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:25px;
}

.service-card{
    background:#111;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(247,148,29,0.1);
    /*transition:0.4s;*/
}

.service-card:hover{
    transform:translateY(-8px);
    border-color:#F7941D;
}

.service-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.service-info{
    padding:15px;
}

.service-info h3{
    margin-bottom:8px;
}

.service-info p{
    color:#aaa;
    font-size:14px;
}

.service-info a{
    display:inline-block;
    margin-top:10px;
    color:#F7941D;
    text-decoration:none;
}

/* WHY SECTION */
.why{
    padding:80px 40px;
    background:#0d1112;
}

.why-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}

.why-text ul{
    margin-top:15px;
    list-style:none;
    color:#ccc;
}

.why-text li{
    margin-bottom:10px;
}

.why-image{
    height:350px;
    background:url('../images/why-us.jpg') center/cover;
    border-radius:14px;
}

/*About  */

.page-hero{
    height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    background:url('../images/about-us.jpg') center/cover no-repeat;
}

.page-hero .hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(10,15,16,0.85);
}

.page-hero .hero-content{
    position:relative;
    max-width:700px;
}

.page-hero h1{
    font-size:42px;
}

.about-section{
    padding:80px 40px;
    background:#0A0F10;
}

.about-section .container{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:40px;
    align-items:center;
}

.text-block h2{
    color:#F7941D;
    margin-bottom:15px;
}

.text-block p{
    color:#bbb;
    margin-bottom:15px;
    line-height:1.6;
}

.image-block{
    height:400px;
    border-radius:14px;
    background-size:cover;
    background-position:center;
}

.about-img1{
    background-image:url('../images/who-we-are.jpg');
}

.split-section{
    padding:80px 40px;
}

.split-section.dark{
    background:#0d1112;
}

.split-container{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:40px;
    align-items:center;
}

.split-image{
    height:420px;
    border-radius:14px;
    background-size:cover;
    background-position:center;
}

.vision-img{
    background-image:url('../images/vision-mission.jpg');
}

.split-text h2{
    color:#F7941D;
    margin-bottom:15px;
}

.split-text h3{
    margin-top:15px;
    color:#fff;
}

.split-text p{
    color:#bbb;
    line-height:1.6;
}

.values-section{
    padding:80px 40px;
    background:#0A0F10;
    text-align:center;
}

.values-section h2{
    font-size:34px;
}

.values-grid{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:20px;
}

.value-card{
    background:#111;
    padding:25px;
    border-radius:14px;
    border:1px solid rgba(247,148,29,0.15);
    /*transition:0.3s;*/
}

.value-card:hover{
    transform:translateY(-6px);
    border-color:#F7941D;
}

.value-card h3{
    color:#F7941D;
    margin-bottom:10px;
}

.value-card p{
    color:#aaa;
    font-size:14px;
}

/* services */

.services-hero{
    background:url('../images/our-services.jpg') center/cover no-repeat;
}

.services-page{
    padding:80px 40px;
    background:#0A0F10;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:25px;
}

/* TILE */
.service-tile{
    position:relative;
    display:block;
    border-radius:14px;
    overflow:hidden;
    text-decoration:none;
    height:320px;
    border:1px solid rgba(247,148,29,0.15);
    /*transition:0.4s;*/
}

/* IMAGE */
.service-tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.5s;
}

/* OVERLAY */
.tile-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px;
    color:#fff;
}

/* TEXT */
.tile-overlay h3{
    color:#F7941D;
    margin-bottom:5px;
}

.tile-overlay p{
    color:#ccc;
    font-size:13px;
}

/* CTA ARROW */
.tile-overlay span{
    margin-top:10px;
    color:#F7941D;
    font-weight:600;
}

/* HOVER EFFECT */
.service-tile:hover{
    transform:translateY(-8px);
    border-color:#F7941D;
    box-shadow:0 10px 30px rgba(247,148,29,0.15);
}

.service-tile:hover img{
    transform:scale(1.08);
}

.industries{
    padding:80px 40px;
    background:#fff;
    text-align:center;
}

.industries h2{
    margin-bottom:10px;
}

.industries .subtext{
    color:#555;
    margin-bottom:40px;
}

/* GRID */
.industry-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:25px;
}

/* CARD */
.industry-card{
    background:#111;
    border-radius:12px;
    overflow:hidden;
    /*transition:0.3s;*/
    border:1px solid rgba(247,148,29,0.15);
}

.industry-card:hover{
    transform:translateY(-6px);
    border-color:#F7941D;
}

/* IMAGE */
.industry-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}

/* CONTENT */
.industry-info{
    padding:15px;
    text-align:left;
}

.industry-info h3{
    color:#F7941D;
    margin-bottom:8px;
}

.industry-info p{
    color:#bbb;
    font-size:14px;
    line-height:1.5;
}

/* services - software*/
.software-hero{
    background:url('../images/software-engineering.jpg') center/cover no-repeat;
}
.content-section{
    padding:80px 40px;
    background:#0A0F10;
}

.content-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:40px;
    align-items:center;
}

.content-grid.reverse{
    grid-template-columns:1fr 1.2fr;
}

.text h2{
    color:#F7941D;
    margin-bottom:15px;
}

.text p{
    color:#bbb;
    margin-bottom:15px;
    line-height:1.6;
}

.image{
    height:420px;
    border-radius:14px;
    background-size:cover;
    background-position:center;
}

.software-img1{
    background-image:url('../images/software-development.jpg');
}

.software-img2{
    background-image:url('../images/software-application.jpg');
}

.dark-section{
    padding:80px 40px;
    background:#0d1112;
    text-align:center;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:20px;
    margin-top:40px;
}

.feature-card{
    background:#111;
    padding:25px;
    border-radius:14px;
    border:1px solid rgba(247,148,29,0.15);
    /*transition:0.3s;*/
}

.feature-card:hover{
    transform:translateY(-6px);
    border-color:#F7941D;
}

.feature-card h3{
    color:#F7941D;
    margin-bottom:10px;
}

.feature-card p{
    color:#aaa;
    font-size:14px;
    line-height:1.6;
}

.approach{
    padding:80px 40px;
    background:#0A0F10;
    text-align:center;
}

.steps{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:20px;
    margin-top:40px;
}

.step{
    background:#111;
    padding:20px;
    border-radius:12px;
    border-left:3px solid #F7941D;
}

.step h3{
    color:#F7941D;
    margin-bottom:10px;
}

.step p{
    color:#bbb;
    font-size:14px;
}

/* services - electronics*/
.electronics-hero{
    background:url('../images/electronics-engineering.jpg') center/cover no-repeat;
}
.electronics-img1{
    background-image:url('../images/electronics-custom.jpg');
}

.electronics-img2{
    background-image:url('../images/electronics-applied.jpg');
}

.electronics-core{
    padding:80px 40px;
    background:#0A0F10;
    text-align:center;
}

.core-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:20px;
    margin-top:40px;
}

.core-card{
    background:#111;
    padding:25px;
    border-radius:14px;
    border:1px solid rgba(247,148,29,0.15);
    /*transition:0.3s;*/
}

.core-card:hover{
    transform:translateY(-6px);
    border-color:#F7941D;
}

.core-card h3{
    color:#F7941D;
    margin-bottom:10px;
}

.core-card p{
    color:#aaa;
    font-size:14px;
    line-height:1.6;
}

/* services - 3D CAD Design */
.cad-hero{
    background:url('../images/cad-design.jpg') center/cover no-repeat;
}
.cad-img1{
    background-image:url('../images/cad-info.jpg');
}
.cad-workflow{
    background-image:url('../images/cad-prototype.jpg');
}


/* services - manufacturing*/
.manufacturing-hero{
    background:url('../images/volume-manufacturing.jpg') center/cover no-repeat;
}

.manufacturing-img1{
    background:url('../images/manufacturing-machine.jpg') center/cover no-repeat;
}

.cad-img{
    background-image:url('../images/cad-product-design.jpg');
}

.print-img{
    background-image:url('../images/3d-printing.jpg');
}
.cnc-img{
    background-image:url('../images/cnc-milling.jpg');
}

/* services - out work*/
.work-hero{
    height:95vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:url('../images/our-work.jpg') center/cover no-repeat;
    position:relative;
    
}

.articles{
    padding:60px 40px;
    background:#0A0F10;
    display:flex;
    flex-direction:column;
    gap:30px;
}

/* ARTICLE CARD */
.article{
    background:#111;
    border:1px solid rgba(247,148,29,0.15);
    border-radius:14px;
    padding:20px;
}

/* HEADER */
.article-header{
    display:flex;
    gap:20px;
    align-items:center;
}

.article-header img{
    width:210px;
    height:170px;
    object-fit:cover;
    border-radius:10px;
}

/* TAG */
.tag{
    color:#F7941D;
    font-size:13px;
    margin-top:5px;
}

/* FULL CONTENT (HIDDEN INITIALLY) */
.article-full{
    display:none;
    margin-top:15px;
    border-top:1px solid #222;
    padding-top:15px;
}

.article-full h3{
    color:#F7941D;
    margin-top:10px;
}

.article-images{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:15px;
    margin:15px 0;
}

.article-images img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid rgba(247,148,29,0.15);
    /*transition:0.3s;*/
}

.article-images img:hover{
    transform:scale(1.03);
    border-color:#F7941D;
}

/* BUTTON */
.read-btn{
    margin-top:15px;
    background:#F7941D;
    border:none;
    padding:8px 14px;
    cursor:pointer;
    color:#111;
    border-radius:6px;
}

.read-btn:hover{
    background:#FFA733;
}


/*  Contact Page */

.contact-hero{
    height:95vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:url('../images/contact-us.jpg') center/cover no-repeat;
    position:relative;
    
}

.contact-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(10,15,16,0.6), rgba(10,15,16,0.95));
    z-index:1; /* very low */
}

.contact-hero-content{
    position:relative;
    max-width:850px;
    z-index:2; /* very high */
}

.contact-hero h1{
    font-size:52px;
    line-height:1.2;
}

.contact-hero p{
    margin-top:15px;
    color:#bbb;
}
.contact-section{
    padding:80px 40px;
    background:#0A0F10;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:40px;
}

/* CONTACT INFO */
.contact-info h2{
    color:#F7941D;
    margin-bottom:15px;
}

.contact-info p{
    margin-bottom:10px;
    color:#bbb;
}

.info-grid{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:40px;
}

/* MAP */
.map iframe{
    width:100%;
    height:250px;
    border:none;
    margin-top:20px;
    border-radius:10px;
}

/* FORM */
.contact-form h2{
    color:#F7941D;
    margin-bottom:15px;
}


.contact-form form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.form-row{
    display:flex;
    gap:10px;
}

.form-row input{
    flex:1;
}

input, textarea, select{
    padding:10px;
    border-radius:6px;
    border:1px solid #333;
    background:#111;
    color:#fff;
}

input:focus, textarea:focus, select:focus{
    border-color:#F7941D;
    outline:none;
}

/* VERIFY */
.verify{
    display:flex;
    align-items:center;
    gap:10px;
    color:#bbb;
}

/* BUTTON */
button{
    background:#F7941D;
    color:#111;
    border:none;
    padding:10px;
    cursor:pointer;
    border-radius:6px;
    font-weight:600;
}

button:hover{
    background:#FFA733;
}

/*=================================
MODALS
=================================*/

.modal{

    display:none;

    position:fixed;

    z-index:99999;

    left:0;
    top:0;

    width:100%;
    height:100%;

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

    justify-content:center;
    align-items:center;

    animation:fadeIn .3s;
}

.modal-content{

    background:#fff;

    width:90%;
    max-width:520px;

    border-radius:12px;

    padding:40px;

    text-align:center;

    animation:scaleIn .3s;
}

.modal-content h2{

    margin-top:20px;
    color:#111;
}

.modal-content p{

    margin:20px 0;
    line-height:1.7;
    color:#555;
}

.modal-btn{

    background:#F7941D;

    color:#111;

    border:none;

    padding:14px 35px;

    border-radius:6px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;
}

.modal-btn:hover{

    background:#FFA733;

}

.modal-icon{

    width:90px;
    height:90px;

    border-radius:50%;

    margin:auto;

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:42px;

    color:#fff;
}

.success-icon{

    background:#28a745;

}

.error-icon{

    background:#dc3545;

}

@keyframes fadeIn{

    from{opacity:0;}
    to{opacity:1;}

}

@keyframes scaleIn{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* FOOTER */
.footer{
    padding:60px 40px;
    background:#0A0F10;
    border-top:1px solid rgba(247,148,29,0.2);
}

.footer-grid{
    /*display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;*/

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

    max-width:1400px;

    margin:auto;
}

.footer h3, .footer h4{
    color:#F7941D;
    margin-bottom:10px;
}

.footer a{
    display:block;
    color:#aaa;
    text-decoration:none;
    margin:6px 0;
}

.footer-bottom{
    margin-top:40px;
    text-align:center;
    color:#666;
    border-top:1px solid #222;
    padding-top:15px;
}


/*==================================
404 PAGE
==================================*/

.error-page{

    margin:0;
    font-family:'Inter',sans-serif;

    background:
    linear-gradient(rgba(10,15,16,.82),rgba(10,15,16,.82)),
    url("../images/404-bg.jpg");

    background-size:cover;
    background-position:center;

    min-height:100vh;

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

    color:#fff;
}

.error-container{

    width:90%;
    max-width:700px;
    text-align:center;

}

.error-content h1{

    font-size:9rem;
    color:#F7941D;
    margin:0;

    line-height:1;

}

.error-content h2{

    font-size:2.4rem;
    margin:20px 0;

}

.error-content p{

    max-width:550px;
    margin:auto;

    color:#d0d0d0;

    line-height:1.8;
}

.error-buttons{

    margin-top:40px;

    display:flex;
    justify-content:center;
    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    background:#F7941D;
    color:#111;

    padding:14px 32px;

    border-radius:6px;

    text-decoration:none;

    transition:.3s;

    font-weight:600;

}

.btn-primary:hover{

    background:#FFA733;

}

.btn-secondary{

    border:2px solid #F7941D;

    color:#fff;

    padding:14px 32px;

    border-radius:6px;

    text-decoration:none;

    transition:.3s;

}

.btn-secondary:hover{

    background:#F7941D;

    color:#111;

}