body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: linear-gradient(to right, #000000, #4a148c, #d500f9);
    color: #fff;
}
@media (max-width: 768px) {
body {
overflow-x: hidden; 
}
}
/* Header */
header {
    background: linear-gradient(to right, #000000, #4a148c, #d500f9);
    color: white;
    padding: 20px 40px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.hidden-header {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    animation: slideDownFade 1s ease forwards;
}
header nav .profile-img {
    margin-right: 350px;
}
header .profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
    transition: transform 0.3s ease;
}
header h1 {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition: color 0.3s ease;
}
header h1:hover {
    color: #1abc9c;
}
header.hidden {
    opacity: 0;
    transform: translateY(-20px);
}
header nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}
header nav ul li {
    position: relative;
}
header nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: color 0.3s ease, transform 0.3s ease;
}
header nav ul li a:hover {
    color: #1abc9c;
    transform: translateY(-3px);
}
header nav ul li a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #1abc9c;
    bottom: -5px;
    left: 0;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}
header nav ul li a:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.language-menu {
    position: relative;
    padding-bottom: 5px;

}
.dropdown {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    min-width: 120px;
    border-radius: 5px;
    padding: 5px;
    top: 30px;
    right: 0;
    transition: opacity 1s ease, visibility 1s ease;
    pointer-events: auto;


}
.dropdown a {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    text-decoration: none;
    color: black;
    font-size: 1rem;
    transition: background 0.3s ease;
}
.dropdown a img {
    width: 25px;
    height: 15px;
    margin-right: 10px;
}
.dropdown a:hover {
    background-color: #f0f0f0;
}
.language-menu:hover .dropdown {
    display: block;
}

/* Media Queries for Responsiveness */
@media (max-width: 440px) {
/* Adjusting the header layout on smaller screens */
header {
padding: 15px 20px;
flex-direction: column;
align-items: center; /* Centriranje celog sadržaja */
box-shadow: none;
}

header h1 {
font-size: 1.5rem;
}

header nav {
width: 100%;
display: flex;
justify-content: center; /* Centriranje navigacije */
}

header nav .profile-img {
display: none; /* Skriva sliku profila u mobilnom prikazu */
}

header nav ul {
font-size: 0.8rem;
padding-top: 10px;
display: flex; /* Omogućava stavkama da se postave u red */
justify-content: center; /* Centriranje stavki u listi */
gap: 15px; /* Razmak između stavki */
margin-top: 0;
padding-left: 0; /* Uklanja eventualni padding sa leve strane */
}

header nav ul li {
list-style-type: none; /* Uklanja oznake sa liste */
}

header nav ul li a {
font-size: 0.8rem;
}
.language-menu {
position: relative;
padding-bottom: 5px;
}

.dropdown {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
min-width: 120px;
border-radius: 5px;
padding: 5px;
top: 30px;
right: 0;
transition: opacity 1s ease, visibility 1s ease;
pointer-events: auto;
}

.dropdown a {
display: flex;
align-items: center;
padding: 5px 10px;
text-decoration: none;
color: black;
font-size: 1rem;
transition: background 0.3s ease;
}

.dropdown a img {
width: 25px;
height: 15px;
margin-right: 10px;
}

.dropdown a:hover {
background-color: #f0f0f0;
}

/* Desktop: show on hover */
.language-menu:hover .dropdown {
display: block;
}

/* Mobile version */
@media (max-width: 440px) {
.language-menu {
padding-bottom: 3px; /* Manji padding za mobilne uređaje */
}

.dropdown {
min-width: 100px; /* Manja širina za mobilnu verziju */
top: 25px; /* Manji razmak od vrha */
right: 10px; /* Manji razmak sa desne strane */
padding: 3px; /* Manje paddinga */
}

.dropdown a {
padding: 3px 8px; /* Manji razmak između stavki */
font-size: 0.9rem; /* Manji font */
}

.dropdown a img {
width: 20px; /* Manja slika za mobilne uređaje */
height: 12px; /* Manja visina slike */
margin-right: 8px; /* Manji razmak između slike i teksta */
}

/* Hide the dropdown by default in mobile view */
.language-menu.active .dropdown {
display: block;
}
}

}



