/* do not touch */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90vh;
    background-color: #ffffff;
    padding: 1vh 0 2vh 2vw;
}

header {
    position: absolute;
    top: 0.5vh;
    left: 1vw;
    padding: 1vh 0 0 2vw;
   
}

h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 2.8rem;
    color: #000000;
    margin-bottom: 1.3vh;
    padding-left: 2vw;
}
.portfolio-text {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1vh;
    margin-right: 7vw;
}


main {
    padding-top: 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 82vw;
}
.top-section {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-bottom: 1vh;
}

.button-container {

   display: flex;
   justify-content: space-between;
   width: auto; 
   gap: 21vw;
   margin-left: 4vw; 
   margin-bottom: -3vh;
}
.button-container2 {
    display: flex;
    justify-content: space-between;
    width: 86%;
    margin: -1vh 0 0.5vh;
    padding-right: 4.1vw;
}

button {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    letter-spacing: 0.25em;
    padding: 1vh 0;
    font-size: 1rem;
    color: #000;
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

 button::after {
    content: '';
    position: absolute;
    left: 1%;
    right: 4%;
    bottom: 0;
    width: 100%;
    height: 0.2vh;
    background-color: black;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
    transform-origin: bottom left;
    margin-bottom: 0.3vh;
}

button:hover::after {
    transform: scaleX(1);
} 

.image-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2vh;
    width: 100%;
    max-width: 82vw;
}

.vertical-button {
    position: relative;
    padding: 1vh;
    margin: -2.8vh;
    transform: rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
    background-color: transparent;
    border: none;
    cursor: pointer;
    overflow: hidden;
}

.vertical-buttons2 {
    margin-left: -3.3vw;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-container {
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 82vw;
    max-height: 60vh;
    overflow: hidden;
    background-color: #fff;
}

.contact-info {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: white;
    color: #000;
    padding: 0;
    object-fit: cover;
}

.contact-content {
    display: flex;
    justify-content: center;    
    width: 100%;
    padding: 8vw;
}

.hidden {
    display: none;
}

.left-side,
.right-side {
    flex: 1;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    text-align: left;
}

.left-side {
    text-decoration: underline;
    text-underline-offset: 1px;
}

.about-info {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: white;
    color: #000;
    padding: 0;
    object-fit: cover;
}
.about-content {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    display: flex;
    justify-content: center;    
    width: 100%;
    padding: 8vw;
}
.menu-button, .dropdown-menu {
    display: none; 
}
.phone-contact {
    display: none;
}

.contact-section {
    display: none;
}

#close-menu-button {
    color: black;
    border: none;
    margin-top: 40vh;
    font-size: 12px;
    width: 100%;
}


/* Larger screens - pc*/
@media (min-width: 1441px) {
    .button-container {
        max-width: 66vw;
        margin-right: 21vw;
    } 

    .button-container2 {
        max-width: 66vw;
        margin-left: 1vw
    }  

    .image-container {
        max-width: 66vw;
    }
    
    .vertical-buttons2 {
        margin-left: -2.9vw;
    }

    button::after {
        height: 0.07vh;  /* debelina crte pod gumbi */
    }

    h1 {
        padding-left: 1.3vw;
    }

    .portfolio-text {
        margin-right: 6.3vw;
    }
    .portfolio-text2 {
        display: none;
    }
    
    .menu-button, .dropdown-menu {
        display: none; /* hide the menu by default */
    }

    .contact-info, .about-info {
        margin-left: -94%;
        margin-top: -10%;
    }
   
}



/* Smaller screens - tablet*/
  @media (max-width: 1024px) {
    .button-container, 
    .button-container2,
    .image-container {
        max-width: 82vw;
    }
    h1,
    .portfolio-text {
        font-size: 2rem;
    }
    .menu-button, .dropdown-menu {
        display: none;
    }
   
} 



/* Mobile Specific Styles */
@media (max-width: 767px) {
    
    /* layout for mobile */
    body {
        
        margin: 0;
        font-family: 'Lato', sans-serif;
        justify-content: center;
        align-items: center;
    }
    
    header {
       
        display: flex;
        justify-content: center;
        text-align: center;
        width: 100%;
        padding: 0;
        margin-bottom: -77px;
    }

    h1 {
        font-size: 2.2rem;
        justify-content: center;
        padding-top: 0px;
        text-align: center;
    }

    main {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .button-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 5px;
    }

    button {
        width: 100%;
        font-size: 0.85rem;
        background-color: transparent;
        cursor: pointer;
        text-align: center;
    }

    .image-container {
        width: 100%;
        height: 440px;
        margin-bottom: 2vh;
    }

    img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 65% 100%;
    }


    .portfolio-text {
        display: none;
    }
    .portfolio-text2 {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 1.5rem;
        color: #000000;
        padding-bottom: 3vh;
        margin-top: -17px;
    }
   
    .contact-info, .about-info {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 440px; 
        background-color: white;
        color: #000;
        padding: 0px;
    }

    .contact-content, 
    .about-content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%; 
        font-size: 0.8rem; 
        line-height: 1rem;
        text-align: justify;
    } 
    .phone-contact {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%; 
        font-size: 0.9rem; 
        line-height: 0.3rem;
        text-align: justify;
    }
    .contact-section{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 2rem;
    }
   
    .left-side, .right-side {
        text-align: left; 
        display: none;
    }
    
    .hidden {
        display: none;
    }
    
    .left-side {
        text-decoration: underline;
        text-underline-offset: 1px;
    }
    .header-menu {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 2.2rem;
        color: #000000;
        margin-bottom: 1.3vh;
        padding-left: 2vw;
    }
    
  
