@keyframes slideIn {
    from{
        transform: translateY(-5000px);
    }
    to{
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from{
        transform: translateY(0);
    }
    to{
        transform: translateY(-5000px);
    }
}
@keyframes contactOpen {
    from{
        transform: translateX(5000px);
    }
    to{
        transform: translateX(0%);
    }
}
@keyframes contactClosed {
    from{
        transform: translateX(-0%);
    }
    to{
        transform: translateX(-5000px);
    }
}
@keyframes contactOpen1 {
    from{
        transform: translateX(5000px);
    }
    to{
        transform: translateX(-50%);
    }
}
@keyframes contactClosed1 {
    from{
        transform: translateX(-50%);
    }
    to{
        transform: translateX(-5000px);
    }
}

@keyframes polygon {
    from{
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 24px solid var(--main-colour-300);
        transform: rotate(90deg);
    }
    20%{
        border-bottom: 24px solid var(--main-colour-300);
    }
    to{
        border-radius: 50%;
        border: none;
        height: 20px;
        aspect-ratio: 1;
        background: var(--main-colour-300);
        transform: scale(25);
    }
    
}
@keyframes mainImg2 {
    from {
        transform: translate(0);
    }
    50%{
        transform: translateY(100px);
    }
    to {
        transform: translate(0);
    }
}
@keyframes mainImg {
    from {
        transform: translate(0);
    }
    50%{
        transform: translateY(-100px);
    }
    to {
        transform: translate(0);
    }
    
}

.slideInOpen{
    animation: contactOpen 0.3s ease-in-out  forwards;
}
.slideOutClose{
    animation: contactClosed 0.3s ease-in-out  forwards;
}


.no-scroll {
    overflow: hidden;
}
.show {
    animation: slideIn 0.3s ease-in-out  forwards;
}
.hide {
    animation: slideOut 0.3s ease-in-out  forwards;
}

.hiddenText {
    
}
.none {
    display: none;
}
.block {
    display: block;
}