@media (max-width: 380px) {
/* Further adjustments for very small screens (phones) */
header {
padding: 10px 15px;
}

header h1 {
font-size: 1.2rem;
}

header nav ul {
gap: 10px;
}

header nav ul li a {
font-size: 0.8rem;
}
}



/* Section Styling */
.section {
padding: 50px 10%;
padding-bottom: 150px;
text-align: center;
}

/* Container for the About section */
.about-container {
font-family: 'Montserrat', sans-serif;
display: flex;
align-items: center;
gap: 40px;
text-align: left;
max-width: 1000px;
margin: 0 auto;
animation: slideLeftFade 1s ease forwards;

justify-content: space-between; /* Keeps space between image and text */
}

/* Image Styling */
.about-container img {
width: 40%;
max-width: 500px;
aspect-ratio: 1/1; /* Održava sliku savršeno okruglom */
border-radius: 50%;
object-fit: cover;

}

.about-container img:hover {
transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Text Styling */
.about-text ul {
list-style: none;
padding: 0;
}

.about-text ul li {
padding: 10px 0;
font-size: 18px;
display: flex;
align-items: center;
color: #fff; /* Slightly darker text for better readability */
}

.about-text ul li::before {
content: '\2022';
color: #0062E6;
font-size: 24px;
font-weight: bold;
display: inline-block;
width: 1em;
margin-right: 10px;
}

/* Media Queries for Responsiveness */
@media (max-width: 440px) {
/* Adjust container layout for tablets */
.about-container {
flex-direction: column;
align-items: center;
gap: 30px;
}

/* Adjust image size on smaller screens */
.about-container img {
width: 250px;
height: 250px;
}

/* Adjust text alignment */
.about-text {
text-align: left;
}

.about-text ul li {
font-size: 16px;
}
}

@media (max-width: 375px) {
/* Further adjustments for very small screens (phones) */
.section {
padding: 40px 5%;
}

.about-container {
gap: 20px;
}

.about-container img {
width: 200px;
height: 200px;
}

.about-text ul li {
font-size: 14px;
}
}


.hero {
    background: url('hero.jpg') center/cover no-repeat;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
}
.hero-content {
    padding: 30px;
    margin-top: 150px;
    border-radius: 15px;
    max-width: 600px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    animation: fadeIn 1.5s ease-in-out;
}
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 40px;
    text-align: center;
}
.portfolio-item.wide {
grid-column: 1 / -1; /* Zauzima punu širinu dostupne mreže */
}
.portfolio-item {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
.portfolio-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.btn {
    display: inline-block;
    background: #406ba3;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    width: 30%;
    animation: slideDownFade 1s ease forwards;

}
.btn:hover {
    background: #004bb5;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #333;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
}
/* Za tablete (max širina 1024px) */
@media (max-width: 1024px) {
.scroll-to-top {
width: 50px;
height: 50px;
font-size: 25px;
}
}

/* Za telefone (max širina 768px) */
@media (max-width: 440px) {
.scroll-to-top {
width: 40px;
height:40px;
font-size: 20px;
}
}

/* Efekat hover na strelicu */
.scroll-to-top:hover {
    background-color: #0062E6;
    transform: scale(1.1);
}

/* Skrivanje strelice u početku */
.scroll-to-top {
    display: none;
}

/* Animacija strelice pri pojavi */
.scroll-to-top.show {
    display: flex;
}

/* Dodajemo ikonu strelice */
.scroll-to-top i {
font-family: 'Material Icons', sans-serif; /* Dodaj ovu liniju */
font-size: 36px;
}
.skills-section {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 40px;
    background: linear-gradient(to right, #000000, #4a148c, #d500f9);
    
}

.skill-card {
    color: white;
    padding: 20px;
    width: 250px;
    text-align: center;
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.skill-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.skill-card i {
    font-size: 50px;
    margin-bottom: 15px;
    transition: transform 0.3s;
}

.skill-card:hover i {
    transform: rotate(20deg);
}

.skill-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
}

.skill-card p {
    font-size: 14px;
    margin-top: 10px;
    opacity: 0.8;
}

.skill-card .skill-tools {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.skill-tools i {
    font-size: 20px;
    transition: color 0.3s;
}

.skill-tools i:hover {
    color: #FF6F61;
}
/* Globalna podešavanja */

/* Container za hobije */
.hobbies-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin: 0 20px;
margin-top: 60px;
}

/* Box za svaki hobi */
.hobby-box {
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 300px;
transition: transform 0.3s ease-in-out;
overflow: hidden;
}

.hobby-box:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.hobby-box i {
font-size: 2rem; /* Manja veličina ikone */
color: rgb(255, 255, 255); /* Postavlja boju ikona na crnu */
transition: color 0.3s ease; /* Efekat prelaza boje */
display: block;
margin: 0 auto; /* Centriranje ikone */
padding-top: 25px;
text-align: center; /* Osigurava da ikona bude centrirana unutar boxa */
}

/* Hover efekat za ikone - povećanje */
.hobby-box:hover i {
transform: scale(1.1); /* Povećava ikonu pri hoveru */
color: #1abc9c; /* Nova boja pri hover-u */

}
/* Sadržaj unutar svakog boxa */
.hobby-content {
padding: 20px;
}

.hobby-content h3 {
font-size: 1.8rem;
color: #ffffff;
margin-bottom: 10px;
margin-top: 10px;
}

.hobby-content p {
color: #ffffff;
font-size: 1rem;
text-align: left;
white-space: normal;
word-break: break-word;
}

/* Hover efekti za tekst */
.hobby-box:hover .hobby-content h3 {
color: #1abc9c;
transition: color 0.3s ease;
}

.hobby-box:hover .hobby-content p {
color: #ffffff;
font-weight: 500;
}

/* Dodavanje animacija za tekst */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.hobby-content {
animation: fadeIn 1s ease-out;
}

/* Zavisno od ekrana */
@media (max-width: 440px) {
.hobbies-container {
flex-direction: column;
align-items: center;
}

.hobby-box {
width: 80%;
margin-bottom: 20px;
}
.hobby-content p {
font-size: 0.75rem;
text-align: justify;

}

}
/*sekcija projekti*/
/* Projects Section */
.projects-section {
min-height: 100vh;
width: 100%;
padding: 60px 0; /* Smanjen padding na vrhu i dnu */
margin: 0; /* Uklanja margine koje mogu uzrokovati pomjeranje */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
box-sizing: border-box; /* Osigurava da padding ne utiče na širinu */
}

.projects-title {
font-size: clamp(2rem, 5vw, 3.5rem);
color: #ffffff;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
margin: 0 0 40px 0; /* Centrirana margina */
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}

.projects-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 800px; /* Smanjena maksimalna širina za bolje centriranje */
padding: 0 20px; /* Dodat padding za manje ekrane */
box-sizing: border-box;
}

/* Project Card */
.project-card {
width: 100%;
max-width: 500px; /* Smanjena širina kartice za centriranje */
height: auto;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
overflow: hidden;
background: rgba(255, 255, 255, 0.1); /* Blaga prozirnost za kontrast */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: projectReveal 1.2s ease forwards;
}

/* Image Wrapper */
.project-image-wrapper {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.project-image {
width: 100%;
max-width: 80px;
height: auto;
object-fit: cover;
border-radius: 15px 15px 0 0;
}

/* Overlay */
.project-overlay {
width: 100%;
padding: 20px;
text-align: center;
background: rgba(0, 0, 0, 0.6); /* Tamniji overlay za čitljivost */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.project-title {
font-size: clamp(1.5rem, 3vw, 2.5rem);
color: #1abc9c;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.project-description {
font-size: clamp(0.9rem, 2vw, 1.2rem);
color: #ffffff;
margin-bottom: 20px;
max-width: 90%;
line-height: 1.5;
}

/* Button */
.project-btn {
display: inline-block;
background: linear-gradient(45deg, #1abc9c, #4a148c);
color: #ffffff;
padding: 12px 30px;
text-decoration: none;
border-radius: 50px;
font-size: clamp(1rem, 2vw, 1.2rem);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
transition: transform 0.3s ease, background 0.3s ease;
position: relative;
overflow: hidden;
animation: pulse 1.5s infinite ease-in-out;
}

.project-btn:hover {
transform: scale(1.1);
background: linear-gradient(45deg, #4a148c, #1abc9c);
}

.project-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.5s ease, height 0.5s ease;
}

.project-btn:hover::after {
width: 200px;
height: 200px;
}

/* Animations */
@keyframes projectReveal {
0% { transform: translateY(100px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

/* Responsiveness */
@media (max-width: 440px) {
.projects-section {
padding: 40px 0;
}

.projects-container {
padding: 0 15px;
}

.project-card {
max-width: 90%;
}

.project-image {
max-width: 20%;
}

.project-title {
font-size: 1.5rem;
}

.project-description {
font-size: 0.9rem;
}

.project-btn {
padding: 10px 20px;
font-size: 1rem;
}
}

@media (min-width: 441px) and (max-width: 700px) {
.project-card {
max-width: 80%;
}

.project-image {
max-width: 20%;
}
}

/* Uklanjanje prelaza između sekcija */
.section {
margin: 0;
padding-bottom: 60px; /* Smanjen padding za bolji kontinuitet */
width: 100%;
box-sizing: border-box;
}
/* Sekcija Kontakt */
#contact {
min-height: 100vh;
width: 100vw;
background: linear-gradient(to right, #000000, #4a148c, #d500f9);
padding: 60px 20px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Kontejner za kontakt */
#contact .contact-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 1200px;
width: 100%;
height: 100%;
margin: 0 auto;
}

/* Kontakt box - centriran vertikalno i horizontalno */
#contact .contact-content {
border-radius: 15px;
padding: clamp(20px, 5vw, 40px);
width: 100%;
max-width: clamp(300px, 80%, 800px); /* Prilagođava se širini */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
transition: transform 0.5s ease, box-shadow 0.5s ease;
background: rgba(255, 255, 255, 0.3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

#contact .contact-content:hover {
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Naslov i podnaslov */
#contact h2.contact-heading {
font-size: clamp(1.8rem, 4vw, 2.8rem);
color: #ffffff;
margin-bottom: 20px;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#contact p.contact-description {
font-size: clamp(0.9rem, 2.5vw, 1.2rem);
color: #ffffff;
margin-bottom: 30px;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Kontaktne metode */
#contact .contact-info {
display: flex;
justify-content: space-around;
margin-bottom: clamp(20px, 4vw, 40px);
gap: 20px;
width: 100%;
}

#contact .contact-link {
display: flex;
align-items: center;
font-size: clamp(0.9rem, 2vw, 1.2rem);
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#contact .contact-link:hover {
color: #1abc9c;
transform: translateY(-5px);
}

#contact .contact-link i {
margin-right: 12px;
font-size: clamp(1.5rem, 3vw, 2rem);
transition: transform 0.3s ease;
}

#contact .contact-link:hover i {
transform: scale(1.2);
}

/* Forma - centrirana unutar contact boxa */
#contact .contact-form-element {
display: flex;
flex-direction: column;
gap: clamp(15px, 2vw, 20px);
width: 100%;
max-width: 600px; /* Ograničava širinu forme */
margin: 0 auto; /* Centriranje */
}

/* Input grupa */
#contact .contact-input-group {
width: 100%;
display: flex;
justify-content: center;
}

/* Input polja i textarea */
#contact .contact-input-field,
#contact .contact-textarea-field {
width: 100%;
max-width: 500px; /* Ograničava širinu polja */
padding: clamp(10px, 2vw, 15px);
border: none;
border-radius: 5px;
font-size: clamp(0.85rem, 2vw, 1rem);
font-family: 'Montserrat', sans-serif;
background: rgba(255, 255, 255, 0.2);
color: #ffffff; /* Boja unosa */
transition: background 0.3s ease, transform 0.3s ease;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Bijela boja za placeholder tekst */
#contact .contact-input-field::placeholder,
#contact .contact-textarea-field::placeholder {
color: #ffffff; /* Bijela boja za placeholder */
opacity: 0.8; /* Blaga prozirnost za razliku od unosa */
}

#contact .contact-input-field:focus,
#contact .contact-textarea-field:focus {
background: rgba(255, 255, 255, 0.3);
outline: none;
transform: scale(1.02);
}

