/*==================================
  KOCH SECURITY LLC
  Main Stylesheet
==================================*/


/*==================================
  CSS VARIABLES
==================================*/

:root {

    --primary: #07111F;
    --secondary: #172554;

    --accent: #EAB308;
    --accent-dark: #CA8A04;

    --white: #FFFFFF;
    --light: #E2E8F0;
    --gray: #94A3B8;
    --dark: #020617;

}



/*==================================
  RESET
==================================*/


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    color: var(--primary);

    background:
    var(--white);

    line-height: 1.6;

}


img {

    width: 100%;
    display: block;

}


a {

    text-decoration: none;

}


ul {

    list-style: none;

}



.container {

    width: min(1100px, 90%);

    margin-inline: auto;

}



.section {

    padding:
    90px 0;

}



/*==================================
  BUTTONS
==================================*/


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
    var(--accent);

    color:
    var(--white);

    padding:
    14px 28px;

    border-radius:
    8px;

    font-weight:
    600;

    transition:
    var(--transition);

    border:
    none;

    cursor:
    pointer;

}


.btn:hover {

    background:
    var(--accent-dark);

    transform:
    translateY(-2px);

}



.btn-outline {

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;


    padding:
    14px 28px;


    border:
    2px solid var(--white);


    color:
    var(--white);


    border-radius:
    8px;


    font-weight:
    600;


    transition:
    var(--transition);

}



.btn-outline:hover {

    background:
    var(--white);

    color:
    var(--primary);

}



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


.header {

    position:
    fixed;

    width:
    100%;

    top:
    0;

    left:
    0;

    z-index:
    1000;

    background:
    transparent;

    transition:
    var(--transition);

}



.header.scrolled {

    background:
    rgba(15,23,42,0.95);

    backdrop-filter:
    blur(10px);

}



.nav-container {

    height:
    80px;

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

}



.logo {

    color:
    var(--white);

    font-size:
    1.4rem;

    font-weight:
    800;

    line-height:
    1;

}



.logo span {

    display:
    block;

    color:
    var(--accent);

    font-size:
    .8rem;

    letter-spacing:
    2px;

}



.nav-links {

    display:
    flex;

    gap:
    35px;

}



.nav-links a {

    color:
    var(--white);

    font-weight:
    500;

    transition:
    var(--transition);

}



.nav-links a:hover {

    color:
    var(--accent);

}



.nav-btn {

    margin-left:
    20px;

}



.menu-btn {

    display:
    none;

    background:
    transparent;

    border:
    none;

    cursor:
    pointer;

}



.menu-btn span {

    display:
    block;

    width:
    28px;

    height:
    3px;

    margin:
    5px;

    background:
    var(--white);

    transition:
    var(--transition);

}



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


.hero {

    min-height:
    100vh;

    display:
    flex;

    align-items:
    center;

    position:
    relative;

    background:

    linear-gradient(
        rgba(2,6,23,.75),
        rgba(2,6,23,.75)
    ),

    url("images/hero.jpg");


    background-size:
    cover;

    background-position:
    center;

}



.hero-content {

    position:
    relative;

    color:
    var(--white);

    max-width:
    750px;

}



.hero-small {

    color:
    var(--accent);

    font-weight:
    700;

    letter-spacing:
    2px;

    margin-bottom:
    15px;

}



.hero h1 {

    font-size:
    clamp(2.5rem,5vw,4.5rem);

    line-height:
    1.1;

    margin-bottom:
    20px;

}



.hero h1 span {

    color:
    var(--accent);

}



.hero-text {

    font-size:
    1.1rem;

    color:
    #e2e8f0;

    max-width:
    650px;

    margin-bottom:
    35px;

}



.hero-buttons {

    display:
    flex;

    gap:
    15px;

    flex-wrap:
    wrap;

}



/*==================================
  SECTION TITLES
==================================*/


.section-title {

    text-align:
    center;

    margin-bottom:
    50px;

}



.section-title p {

    color:
    var(--accent);

    font-weight:
    700;

    letter-spacing:
    2px;

}



.section-title h2 {

    font-size:
    clamp(2rem,4vw,3rem);

    color:
    var(--primary);

}



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


.service-grid {

    display:
    grid;

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

    gap:
    25px;

}



.card {

    padding:
    35px 25px;

    background:
    var(--white);

    border-radius:
    var(--radius);

    box-shadow:
    var(--shadow);

    transition:
    var(--transition);

}



.card:hover {

    transform:
    translateY(-8px);

}



.icon {

    font-size:
    2rem;

    margin-bottom:
    20px;

}



.card h3 {

    margin-bottom:
    12px;

}



.card p {

    color:
    var(--gray);

}



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


.about {

    background:
    var(--light);

}



.about-grid {

    display:
    grid;

    grid-template-columns:
    1fr 1fr;

    gap:
    50px;

    align-items:
    center;

}



.about-image img {

    border-radius:
    var(--radius);

    box-shadow:
    var(--shadow);

}



.about-content p:first-child {

    color:
    var(--accent);

    font-weight:
    700;

    letter-spacing:
    2px;

}



.about-content h2 {

    font-size:
    2.5rem;

    margin:
    15px 0;

}



