/* =========================
   ZUABA ŠKŽ - GLAVNI STIL
   ========================= */


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


:root {

    --blue: #153d6b;
    --gold: #b08a3c;
    --light: #f5f7fa;
    --text: #333;
    --white: #ffffff;

}


body {

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

    background: var(--light);

    color: var(--text);

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}


/* gornja hrvatska linija */

.top-line {

    height: 6px;

    background: linear-gradient(
        to right,
        #ff0000 0%,
        #ffffff 33%,
        #0000ff 66%
    );

}



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


header {

    text-align: center;

    padding: 45px 20px 25px;

}



.logo {

    margin-bottom: 25px;

}



.logo img {

    max-width: 280px;

    max-height: 150px;

    width: auto;

    height: auto;

    object-fit: contain;

}



h1 {

    color: var(--blue);

    font-size: clamp(24px, 4vw, 36px);

    letter-spacing: .5px;

    font-weight: 700;

}



.subtitle {

    margin-top: 12px;

    color: #666;

    font-size: 18px;

}



/* =========================
   GLAVNI SADRŽAJ
   ========================= */


main {

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

    padding: 20px;

}



.card {

    background: var(--white);

    border-radius: 16px;

    padding: 45px;

    text-align: center;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

    border-top: 4px solid var(--gold);

}



.card h2 {

    color: var(--blue);

    margin-bottom: 25px;

    font-size: 28px;

}



.card p {

    line-height: 1.8;

    margin-bottom: 15px;

    font-size: 17px;

}



/* =========================
   GUMBI
   ========================= */


.buttons {

    margin-top: 35px;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}



.btn {

    display: inline-block;

    padding: 14px 28px;

    background: var(--blue);

    color:white;

    text-decoration:none;

    border-radius: 8px;

    font-weight:600;

    transition:.3s;

}



.btn:hover {

    background:#0d2949;

    transform: translateY(-2px);

}



.btn.secondary {

    background:white;

    color:var(--blue);

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

}


.btn.secondary:hover {

    background:#eef3f8;

}



/* =========================
   KONTAKT
   ========================= */


.contact {

    background:white;

    margin-top:30px;

    padding:35px;

    text-align:center;

    border-radius:16px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.05);

}



.contact h3 {

    color:var(--blue);

    margin-bottom:20px;

    font-size:24px;

}



.contact p {

    margin:8px 0;

    line-height:1.6;

}



.contact a {

    color:var(--blue);

    text-decoration:none;

}



.contact a:hover {

    text-decoration:underline;

}



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


footer {

    margin-top:auto;

    background:#122c4d;

    color:white;

    text-align:center;

    padding:30px 20px;

}



footer nav {

    margin-bottom:20px;

}



footer nav a {

    color:white;

    text-decoration:none;

    margin:0 10px;

    font-size:15px;

}



footer nav a:hover {

    color:#e5c16c;

}



footer p {

    font-size:14px;

    opacity:.9;

}



/* =========================
   MOBITELI
   ========================= */


@media(max-width:700px){


header {

    padding-top:30px;

}



.logo img {

    max-width:220px;

    max-height:120px;

}



.subtitle {

    font-size:16px;

}



.card {

    padding:30px 20px;

}



.card h2 {

    font-size:23px;

}



.card p {

    font-size:16px;

}



.contact {

    padding:25px 15px;

}



footer nav a {

    display:inline-block;

    margin:6px;

}


}
.text-page {
    text-align:left;
}


.text-page h2 {
    margin-top:25px;
    margin-bottom:15px;
}


.text-page ul {
    margin:15px 0 15px 25px;
}


.text-page li {
    margin-bottom:8px;
}


.text-page a {
    color:var(--blue);
}