#contact .contact-textarea-field {
resize: none;
height: clamp(100px, 15vh, 150px);
}

/* Dugme za slanje */
#contact .contact-submit-btn {
background-color: #4a148c;
color: white;
padding: clamp(10px, 2vw, 15px) clamp(20px, 3vw, 30px);
font-size: clamp(0.9rem, 2.5vw, 1.2rem);
width: clamp(50%, 60%, 80%);
margin: 0 auto;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#contact .contact-submit-btn:hover {
background-color: #1abc9c;
transform: scale(1.05);
}

/* Dugmad za društvene mreže */
#contact .contact-social-links {
display: flex;
justify-content: center;
gap: clamp(15px, 2vw, 20px);
margin-top: clamp(20px, 3vw, 30px);
width: 100%;
}

#contact .contact-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: clamp(40px, 5vw, 50px);
height: clamp(40px, 5vw, 50px);
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
text-decoration: none;
transition: background 0.3s ease, transform 0.3s ease;
}

#contact .contact-social-icon:hover {
transform: scale(1.1);
}

#contact .contact-social-icon.instagram:hover {
background: #e1306c;
}

#contact .contact-social-icon.linkedin:hover {
background: #0077b5;
}

#contact .contact-social-icon.custom:hover {
background: #333;
}

#contact .contact-social-icon i {
font-size: clamp(1rem, 2.5vw, 1.5rem);
}

