/* ================================
   DETECTIV PRO
   PREMIUM DARK STYLE
   STYLE.CSS PART 1
================================ */


/* RESET */

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


html {
    scroll-behavior:smooth;
}


body {

    background:#07090d;
    color:#ffffff;

    font-family:
    'Inter',
    Arial,
    sans-serif;

    line-height:1.6;

}


a {

    text-decoration:none;
    color:inherit;

}


img{

max-width:100%;
display:block;

user-select:none;
-webkit-user-drag:none;

}

.container {

    width:90%;
    max-width:1200px;
    margin:auto;

}



/* ================================
 HEADER
================================ */


header {

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    padding:22px 0;

    transition:.4s;

}


header.scrolled {

    background:
    rgba(7,9,13,.92);

    backdrop-filter:
    blur(15px);

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

}



header .container {

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    font-size:30px;

    font-weight:800;

    letter-spacing:-1px;

}


.logo span {

    color:#d4af37;

}



nav {

    display:flex;

    gap:35px;

}



nav a {

    color:#cbd5e1;

    font-size:16px;

    transition:.3s;

}


nav a:hover {

    color:#d4af37;

}



.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
    135deg,
    #d4af37,
    #f6d365
    );


    color:#111;

    padding:15px 32px;

    border-radius:8px;

    font-weight:700;

    transition:.3s;

    border:none;

    cursor:pointer;

}



.btn:hover {

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(212,175,55,.35);

}



.btn-outline {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:14px 32px;


    border:

    1px solid rgba(255,255,255,.25);


    border-radius:8px;


    color:white;


    transition:.3s;

}



.btn-outline:hover {

    background:white;

    color:#111;

}



/* ================================
 HERO
================================ */


.hero {


    min-height:100vh;


    display:flex;

    align-items:center;


    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

    90deg,

    rgba(7,9,13,.95),

    rgba(7,9,13,.55)

    ),

    url("../images/hero.jpg")

    center/cover no-repeat;


}


.overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;
z-index:1;
pointer-events:none;

background:
radial-gradient(
circle at center,
transparent,
rgba(0,0,0,.45)
);

}



.hero-content {

    position:relative;

    z-index:2;

    padding-top:80px;

}



.hero-text {

    max-width:750px;

}



.hero-badge {


    display:inline-block;


    padding:8px 18px;


    border-radius:50px;


    background:

    rgba(212,175,55,.12);



    color:#d4af37;


    border:

    1px solid rgba(212,175,55,.25);


    margin-bottom:25px;


    font-weight:600;


}



.hero h1 {


    font-size:64px;


    line-height:1.1;


    letter-spacing:-2px;


    margin-bottom:25px;



}



.hero p {


    color:#cbd5e1;


    font-size:21px;


    max-width:650px;


    margin-bottom:40px;


}



.hero-buttons {


    display:flex;


    gap:20px;


    flex-wrap:wrap;


}



/* ================================
 SECTION BASE
================================ */


section {

    padding:100px 0;

}



.section-title {


    text-align:center;


    max-width:750px;


    margin:

    0 auto 60px;


}



.section-title h2 {


    font-size:42px;


    margin-bottom:15px;


}



.section-title p {


    color:#94a3b8;


    font-size:18px;


}



/* ================================
 CARDS
================================ */


.cards {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));


    gap:25px;


}



.card,
.service,
.job {


    background:

    rgba(255,255,255,.04);



    border:

    1px solid rgba(255,255,255,.08);



    padding:35px;


    border-radius:20px;


    backdrop-filter:blur(12px);



    transition:.35s;


}



.card:hover,
.service:hover,
.job:hover {


    transform:translateY(-8px);


    border-color:

    rgba(212,175,55,.5);



    box-shadow:

    0 20px 50px rgba(0,0,0,.35);


}



.card h3,
.service h3,
.job h3 {


    font-size:22px;


    margin-bottom:15px;


}



.card p,
.service p,
.job p {


    color:#aab4c4;


}
/* ================================
   PART 2
   SERVICES / ADVANTAGES / JOBS
================================ */


/* ================================
 ABOUT SECTION
================================ */


#about {

    background:

    linear-gradient(
    180deg,
    #07090d,
    #0b1018
    );

}



#about .section-title p {

    max-width:850px;

    margin:auto;

}



/* ================================
 SERVICES
================================ */


#services {

    background:#0b1018;

}



.service {


    min-height:230px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    position:relative;


    overflow:hidden;


}



.service::before {


    content:"";


    position:absolute;


    width:100px;

    height:100px;


    right:-30px;

    top:-30px;


    background:

    radial-gradient(

    circle,

    rgba(212,175,55,.25),

    transparent 70%

    );


}



.service h3 {


    position:relative;

    z-index:2;


}



.service p {


    position:relative;

    z-index:2;


}



/* ================================
 ADVANTAGES
================================ */


.advantages {


    background:


    linear-gradient(

    180deg,

    #0b1018,

    #07090d

    );


}



.stats {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(200px,1fr));


    gap:25px;


}



