@font-face {
    font-family: Cairo;
    src: url(/assets/fonts/Cairo-VariableFont_wght.ttf);
}

/* General Classes */
.site-btn::before{
    left: initial;
    right: 0;
    transform-origin: right;
}

.prev{
    left: initial;
    right: 0;
}
.next{
    right: initial;
    left: 0;
}

.sublist{
    margin-left: 0;
    margin-right: 30px;
}

/* Universal Styles */
body{
    font-family: 'Cairo', sans-serif;
}

button{
    font-family: 'Cairo', sans-serif;
}

input::placeholder{
    font-family: 'Cairo', sans-serif;
}

textarea::placeholder{
    font-family: 'Cairo', sans-serif; 
}

header nav .hamburger{
    right: initial;
    left: 20px;
}

header .site-tooltip{
    margin: 0 10px 0 20px;
}

/* Home */
main #productshook-section .productshook-content{
    margin-left: 0;
    margin-right: 50px;
}

main #productshook-section .productshook-content .subheading{
    margin-left: auto;
    margin-right: 0;
}
main #productshook-section .productshook-content .subheading::after{
    left: initial;
    right: 20px;
    transform: translateX(0);
}

/* About Us */
main .about-section-big .about-content .content-title h3{
    margin-left: 0;
    margin-right: 20px;
}

main .about-section-small .about-small-container .about-small-heading h2{
    margin-right: 0;
    margin-left: 10px;
}

main .about-section-small .about-small-container .about-small-heading i:not(.fa-plus){
    margin-right: 0;
    margin-left: 20px;
}

main .about-section-small .about-small-container .about-small-page.current-small-page{
    height: 300px;
}

/* Responsiveness */
@media screen and (max-width: 1024px){
    /* Home */
    main #productshook-section{
        flex-direction: column;
    }

    main #productshook-section .productshook-content .subheading{
        margin-right: auto;
    }
    main #productshook-section .productshook-content .subheading::after{
        right: 50%;
        transform: translateX(50%);
    }

    main #productshook-section .productshook-content{
        margin-right: 0;
    }
    /* End Home */
}

@media screen and (max-width: 768px){
    header nav .nav-links{
        right: initial;
        left: -100vw;
    }

    header nav .nav-links.open{
        transform: translateX(100%);
    }

    header .site-tooltip{
        margin-left: 80px;
        margin-right: 10px;
    }
}


/* Animations */
@keyframes link-appear {
    0%{
        transform: translateX(-10px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}