/* Animacije */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes slideLeft {
from { transform: translateX(-50px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

@keyframes slideRight {
from { transform: translateX(50px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

.animate-fade-in { animation: fadeIn 1s ease forwards; }
.animate-slide-left { animation: slideLeft 1s ease forwards; }
.animate-slide-right { animation: slideRight 1s ease forwards; }
.animate-slide-down { animation: slideDownFade 1s ease forwards; }
.animate-slide-up { animation: slideUpFade 1s ease forwards; }

/* Responzivnost */

/* Mali telefoni (do 440px) */
@media (max-width: 440px) {
#contact {
padding: 30px 10px;
}

#contact .contact-content {
padding: 20px;
width: 75%;
max-width: 100%; /* Popunjava širinu */
}

#contact .contact-info {
flex-direction: column;
gap: 15px;
}

#contact .contact-form-element {
width: 100%;
max-width: 100%; /* Popunjava širinu contact boxa */
}

#contact .contact-input-field,
#contact .contact-textarea-field {
max-width: 100%; /* Jednak razmak do rubova */
}

#contact .contact-submit-btn {
width: 80%;
}

#contact .contact-social-links {
gap: 15px;
}
}

/* Tableti (441px - 700px) */
@media (min-width: 441px) and (max-width: 700px) {
#contact {
padding: 40px 15px;
}

