/*
=========================================
 CyberShield Security
 Professional Cybersecurity Theme
 Primary Color: #26A9AF
=========================================
*/


:root {

    --primary: #26A9AF;
    --primary-dark: #16858A;
    --primary-light: #55D4D8;

    --background: #07131A;
    --background-light: #0D2028;

    --card: #122C35;
    --card-hover: #173A45;

    --text: #C9D7DA;
    --white: #FFFFFF;

    --border: rgba(38,169,175,.25);

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

    --glow:
    0 0 25px rgba(38,169,175,.45);

}


/* ==========================
   Reset
========================== */


* {

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

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

    background:
    var(--background);

    color:
    var(--white);

    line-height:1.7;

}


/* ==========================
   Navigation
========================== */


.navbar {

    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 8%;

    background:
    rgba(7,19,26,.90);

    backdrop-filter:blur(12px);

    border-bottom:
    1px solid var(--border);

    z-index:1000;

}



.logo {

    font-size:32px;

    font-weight:800;

    letter-spacing:1px;

}


.logo span {

    color:
    var(--primary);

}



.nav-links {

    display:flex;

    gap:35px;

    list-style:none;

}



.nav-links a {

    color:white;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

}



.nav-links a:hover {

    color:
    var(--primary);

}



/* ==========================
   Hero
========================== */


.header {

    min-height:100vh;

    background:

    linear-gradient(
        rgba(7,19,26,.82),
        rgba(7,19,26,.95)
    ),

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

    center/cover;

}



.hero {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}



.hero-content {

    max-width:950px;

}



.hero h1 {

    font-size:
    clamp(38px,6vw,70px);

    line-height:1.1;

    margin-bottom:30px;

}



.hero h1::first-line {

    color:white;

}



.hero p {

    color:
    var(--text);

    font-size:22px;

    max-width:850px;

    margin:auto;

    margin-bottom:45px;

}


/* ==========================
   Buttons
========================== */


.button {

    display:inline-block;

    padding:
    18px 45px;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );


    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    box-shadow:
    var(--glow);


    transition:.3s;

}



.button:hover {

    transform:
    translateY(-5px)
    scale(1.03);

    box-shadow:

    0 0 40px
    rgba(38,169,175,.8);

}



/* ==========================
   Sections
========================== */


.section {

    padding:
    100px 8%;

}



.dark {

    background:
    var(--background-light);

}



.section h2 {

    text-align:center;

    font-size:45px;

    margin-bottom:60px;

}



.section h2::after {

    content:"";

    display:block;

    width:90px;

    height:4px;

    background:
    var(--primary);

    margin:20px auto;

    border-radius:10px;

}



/* ==========================
   Cards
========================== */


.cards {

    display:grid;

    grid-template-columns:

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


    gap:35px;

}



.card {

    background:
    var(--card);

    padding:35px;

    border-radius:18px;

    border:
    1px solid var(--border);

    transition:.35s;

}



.card:hover {

    transform:
    translateY(-12px);

    background:
    var(--card-hover);

    border-color:
    var(--primary);

    box-shadow:
    var(--glow);

}



.card h3 {

    color:
    var(--primary);

    margin-bottom:20px;

    font-size:22px;

}



.card p {

    color:
    var(--text);

}



/* ==========================
   Timeline
========================== */


.timeline {

    display:grid;

    grid-template-columns:

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


    gap:25px;

}



.timeline div {

    background:
    var(--card);

    padding:30px;

    border-left:

    5px solid var(--primary);

    border-radius:12px;

}



.timeline h3 {

    color:
    var(--primary);

}



/* ==========================
   Advantages
========================== */


.advantages {

    max-width:900px;

    margin:auto;

}



.advantages p {

    background:
    var(--card);

    padding:22px;

    margin-bottom:18px;

    border-radius:10px;

    border-left:

    4px solid var(--primary);

}



/* ==========================
   FAQ
========================== */


.faq button {

    width:100%;

    padding:22px;

    margin-top:15px;

    background:
    var(--card);

    border:none;

    color:white;

    text-align:left;

    cursor:pointer;

    font-size:18px;

    border-radius:10px;

}



.faq button:hover {

    background:
    var(--card-hover);

}



.faq div {

    display:none;

    background:
    #102832;

    padding:20px;

    color:
    var(--text);

}



/* ==========================
   Contact
========================== */


.contact {

    text-align:center;

}



.contact p {

    font-size:22px;

    color:
    var(--text);

    margin-bottom:40px;

}



/* ==========================
   Footer
========================== */


footer {

    background:
    #041017;

    padding:35px;

    text-align:center;

    color:#9FB4B8;

}



/* ==========================
   Animation
========================== */


.reveal {

    opacity:0;

    transform:
    translateY(50px);

    transition:
    1s;

}



.reveal.active {

    opacity:1;

    transform:
    translateY(0);

}



/* ==========================
   Back to top
========================== */


#topButton {

    background:
    var(--primary)!important;

    box-shadow:
    var(--glow)!important;

}



/* ==========================
   Mobile
========================== */


@media(max-width:900px){


.navbar {

    padding:
    20px 5%;

}


.hero p {

    font-size:18px;

}


.section {

    padding:
    70px 5%;

}


}



@media(max-width:700px){


.navbar {

    flex-direction:column;

    gap:15px;

}


.nav-links {

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}


.section h2 {

    font-size:34px;

}


.button {

    width:100%;

}



}