.about-content p {

    color:
    var(--gray);

    margin-bottom:
    20px;

}

/*==================================
  WHY CHOOSE US
==================================*/


.why {

    background:
    var(--primary);

    color:
    var(--white);

}



.why .section-title h2 {

    color:
    var(--white);

}



.why-grid {

    display:
    grid;

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

    gap:
    25px;

}



.why-card {

    background:
    rgba(255,255,255,.08);

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

    padding:
    25px;

    border-radius:
    var(--radius);

    font-weight:
    600;

    transition:
    var(--transition);

}



.why-card:hover {

    background:
    var(--accent);

    transform:
    translateY(-5px);

}



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


.contact {

    background:
    var(--light);

}



.contact-grid {

    display:
    grid;

    grid-template-columns:
    1fr 1fr;

    gap:
    50px;

    align-items:
    start;

}



.contact-form {

    background:
    var(--white);

    padding:
    35px;

    border-radius:
    var(--radius);

    box-shadow:
    var(--shadow);

}



.contact-form input,
.contact-form textarea {

    width:
    100%;

    padding:
    15px;

    margin-bottom:
    18px;

    border:
    1px solid #cbd5e1;

    border-radius:
    8px;

    font-family:
    inherit;

    font-size:
    1rem;

    outline:
    none;

    transition:
    var(--transition);

}



.contact-form input:focus,
.contact-form textarea:focus {

    border-color:
    var(--accent);

}



.contact-form textarea {

    resize:
    vertical;

}



.contact-info {

    padding:
    20px;

}



.contact-info h3 {

    font-size:
    2rem;

    margin-bottom:
    20px;

}



.contact-info p {

    color:
    var(--gray);

    margin-bottom:
    25px;

}



.contact-info li {

    margin-bottom:
    12px;

    font-weight:
    600;

}



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


footer {

    background:
    var(--dark);

    color:
    var(--white);

    text-align:
    center;

    padding:
    50px 0;

}



footer h2 {

    font-size:
    1.8rem;

    margin-bottom:
    15px;

}



footer h2 span {

    color:
    var(--accent);

}



footer p {

    color:
    #94a3b8;

    margin:
    8px 0;

}



.footer-line {

    height:
    1px;

    background:
    rgba(255,255,255,.15);

    margin:
    30px 0;

}



/*==================================
  BACK TO TOP BUTTON
==================================*/


.top-btn {

    position:
    fixed;

    right:
    25px;

    bottom:
    25px;

    width:
    45px;

    height:
    45px;

    border-radius:
    50%;

    border:
    none;

    background:
    var(--accent);

    color:
    var(--white);

    font-size:
    1.3rem;

    cursor:
    pointer;

    opacity:
    0;

    visibility:
    hidden;

    transition:
    var(--transition);

    z-index:
    900;

}



.top-btn.show {

    opacity:
    1;

    visibility:
    visible;

}



.top-btn:hover {

    background:
    var(--accent-dark);

}



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


.fade {

    opacity:
    0;

    transform:
    translateY(30px);

    transition:
    .8s ease;

}



.fade.active {

    opacity:
    1;

    transform:
    translateY(0);

}



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


@media(max-width:1024px){


    .service-grid {

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

    }


    .why-grid {

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

    }


}



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


@media(max-width:768px){


    .nav {

        position:
        fixed;

        top:
        80px;

        right:
        -100%;

        width:
        75%;

        height:
        calc(100vh - 80px);

        background:
        var(--primary);

        padding:
        40px;

        transition:
        var(--transition);

    }


    .nav.active {

        right:
        0;

    }


    .nav-links {

        flex-direction:
        column;

        gap:
        25px;

    }


    .nav-btn {

        display:
        none;

    }


    .menu-btn {

        display:
        block;

    }


    .menu-btn.active span:nth-child(1){

        transform:
        rotate(45deg)
        translate(5px,6px);

    }


    .menu-btn.active span:nth-child(2){

        opacity:
        0;

    }


    .menu-btn.active span:nth-child(3){

        transform:
        rotate(-45deg)
        translate(6px,-7px);

    }



    .hero {

        min-height:
        90vh;

    }



    .hero-buttons {

        flex-direction:
        column;

        align-items:
        stretch;

    }



    .hero-buttons a {

        text-align:
        center;

    }



    .service-grid {

        grid-template-columns:
        1fr;

    }



    .about-grid {

        grid-template-columns:
        1fr;

    }



    .about-content h2 {

        font-size:
        2rem;

    }



    .why-grid {

        grid-template-columns:
        1fr;

    }



    .contact-grid {

        grid-template-columns:
        1fr;

    }



    .contact-form {

        padding:
        25px;

    }



}



/*==================================
  SMALL PHONES
==================================*/


@media(max-width:480px){


    .container {

        width:
        92%;

    }


    .section {

        padding:
        70px 0;

    }


    .logo {

        font-size:
        1.1rem;

    }


    .hero h1 {

        font-size:
        2.4rem;

    }


    .hero-text {

        font-size:
        1rem;

    }


    .btn,
    .btn-outline {

        padding:
        12px 20px;

    }


}