#contact .contact-content {
padding: 30px;
width: 85%;
max-width: 600px;
}

#contact .contact-info {
flex-direction: row;
gap: 15px;
}

#contact .contact-form-element {
width: 100%;
max-width: 90%; /* Centrirano s jednakim razmakom */
}

#contact .contact-input-field,
#contact .contact-textarea-field {
max-width: 100%;
}

#contact .contact-submit-btn {
width: 70%;
}

#contact .contact-social-links {
gap: 18px;
}
}

/* Laptopi (701px - 1200px) */
@media (min-width: 701px) and (max-width: 1200px) {
#contact {
padding: 50px 20px;
}

#contact .contact-content {
padding: 35px;
width: 80%;
max-width: 700px;
}

#contact .contact-info {
gap: 20px;
}

#contact .contact-form-element {
width: 100%;
max-width: 80%; /* Centrirano s jednakim razmakom */
}

#contact .contact-input-field,
#contact .contact-textarea-field {
max-width: 100%;
}

#contact .contact-submit-btn {
width: 60%;
}

#contact .contact-social-links {
gap: 20px;
}
}

/* Desktopi (1201px i više) */
@media (min-width: 1201px) {
#contact {
padding: 60px 20px;
}

#contact .contact-content {
padding: 40px;
max-width: 800px;
}