.stats div {


    text-align:center;


    padding:35px;


    background:

    rgba(255,255,255,.03);


    border:

    1px solid rgba(255,255,255,.08);


    border-radius:18px;



}



.stats h3 {


    font-size:48px;


    color:#d4af37;


    line-height:1;


    margin-bottom:10px;


}



.stats p {


    color:#94a3b8;


    font-size:17px;


}



/* ================================
 JOBS SECTION
================================ */


#jobs {


    background:#07090d;


}



.job {


    display:flex;


    flex-direction:column;


}



.job h3 {


    min-height:55px;


}



.salary {


    color:#d4af37;


    font-size:28px;


    font-weight:800;


    margin-bottom:20px;


}



.job p {


    margin-bottom:30px;


    min-height:80px;


}



.job .btn {


    margin-top:auto;


    width:100%;


}



/* ================================
 CONTACT SECTION
================================ */


#contacts {


    background:


    linear-gradient(

    180deg,

    #07090d,

    #0b1018

    );


}



form {


    max-width:600px;


    margin:auto;


    display:flex;


    flex-direction:column;


    gap:15px;


}



input,
textarea {


    width:100%;


    padding:17px 20px;


    background:

    rgba(255,255,255,.06);



    border:

    1px solid rgba(255,255,255,.12);



    border-radius:12px;


    color:white;


    font-size:16px;


    outline:none;


    transition:.3s;


}



input:focus,
textarea:focus {


    border-color:#d4af37;


    background:

    rgba(255,255,255,.09);


}



textarea{

min-height:140px;

resize:none;

font-family:inherit;

}


button {


    padding:18px;


    background:

    linear-gradient(

    135deg,

    #d4af37,

    #f6d365

    );



    color:#111;


    border:none;


    border-radius:10px;


    font-weight:800;


    font-size:17px;


    cursor:pointer;


    transition:.3s;


}



button:hover {


    transform:translateY(-3px);


    box-shadow:

    0 15px 40px rgba(212,175,55,.3);


}



/* ================================
 FOOTER
================================ */


footer {


    background:#05070a;


    padding:50px 0;


    border-top:

    1px solid rgba(255,255,255,.08);


}



.footer {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));


    gap:30px;


}



.footer h3 {


    font-size:28px;


    margin-bottom:15px;


}



.footer p {


    color:#94a3b8;


}



.footer a {


    display:block;


    color:#94a3b8;


    margin-bottom:10px;


    transition:.3s;


}



.footer a:hover {


    color:#d4af37;


}



/* ================================
 ANIMATIONS
================================ */


.card,
.service,
.job,
.stats div {


    animation:

    fadeUp .8s ease both;


}



@keyframes fadeUp {


    from {


        opacity:0;


        transform:

        translateY(30px);


    }


    to {


        opacity:1;


        transform:

        translateY(0);


    }


}



/* ================================
 MOBILE MENU SUPPORT
================================ */


.menu-toggle {


    display:none;


    font-size:30px;


    cursor:pointer;


}



/* ================================
 TABLET
================================ */


@media(max-width:900px){


    nav {


        display:none;


    }



    .menu-toggle {


        display:block;


    }



    .hero h1 {


        font-size:48px;


    }



    .hero p {


        font-size:18px;


    }



}



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


@media(max-width:600px){


    .container {


        width:92%;


    }



    section {


        padding:70px 0;


    }



    .hero {


        min-height:90vh;


        background-position:center;


    }



    .hero h1 {


        font-size:38px;


        letter-spacing:-1px;


    }



    .hero p {


        font-size:16px;


    }



    .hero-buttons {


        flex-direction:column;


    }



    .hero-buttons a {


        width:100%;


    }



    .section-title h2 {


        font-size:32px;


    }



    .stats h3 {


        font-size:38px;


    }



    .job,
    .card,
    .service {


        padding:25px;


    }


}
/* ================================
   PART 3
   FINAL POLISH
   EFFECTS / MENU / PREMIUM DETAILS
================================ */


/* ================================
   PREMIUM GLOW EFFECTS
================================ */


.hero::after {

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-150px;

    bottom:-150px;


    background:

    radial-gradient(

    circle,

    rgba(212,175,55,.18),

    transparent 70%

    );


    pointer-events:none;

}



.logo,
.hero h1,
.section-title h2 {

    text-shadow:

    0 0 30px rgba(212,175,55,.08);

}



/* ================================
   HEADER MOBILE MENU
================================ */


.mobile-menu {


    position:fixed;


    top:0;


    right:-100%;


    width:300px;


    height:100vh;


    background:#090d14;


    padding:100px 35px;


    z-index:2000;


    transition:.4s;


    box-shadow:

    -20px 0 60px rgba(0,0,0,.5);


}



.mobile-menu.active {


    right:0;


}



.mobile-menu a {


    display:block;


    font-size:20px;


    margin-bottom:25px;


    color:#cbd5e1;


}



.mobile-menu a:hover {


    color:#d4af37;


}



.close-menu {


    position:absolute;


    top:25px;


    right:25px;


    font-size:30px;


    cursor:pointer;


}



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


.image-box {


    overflow:hidden;


    border-radius:20px;


}



.image-box img {


    transition:.6s;


}



