/* Cubbbix – Global Styles  -------------------------------------------------- */
:root {
    --black: #000000;
    --dark:  #111111;
    --yellow:#FCD703;
    --white: #FFFFFF;
    --font-primary: 'Poppins','Inter',sans-serif;
}

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

body{
    background:var(--black);
    color:var(--white);
    font-family:var(--font-primary);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;}

/* Links & Buttons ---------------------------------------------------------- */
a       {color:var(--yellow);text-decoration:none;}
a:hover {text-decoration:underline;}

.btn{
    display:inline-block;
    background:var(--yellow);
    color:var(--black);
    padding:.75rem 1.5rem;
    border-radius:4px;
    font-weight:600;
    transition:opacity .3s ease;
}
.btn:hover{opacity:.85}

/* Header ------------------------------------------------------------------- */
header{
    padding:1rem 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo{
    font-size:1.5rem;
    font-weight:700;
    color:var(--yellow);
}
nav ul{list-style:none;display:flex;gap:1rem;flex-wrap:wrap;}
nav ul li a{color:var(--white);}
nav ul li a:hover{color:var(--yellow);}

/* Hero --------------------------------------------------------------------- */
.hero{
    min-height:80vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:2rem 1rem;
}
.hero h1{font-size:2.6rem;margin-bottom:1rem;}
.subheadline{max-width:600px;margin-bottom:2rem;}

/* Offerings & Cards -------------------------------------------------------- */
.offerings{padding:4rem 1.5rem;}
.offerings h2{
    text-align:center;
    margin-bottom:3rem;
    font-size:2rem;
    color:var(--yellow);
}
.card-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.card{
    background:var(--dark);
    padding:2rem 1rem;
    text-align:center;
    border-radius:8px;
}
.card h3{margin-top:1rem;font-size:1.1rem;}

/* Generic Section ---------------------------------------------------------- */
.section{padding:4rem 1.5rem;}
.section h2{
    text-align:center;
    margin-bottom:1.5rem;
    color:var(--yellow);
}
.why ul,
.section ul{list-style:inside;max-width:700px;margin:0 auto;}

/* Services ----------------------------------------------------------------- */
.service{margin-bottom:4rem;}
.service-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
}
.service-header h2{font-size:1.5rem;}

/* Portfolio ---------------------------------------------------------------- */
.portfolio-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* Contact ------------------------------------------------------------------ */
.contact-form{max-width:600px;margin:0 auto;}
.contact-form label{display:block;margin:.5rem 0 .25rem;}
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:.75rem;
    margin-bottom:1rem;
    border:1px solid #333;
    background:var(--dark);
    color:var(--white);
    border-radius:4px;
}
.contact-form button{width:100%;}
@media(min-width:540px){.contact-form button{width:auto;}}

/* Footer ------------------------------------------------------------------- */
.footer{
    background:#0a0a0a;
    padding:2rem 1.5rem;
    text-align:center;
}
.footer .social{
    display:flex;
    justify-content:center;
    gap:1rem;
    margin:1rem 0;
}

/* Media Queries ------------------------------------------------------------ */
@media(min-width:768px){
    .hero h1{font-size:4rem;}
    .service-header{flex-direction:row;text-align:left;}
}

/* Contact select styling --------------------------------------------------- */
.contact-form select{
    width:100%;
    padding:.75rem;
    margin-bottom:1rem;
    border:1px solid #333;
    background:var(--dark);
    color:var(--white);
    border-radius:4px;
}