#contact .contact-info {
gap: 20px;
}

#contact .contact-form-element {
width: 100%;
max-width: 600px; /* Centrirano s jednakim razmakom */
}

#contact .contact-input-field,
#contact .contact-textarea-field {
max-width: 100%;
}

#contact .contact-submit-btn {
width: 50%;
}

#contact .contact-social-links {
gap: 20px;
}
}
.cv-container-wrapper, .cv-container {
display: flex;
justify-content: center;
align-items: center;
}

.cv-container-wrapper {
height: 100vh;
width: 100vw;
background: #333;
position: fixed;
top: 0;
left: 0;
}

.cv-container {

  

flex-direction: column;
text-align: center;

backdrop-filter: blur(10px);
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
color: white;
transition: transform 0.3s ease-in-out;
animation: fadeIn 1.5s ease-in-out;
max-width: 90%;
width: 358px;
margin: 0 auto; /* Dodano za centriranje */
}

.cv-container:hover {
transform: scale(1.05);
}

.download-btn {
background: #406ba3;
color: white;
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background 0.3s ease-in-out;
position: relative;
overflow: hidden;
width: 100%;
max-width: 250px;
}

.download-btn:hover {
background: #6A0DAD;
}

.download-btn:active {
transform: scale(0.95);
}

.download-animation {
position: absolute;
top: 50%;
left: 90%;
transform: translate(-50%, -50%) scale(0);
font-size: 30px;
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}

.cv-container.downloading .download-animation {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}

