/*GENERAL*/
html {
    color: #212529;
    cursor: default;
}
h1,h2,h3,h4,h5,h6,a,strong,input,textarea {
    color: #FF81AE;
}
strong:hover {
    text-shadow: 0 4px 20px rgba(255, 129, 174, 0.5);
}
.custom-shadow {
    box-shadow: 0 4px 30px rgba(255, 129, 174, 0.5);
}
.hidden {
    display: none;
}
header {
    overflow: visible;
    box-shadow: 0 4px 30px rgba(255, 129, 174, 0.5);
    z-index: 100;
    position: fixed;
}
.main-nav {
    position: absolute;
    left: 43%;
}
.icon-item {
    width: 80px;
    height: 80px;
    border-radius: 25%;
    box-shadow: 0 2px 10px rgba(255, 129, 174, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu-link {
    text-decoration: none;
}
.menu-item {
    font-size: 20px;
    display: none;

}
.menu-link:hover .menu-item, .menu-link.active .menu-item {
    display: block;
    min-width: 80px;
    transform: translateY(30px);
}
.menu-link.active .menu-item {
    color: #212529;
    box-shadow: 0 15px 10px -5px rgba(255, 129, 174, 0.5);
}
.menu-link:hover .icon-item, .menu-link.active .icon-item {
    display: none;
}
.logo-wrapper {
    position: relative;
}
.logo-circle {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    bottom: -90px;
    left: 0;
    background: #fff;
    z-index: 10;
}
.logo-circle::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    z-index: -1;
    background: radial-gradient(
        circle,
        rgba(255,129,174,.4) 0%,
        rgba(255,129,174,.2) 40%,
        rgba(255,129,174,0) 70%
    );
}
.logo-circle img {
    cursor: pointer;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    transition: transform 0.3s ease;
}
.logo-circle img.fr{
    position: absolute;
    z-index: 2;
}
.logo-circle:hover img.fr {
    transform: translateY(10px);
}
.logo-circle:hover img.bg {
    transform: scale(1.2);
}
main {
    padding-bottom: 120px;
}
/*MAIN*/
.main-card {
    position: relative;
    left: 43%;
}
#main-popup {
    top: 20%;
    z-index: 1050;
    width: 35%;
    transform: scale(0.9);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
#main-popup.show {
    opacity: 1;
    transform: scale(1);
}
.main-image-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
.main-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-image-wrapper img.bg {
    z-index: 1;
    background: radial-gradient(
        circle,
        rgba(255,129,174,.4) 0%,
        rgba(255,129,174,.2) 40%,
        rgba(255,129,174,0) 70%
    );
}
.main-image-wrapper img.ch {
    z-index: 5;
    animation: shake 3s infinite alternate;
}
.main-image-wrapper img.ch2 {
    z-index: 3;
    animation: shake2 3.2s infinite alternate;
}
.main-image-wrapper img.ch3 {
    z-index: 2;
    animation: shake 3.2s infinite alternate;
}
.main-image-wrapper img.ch4 {
    z-index: 5;
    animation: shake2 3.4s infinite alternate;
}
.main-image-wrapper img.ch5 {
    z-index: 2;
    animation: shake 3.6s infinite alternate;
}
@keyframes shake {
    0% {transform: translateY(0px);}
    100% {transform: translateY(-25px);}
}
@keyframes shake2 {
    0% {transform: translateY(0px);}
    100% {transform: translateY(-15px);}
}
/*SERVICES*/
.custom-service {
    height: 80%;
    box-shadow: 0 2px 10px rgba(255, 129, 174, 0.5);
}
.custom-service .icon-item {
    width: 120px;
    height: 120px;
    background: #FFFFFF;
    transform: translateY(50px);
}
.custom-service .icon-item::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    z-index: -1;
    background: radial-gradient(
        circle,
        rgba(255,129,174,.4) 0%,
        rgba(255,129,174,.2) 40%,
        rgba(255,129,174,0) 70%
    );
}
/*PORTFOLIO*/
.custom-portfolio {
    height: 200px;
    box-shadow: 0 2px 10px rgba(255, 129, 174, 0.5);
    background: radial-gradient(
        circle,
        rgba(255,129,174,.4) 0%,
        rgba(255,129,174,.2) 50%,
        rgba(255,129,174,0) 150%
    );
}
.custom-portfolio .label {
    font-size: 5vw;
    color: #FF81AE;
}
.custom-portfolio:hover {
    transform: scale(0.9);
}
.portfolio-card {
    position: fixed;
    inset: 0;
    background: rgba(211, 211, 211, 0.5);
    z-index: 9999;
    overflow-y: auto;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
#portfolio-card.show {
    opacity: 1;
    transform: scale(1);
}
#portfolio-card strong {
    text-shadow: 0 2px 10px rgba(255, 129, 174, 0.5);
    font-size: 2vw;
}
.navigation-button {
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 10;
    padding: 8px 14px;
    box-shadow: 0 2px 10px rgba(255, 129, 174, 0.5);
    background: radial-gradient(
        circle,
        rgba(255,129,174,.4) 0%,
        rgba(255,129,174,.2) 50%,
        rgba(255,129,174,0) 150%
    ), #FFFFFF;

}
.navigation-button.prev {
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
}
.navigation-button.next {
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
}
.navigation-button.prev:hover, .navigation-button.next:hover {
    transform: translateY(-50%) scale(0.9);
}
.navigation-button.close {
    width: 120px;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}
.navigation-button.close:hover {
    transform: translateX(-50%) scale(0.9);
}
.image-scroll {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
    scroll-behavior: smooth;
}
.image-scroll img {
    width: 100%;
    object-fit: cover;
}
/* Chrome / Edge / Safari */
.image-scroll::-webkit-scrollbar {
    width: 6px;
}
.image-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.25);
    border-radius: 4px;
}
/*CONTACT*/
#contact_form input, #contact_form textarea{
    width: 100%;

}
#contact_form input[type="submit"] {
    background: radial-gradient(
        circle,
        rgba(255,129,174,.4) 50%,
        rgba(255,129,174,.2) 100%,
        rgba(255,129,174,0) 150%
    );
}
#contact_form input:focus, #contact_form textarea:focus,
#contact_form input:active, #contact_form textarea:active {
    border-color: #FF81AE;
    outline: none;
}
/*INFO*/



@media (max-width: 768px) {
    .main-card {
        left: 0%;
    }
    #main-popup {
        top: 50%;
        z-index: 1050;
        width: 93%;
        transform: scale(0.9);
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.5s ease;
        box-shadow: 0 20px 300px rgba(255, 129, 174, 0.5);
    }
    .navigation-button.prev {
        left: 20px;
        top: 95%;
        transform: translateY(0%);
    }
    .navigation-button.next {
        right: 20px;
        top: 95%;
        transform: translateY(0%);
    }

    .navigation-button.close {
        width: 120px;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
    }

    .navigation-button.prev:hover, .navigation-button.next:hover {
        transform: translateY(0%) scale(1);
    }
}