/* =====================================================
   C4 Cloud Lab
   Lightweight Enterprise Portfolio Theme
   Upender Mamindlapelly
===================================================== */


:root {

    --bg: #071522;

    --bg-dark: #04101c;

    --card: #102a43;

    --primary: #2ea3ff;

    --primary-dark: #167dcc;

    --text: #ffffff;

    --muted: #b7c7d8;

    --border: rgba(255,255,255,0.12);

}


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


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:

        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;


    background:

        linear-gradient(
            135deg,
            var(--bg),
            #0b2238
        );


    color:var(--text);

    line-height:1.6;

}



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


header {

    position:sticky;

    top:0;

    z-index:100;

    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:20px 8%;


    background:

        rgba(4,16,28,0.95);


    border-bottom:

        1px solid var(--border);

}



.logo {

    font-size:28px;

    font-weight:700;

    color:var(--primary);

}



nav {

    display:flex;

    gap:25px;

}



nav a {

    color:white;

    text-decoration:none;

    font-size:15px;

}



nav a:hover {

    color:var(--primary);

}



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


.hero {

    text-align:center;

    padding:

        110px 10% 90px;

}



.hero h1 {

    font-size:64px;

    margin-bottom:15px;

}



.hero h2 {

    color:var(--primary);

    font-size:30px;

    margin-bottom:25px;

}



.hero p {

    max-width:850px;

    margin:auto;

    color:var(--muted);

    font-size:18px;

}



.button {

    display:inline-block;

    margin-top:35px;

    padding:14px 35px;


    background:var(--primary);


    color:white;


    text-decoration:none;


    border-radius:30px;


    font-weight:600;

}



.button:hover {

    background:var(--primary-dark);

}



/* =====================================================
   STATS
===================================================== */


.stats {

    display:grid;

    grid-template-columns:

        repeat(4,1fr);


    gap:25px;


    padding:

        40px 8%;

}



.stats div {

    background:var(--card);


    border:

        1px solid var(--border);


    border-radius:12px;


    padding:30px;


    text-align:center;

}



.stats strong {

    display:block;


    color:var(--primary);


    font-size:38px;


}



.stats span {

    color:var(--muted);

}



/* =====================================================
   COMMON SECTION
===================================================== */


section {

    padding:

        80px 8%;

}



section h2 {

    text-align:center;


    color:var(--primary);


    font-size:36px;


    margin-bottom:45px;

}



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


.cards {

    display:grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:30px;

}



.card {

    background:var(--card);


    border:

        1px solid var(--border);


    border-radius:15px;


    padding:30px;


}



.card:hover {

    border-color:var(--primary);

}



.card h3 {

    font-size:32px;


    color:var(--primary);

}



.card h4 {

    margin:

        10px 0 15px;

}



.card p {

    color:var(--muted);

}



.card ul {

    margin:

        20px 0;


    padding-left:20px;

}



.card li {

    margin-bottom:8px;

}



.card a {

    display:inline-block;


    padding:

        10px 25px;


    background:var(--primary);


    color:white;


    text-decoration:none;


    border-radius:25px;

}



.card a:hover {

    background:var(--primary-dark);

}



/* =====================================================
   ARCHITECTURE
===================================================== */


.architecture {

    background:var(--bg-dark);


    border:

        1px solid var(--border);


    border-radius:15px;


    padding:35px;


    overflow:auto;

}



.architecture pre {

    color:#7ec8ff;


    font-family:

        Consolas,
        monospace;


    font-size:16px;

}



/* =====================================================
   TECHNOLOGY
===================================================== */


.technology {

    display:flex;


    flex-wrap:wrap;


    justify-content:center;


    gap:15px;

}



.technology span {


    background:var(--card);


    border:

        1px solid var(--border);


    padding:

        12px 22px;


    border-radius:25px;


}



.technology span:hover {


    background:var(--primary);


    color:white;


}



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


#about {

    text-align:center;

}



#about p {


    max-width:850px;


    margin:auto;


    color:var(--muted);


    font-size:18px;


}



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


footer {


    background:#030b14;


    padding:45px 20px;


    text-align:center;


    border-top:

        1px solid var(--border);


}



footer h3 {


    color:var(--primary);


    font-size:24px;


}



footer p {


    color:var(--muted);


    margin-top:8px;


}



.social-links {


    display:flex;


    justify-content:center;


    gap:20px;


    margin:

        25px 0;


}



.social-links a {


    color:white;


    text-decoration:none;


    background:var(--card);


    border:

        1px solid var(--border);


    padding:

        10px 25px;


    border-radius:25px;


}



.social-links a:hover {


    background:var(--primary);


}



/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:1000px) {


    header {


        flex-direction:column;


        gap:15px;


    }


    nav {


        flex-wrap:wrap;


        justify-content:center;


    }


    .cards {


        grid-template-columns:1fr;


    }


    .stats {


        grid-template-columns:

            repeat(2,1fr);


    }


}



@media(max-width:600px) {


    .hero h1 {


        font-size:42px;


    }



    .hero h2 {


        font-size:24px;


    }



    .stats {


        grid-template-columns:1fr;


    }



    section {


        padding:

            60px 25px;


    }



    .social-links {


        flex-direction:column;


        align-items:center;


    }


}