.menu-button {
    display: block;
    padding: 1.5vh 2vw;
    font-size: 1rem;
    width: 80%;
    border: 1px solid #333;
    background-color: transparent;
    text-align: center;
    position: relative; 
}

.dropdown-menu {
    display: none; 
    flex-direction: column;
    align-items: center;
    width: 100vw; 
    height: 100vh; 
    position: fixed;
    top: 0;
    left: 0; 
    background-color: white; 
    color: black; 
    z-index: 1000; 
    overflow-y: auto; 
    box-sizing: border-box; 
}

.dropdown-menu.active {
    display: flex; 
}

header.hidden {
    display: none;
}

.dropdown-menu button {
    background-color: transparent;
    border: none;
    font-size: 1rem;
    padding: 1em;
    cursor: pointer;
    color: black;
    text-align: center;
    width: 100%;
}

/* dropdown buttons on hover */
.dropdown-menu button:hover {
    background-color: #f0f0f0; 
}


 .button-container2, .vertical-buttons, .vertical-buttons2 {
    display: none;
    }
}

/* macbook */
@media (max-width: 1440px) and (min-width: 1025px)  {
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 90vh;
        background-color: #ffffff;
        padding: 1vh 0 2vh 2vw;
    }
    
    header {
        position: absolute;
        top: 0.5vh;
        left: 1vw;
        padding: 1vh 0 0 2vw;
       
    }
    
    h1 {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 2.8rem;
        color: #333;
        margin-bottom: 1.3vh;
        padding-left: 2vw;
    }
    .portfolio-text {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 2.5rem;
        color: #333;
        margin-bottom: 1vh;
        margin-right: 7vw;
    }
    
    main {
        padding-top: 15vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 82vw;
    }
    .top-section {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        margin-bottom: 1vh;
    }
    
    .button-container {
    
       display: flex;
       justify-content: space-between;
       width: auto; 
       gap: 21vw;
       margin-left: 4vw; 
       margin-bottom: -3vh;
    }
    .button-container2 {
        display: flex;
        justify-content: space-between;
        width: 86%;
        margin: -1vh 0 0.5vh;
        padding-right: 4.1vw;
    }
    
    button {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        letter-spacing: 0.25em;
        padding: 1vh 0;
        font-size: 1rem;
        color: #000;
        background-color: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
     button::after {
        content: '';
        position: absolute;
        left: 1%;
        right: 4%;
        bottom: 0;
        width: 100%;
        height: 0.2vh;
        background-color: black;
        transform: scaleX(0);
        transition: transform 0.3s ease-out;
        transform-origin: bottom left;
        margin-bottom: 0.3vh;
    }
    
    button:hover::after {
        transform: scaleX(1);
    } 
    
    .image-section {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2vh;
        width: 100%;
        max-width: 82vw;
    }
    
    .vertical-button {
        position: relative;
        padding: 1vh;
        margin: -2.8vh;
        transform: rotate(-90deg);
        transform-origin: center;
        white-space: nowrap;
        background-color: transparent;
        border: none;
        cursor: pointer;
        overflow: hidden;
    }
    
    .vertical-buttons2 {
        margin-left: -3.3vw;
    }
    
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .image-container {
        position: relative; 
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 82vw;
        max-height: 60vh;
        overflow: hidden;
        background-color: #fff;
    }
    
    .contact-info {
        display: flex;
        margin-left: -96%;
        margin-top: -10%;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: white;
        color: #000;
        padding: 0;
        object-fit: cover;
    }
    
    .contact-content {
        display: flex;
        justify-content: center;    
        width: 100%;
        padding: 8vw;
    }
    
    .hidden {
        display: none;
    }
    
    .left-side {
        flex: 1;
        font-family: 'Lato', sans-serif;
        font-size: 1rem;
        text-align: left;
        margin-left: 100px;
    }
    .right-side {
        flex: 1;
        font-family: 'Lato', sans-serif;
        font-size: 1rem;
        text-align: left;
        margin-right: 120px;
    }
    
    .left-side {
        text-decoration: underline;
        text-underline-offset: 1px;
    }
    
    .about-info {
        display: flex;
        margin-left: -96%;
        margin-top: -10%;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: white;
        color: #000;
        padding: 0;
        object-fit: cover;
    }
    .about-content {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        letter-spacing: 0.01em;
        display: flex;
        justify-content: center;    
        width: 100%;
        padding: 8vw;
    }    
    
    .portfolio-text2{
        display: none;
    }
    .menu-button {
        display: none;
    }

    .dropdown-menu {
        display: none;
    }

    .dropdown-menu.active {
        display: none;
    }
  }