@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');



* {

margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;

}



body {

font-family:'Inter', sans-serif;
color:#111;

}



/* HEADER */


header {


position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);


width:90%;


display:flex;

justify-content:space-between;

align-items:center;


padding:20px 45px;


background:rgba(159,232,112,.75);

backdrop-filter:blur(15px);


border-radius:20px;


z-index:1000;


box-shadow:0 10px 30px rgba(0,0,0,.2);


}




.logo {


font-size:28px;

font-weight:800;

text-decoration:none;

color:white;


}



nav a {


margin-left:35px;

text-decoration:none;

font-weight:600;

color:white;

transition:.3s;


}



nav a:hover {

color:white;

}



/* HERO */


.hero {


height:100vh;

position:relative;


}



.hero img {


width:100%;

height:100%;

object-fit:cover;


}



.hero::after {


content:"";

position:absolute;

inset:0;


background:

linear-gradient(
90deg,
rgba(0,0,0,.75),
rgba(0,0,0,.25)
);


}



.hero-text {


position:absolute;

z-index:2;


top:50%;

left:10%;


transform:translateY(-50%);


color:white;


}



.hero-text h1 {


font-size:70px;

max-width:700px;

font-weight:800;


}



.hero-text p {


font-size:30px;

margin-top:20px;


}





/* ABOUT */


#about {

    padding:120px 12%;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #f7faf5,
        #e5f3dc
    );

}


/* dekoracija u pozadini */

#about::before {

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-200px;
    top:-250px;


    background:#9fe870;

    opacity:.18;

    border-radius:50%;


}


#about::after {

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    left:-120px;
    bottom:-120px;


    border:40px solid #9fe870;

    opacity:.12;

    border-radius:50%;


}



h2 {


font-size:50px;

margin-bottom:30px;


}



#about p {


font-size:20px;

line-height:1.8;

max-width:900px;


}




.services {


display:flex;

gap:30px;

margin-top:50px;


}



.card {


    background:rgba(255,255,255,.85);
    backdrop-filter:blur(10px);

padding:35px;

border-radius:20px;


box-shadow:0 10px 30px rgba(0,0,0,.1);


flex:1;


transition:.3s;


}



.card:hover {


transform:translateY(-10px);


}



.card h3 {


margin-bottom:15px;

font-size:25px;


}




/* CONTACT */


#contact {

    padding:120px 20%;

    color:white;

    position:relative;

    overflow:hidden;


     background:

    radial-gradient(
        circle at top right,
        rgba(159,232,112,.35),
        transparent 40%
    ),

    linear-gradient(
        135deg,
        #1b3322,
        #294d30
    );

}



/* zeleni krug u pozadini */

#contact::before {


    content:"";

    position:absolute;


    width:500px;
    height:500px;


    left:-200px;
    bottom:-250px;


    background:#9fe870;


    opacity:.08;


    border-radius:50%;


}



/* linije kao tehnicki detalj */

#contact::after {


    content:"";

    position:absolute;


    width:100%;

    height:100%;


    background-image:

    linear-gradient(
        45deg,
        transparent 48%,
        rgba(255,255,255,.03) 50%,
        transparent 52%
    );


    background-size:40px 40px;


}


form {


display:flex;

flex-direction:column;

gap:20px;


}



input,
textarea {


padding:18px;

border:none;

border-radius:12px;

font-size:16px;


}



button {


padding:18px;

border:none;

border-radius:50px;


background:#9fe870;

font-size:18px;

font-weight:700;


cursor:pointer;

transition:.3s;


}



button:hover {


background:white;


}

.contact-info {

    margin:80px auto 80px;

    max-width:700px;

    padding:55px 40px;

    text-align:center;

    position:relative;

    overflow:hidden;


    background:

    linear-gradient(
        145deg,
        rgba(159,232,112,0.18),
        rgba(255,255,255,0.06)
    );


    border:1px solid rgba(159,232,112,0.4);


    border-radius:30px;


    backdrop-filter:blur(20px);


    box-shadow:

    0 25px 60px rgba(0,0,0,.3);

}



.contact-info::before {

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    right:-100px;

    top:-100px;


    background:#9fe870;

    opacity:.15;

    border-radius:50%;

}



.contact-info h3 {

    position:relative;

    z-index:2;


    font-size:38px;

    font-weight:800;


    margin-bottom:35px;


    letter-spacing:1px;

}



.contact-info p {

    position:relative;

    z-index:2;


    font-size:22px;

    font-weight:500;


    margin:20px 0;


    transition:.3s;

}



.contact-info p:hover {

    color:#9fe870;

    transform:translateY(-3px);

}


/* FOOTER */


footer {

    background:rgba(159,232,112,0.85);

    color:#0c1909;

    text-align:center;

    padding:25px;

    font-weight:600;

}
/* MOBILE VERSION */

@media (max-width: 768px) {


    header {

        width:90%;

        padding:15px 20px;

        flex-direction:column;

        gap:15px;

    }


    .logo {

        font-size:22px;

    }


    nav {

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:15px;

    }


    nav a {

        margin-left:0;

        font-size:14px;

    }



    /* HERO */


    .hero {

        height:80vh;

    }


    .hero-text {

        left:5%;

        right:5%;

        text-align:center;

    }


    .hero-text h1 {

        font-size:40px;

    }


    .hero-text p {

        font-size:20px;

    }



    /* ABOUT */


    #about {

        padding:80px 7%;

    }


    h2 {

        font-size:36px;

    }


    #about p {

        font-size:17px;

    }



    .services {

        flex-direction:column;

    }


    .card {

        padding:25px;

    }



    /* CONTACT */


    #contact {

        padding:80px 7%;

    }


    input,
    textarea {

        font-size:16px;

    }



    /* CONTACT INFO */


    .contact-info {

        margin:50px 20px;

        padding:40px 20px;

    }


    .contact-info h3 {

        font-size:30px;

    }


    .contact-info p {

        font-size:17px;

    }


}