.image-box:hover img {


    transform:scale(1.08);


}



/* ================================
   GLASS EFFECT
================================ */


.glass {


    background:

    rgba(255,255,255,.05);


    backdrop-filter:

    blur(20px);


    border:

    1px solid rgba(255,255,255,.1);


}



/* ================================
   HOVER GOLD LINE
================================ */


.service,
.job,
.card {


    position:relative;


    overflow:hidden;


}



.service::after,
.job::after,
.card::after {


    content:"";


    position:absolute;


    left:0;


    bottom:0;


    width:0;


    height:3px;


    background:#d4af37;


    transition:.4s;


}



.service:hover::after,
.job:hover::after,
.card:hover::after {


    width:100%;


}



/* ================================
   BUTTON PULSE
================================ */


.hero .btn {


    animation:

    pulse 3s infinite;


}



@keyframes pulse {


    0% {


        box-shadow:

        0 0 0 0 rgba(212,175,55,.5);


    }


    70% {


        box-shadow:

        0 0 0 18px rgba(212,175,55,0);


    }


    100% {


        box-shadow:

        0 0 0 0 rgba(212,175,55,0);


    }


}



/* ================================
   SCROLL REVEAL
================================ */


.reveal {


    opacity:0;


    transform:

    translateY(40px);


    transition:

    .8s ease;


}



.reveal.show {


    opacity:1;


    transform:

    translateY(0);


}



/* ================================
   JOB CARD SPECIAL
================================ */


.job {


    border:

    1px solid rgba(212,175,55,.15);


}



.job:hover {


    background:


    rgba(212,175,55,.05);


}



.job .salary {


    display:flex;


    align-items:center;


    gap:10px;


}



.job .salary::before {


    content:"💰";


}



/* ================================
   CONTACT DECORATION
================================ */


#contacts form {


    position:relative;


}



#contacts form::before {


    content:"";


    position:absolute;


    width:180px;


    height:180px;


    top:-80px;


    right:-80px;


    background:


    radial-gradient(

    circle,

    rgba(212,175,55,.2),

    transparent 70%

    );


    z-index:-1;


}



/* ================================
   SCROLLBAR
================================ */


::-webkit-scrollbar {


    width:10px;


}



::-webkit-scrollbar-track {


    background:#07090d;


}



::-webkit-scrollbar-thumb {


    background:#d4af37;


    border-radius:20px;


}



/* ================================
   SELECTION
================================ */


::selection {


    background:#d4af37;


    color:#111;


}



/* ================================
   EXTRA MOBILE FIXES
================================ */


@media(max-width:480px){


    .logo {


        font-size:24px;


    }



    header .btn {


        display:none;


    }



    .hero {


        background-position:

        60% center;


    }



    .hero h1 {


        font-size:34px;


    }



    .salary {


        font-size:24px;


    }


}
.about-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}


.about-image img{

width:100%;

height:500px;

object-fit:cover;

border-radius:25px;

transition:.6s;

}


.about-text h2{

font-size:42px;

margin-bottom:20px;

}


.about-text p{

color:#94a3b8;

font-size:18px;

margin-bottom:30px;

}

@media(max-width:800px){

    .about-wrapper{

        grid-template-columns:1fr;

    }


}


/* SERVICE IMAGES */

.service img{

width:100%;

height:220px;

object-fit:cover;

border-radius:16px;

margin-bottom:20px;

transition:.5s;

}

.service:hover img{

transform:scale(1.05);

}


/* JOB IMAGES */

.job img{

width:100%;

height:220px;

object-fit:cover;

border-radius:16px;

margin-bottom:20px;

transition:.5s;

}

.job:hover img{

transform:scale(1.05);

}


/* ABOUT IMAGE */

.about-image{

overflow:hidden;

border-radius:25px;

}

.about-image img{

transition:.6s;

}

.about-image:hover img{

transform:scale(1.05);

}
.top-button{

position:fixed;

right:30px;

bottom:30px;

width:50px;

height:50px;

border-radius:50%;

background:#d4af37;

color:#111;

font-size:25px;

border:none;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9999;

}


.top-button.show{

opacity:1;

visibility:visible;

}


.success-popup{

position:fixed;

right:30px;

bottom:30px;

background:#0b1018;

border:1px solid rgba(212,175,55,.5);

padding:25px;

border-radius:20px;

color:white;

z-index:9999;

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

animation:
popup .4s ease;

}


.success-icon{

width:45px;

height:45px;

border-radius:50%;

background:#d4af37;

color:#111;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

margin-bottom:10px;

}


.success-popup.hide{

opacity:0;

transform:translateY(20px);

}


@keyframes popup{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* FIX MOBILE HORIZONTAL SCROLL */

html,
body {
    overflow-x:hidden;
    width:100%;
}


img {
    max-width:100%;
}


@media(max-width:600px){

    .cards {
        grid-template-columns:1fr;
    }


    .mobile-menu {
        width:85vw;
    }


    .about-image img {
        height:300px;
    }


    .hero::after {
        width:300px;
        height:300px;
        right:-100px;
        bottom:-100px;
    }

}