@media (max-width: 440px) {
.cv-container {
padding: 20px;
width: 90%;
}
.download-btn {
font-size: 16px;
padding: 12px 20px;
}
}
@font-face {
font-family: 'Modisframe';
src: url('sacred.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

/* Glavni sadržaj */
.container {
font-family: 'Montserrat', sans-serif;
display: flex;
flex-wrap: nowrap;
height: calc(100vh - 60px);
padding: 0 10%;
align-items: center;
justify-content: space-between;
}

/* Lijeva polovina sa animacijama */
.left {
flex: 1 1 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 50px;
max-width: 600px;
}
.left h1 {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 15px;
}
.left h2 {
font-size: 2rem;
line-height: 1.2;
margin-bottom: 15px;
}
@media (max-width: 440px) {
.left h2 {
font-size: 1.5rem;
}
}
/* Animirani elementi */
.animate-slide-down{
animation: slideDownFade 1s ease forwards;
}
.animate-slide-right{
animation: slideRightFade 1s ease forwards;
}
.animate-slide-left {
animation: slideLeftFade 1s ease forwards;
}
.animate-slide-up {
animation: slideUpFade 1s ease forwards;
}
/* Ključni frejmovski efekti */
@keyframes slideDownFade {
from {
opacity: 0;
transform: translateY(-70px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes slideRightFade {
from {
opacity: 0;
transform: translateX(-70px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes slideLeftFade {
from {
opacity: 0;
transform: translateX(70px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(70px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); } /* Pomjeri sliku malo gore */
100% { transform: translateY(0); }
}


.animate-slide-up {
animation: slideUpFade 1s ease forwards;
/* Ako želiš delay, dodaj animation-delay: 1s; */
}


/* Stilovi za desnu polovinu (slika) */
.right {
flex: 1 1 50%;
display: flex;
align-items: center;
justify-content: center;
}

.right img {
width: 100%;
max-width: 500px;
aspect-ratio: 1/1; /* Održava sliku savršeno okruglom */
border-radius: 50%;
object-fit: cover;
animation: float 3s ease-in-out infinite; /* Animacija traje 3 sekunde i beskonačno se ponavlja */

}

/* Responzivnost */
@media screen and (max-width: 440px) {
.container {
flex-direction: column;
text-align: center;
height: auto;
padding: 20px;
margin-top: 180px;

}
.left, .right {
flex: 1 1 100%;
margin-left: 0;
margin-bottom: 20px;
}
.left h1 {
font-size: 2.2rem;
}
.right img {
display: none;

}
}
#typewriter {
color: #fff; /* Ovdje stavi željenu boju, npr. crvenu */
}
.buttons-container {
display: flex;
justify-content: left; /* Centriranje */
align-items: flex-start;
gap: 20px; /* Razmak između dugmadi */
flex-wrap: wrap; /* Omogućava prelamanje u mobilnom prikazu */
animation: slideDownFade 1s ease forwards;

}

.custom-btn {
display: inline-flex; /* Omogućava centriranje teksta */
justify-content: center;
align-items: center;
text-align: center;
text-decoration: none;
font-size: 16px;
font-weight: bold;
white-space: nowrap; /* Sprečava prelamanje teksta */
width: 220px; /* Fiksna širina */
height: 55px; /* Fiksna visina */
padding: 0; /* Uklanja dodatni padding */
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s ease-in-out;
}

.custom-btn:first-child {
background-color: #4a148c; /* Neon ljubičasta */
color: white;
}

.custom-btn:last-child {
background-color: #4a148c; /* Tamnoljubičasta */
color: white;
}

/* Efekti na hover */
.custom-btn:hover {
transform: scale(1.05);
}

/* Mobilni prikaz: dugmad idu jedno ispod drugog */
@media (max-width: 440px) {
.buttons-container {
flex-direction: column;
gap: 15px;
align-items: center;
}

.custom-btn {
width: 60%;
font-size: 14px;
max-width: 300px; /* Ograničena širina */
}
}


/* Inicijalno stanje: tekst je pomaknut s desne, a slika s lijeve strane */

/* Tekst (dolazi sa desne prema lijevoj) */
#about .about-text {
opacity: 0;
transform: translateX(100%);
transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Slika (dolazi sa lijeve prema desnoj) */
#about .about-container img {
opacity: 0;
transform: translateX(-100%);
transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Kada se doda klasa 'visible' na sekciju #about, animacije se aktiviraju */
#about.visible .about-text {
opacity: 1;
transform: translateX(0);
}

#about.visible .about-container img {
opacity: 1;
transform: translateX(0);
}

html, body {
overflow-x: hidden;
}
@media (max-width: 440px) {
.hero {
height: 350px; /* Smanjenje visine hero sekcije */
}

.hero-content {
margin-top: 100px;
padding: 20px;
max-width: 90%; /* Bolja prilagodba ekranu */
}

.portfolio-grid {
display: flex;
flex-direction: column;
align-items: center; /* Centriranje stavki */
padding: 20px;
gap: 20px;
}

.portfolio-item {
width: 90%; /* Prilagodba širini ekrana */
max-width: 350px; /* Sprečavanje preširokih elemenata */
text-align: center;
}

.btn {
width: 80%; /* Dugmad prilagođena ekranu */
text-align: center;
}
}
#about h2{
font-size: 25px;
}
@media (max-width: 440px) {
#about h2{
font-size: 20px;
}
}