@import url("./fonts.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
@import url("https://muhammad-salman-webdev.github.io/OriginSoftware.dev/Resources/fontawesome-pro-icons/css/all.min.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    transition: all .3s ease;
}

/* For WebKit browsers (Chrome, Safari) */
*::-webkit-scrollbar {
    display: none;
}

/* For Firefox */
* {
    scrollbar-width: none;
}

/* For IE and Edge */
* {
    -ms-overflow-style: none;
}

@keyframes moveUp {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-75%);
    }
}

body {
    background: #dfe0e1;
    min-height: 100vh;
}

.header {
    position: fixed;
    top: 2vw;
    right: 2vw;
    left: 0;
    z-index: 5;

    .header-container {
        nav ul {
            display: flex;
            justify-content: end;
            align-items: center;
            gap: 30px;

            a {
                display: block;

                &:hover {
                    transform: rotate(10deg) scale(1.08);
                }

                &.active {
                    opacity: .7;
                }
            }

            img {
                width: 40px;
                ;
            }

            li:first-child {
                img {
                    
                    width: 54px;
                }
            }
        }
    }
}

.form_close_icon {
    display: none;
    font-size: 24px;
}

/* Main Content  */
.tab-content-main {
    display: flex;
    flex-direction: column;
    padding-top: 42vh;
    align-items: center;
    width: 90vw;
    height: 100vh;
    max-width: 1035px;
    margin: 0 auto;
    display: none;
    position: absolute;
    inset: 0;
    display: flex;

    &[data-content-tab="tab_3"],
    &[data-content-tab="tab_4"] {
        .tab-content {
            position: relative;
            max-height: 260px;
            overflow: hidden;

            &::before {
                top: 0;
                left: 0;
                right: 0;
                position: absolute;
                content: '';
                min-height: 50px;
                background-image: linear-gradient(0deg, transparent, #DFE0E1 75%);
                z-index: 1;
            }

            p {
                animation: moveUp 60s linear infinite;
            }
        }
    }

    .tab-content-main-head {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        user-select: none;

        h1 {
            font-size: 160px;
            line-height: 100px;
            font-weight: 400;
            color: #161616;
            font-family: 'DMSerifText', serif;
        }

        a {
            img {
                position: relative;
                height: 90px;
                aspect-ratio: 5 / 3;
                margin-top: 28px;
            }
        }
    }

    .tab-content {
        width: 100%;
        text-align: center;
        font-size: clamp(16px, 2vw, 20px);
        font-weight: 400;
        font-family: 'Apercu-Light', sans-serif;
        max-height: 70vh;
        overflow: auto;

        div.wpforms-container-full:not(:empty) {
            width: 90%;
            margin-left: auto;
            margin-right: auto;

            button {
                width: 100% !important;
                border: 1px solid rgba(0, 0, 0, 0.25) !important;
                color: rgba(0, 0, 0, 0.7) !important;
                background-color: transparent !important;

                &:hover {
                    background-color: rgb(34, 74, 246) !important;
                    color: white !important;
                }
            }
        }
    }

    &.show {
        z-index: 3;

        .tab-content,
        .tab-content-footer {
            opacity: 1;
            transform: scale(1);
        }
    }

    .tab-content,
    .tab-content-footer {
        opacity: 0;
        transition: all .4s ease;
        transform: scale(.8);
    }

    .tab-content-footer {
        display: flex;
        justify-content: space-between;
        width: 88%;
        margin: 16px auto 0;
        padding-bottom: 30px;

        ul {
            display: flex;
            flex-direction: column;
            gap: 6px;

            li {
                a {
                    color: rgba(0, 0, 0, 0.7);
                    font-family: system-ui;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }
            }
        }
    }
}
/* custom css for website  */

.wpforms-field-large , .wpforms-field-medium{
background: none !important;
border: solid 1px black;
}
.footer {
    position: fixed;
    bottom: 2vw;
    right: 2vw;
    left: 0;
    z-index: 5;

    .footer-items {
        display: flex;
        justify-content: end;
        position: relative;

        li {
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;

            &.active {
                opacity: 1;
            }
        }

        li a {
            color: black;
            font-family: 'DailyChallenge';
            font-size: 28px;
            cursor: pointer;
        }
    }
}


@media (max-width: 600px) {
    .header {
        & .header-container {
            nav ul {
                gap: 20px;
                img {
                    width: 30px !important;
                }
            }
        }
    }

    .tab-content-main {
        .tab-content-main-head {
            h1 {
                font-size: 40px;
                line-height: 30px;
            }

            a {
                img {
                   width: 42px;
                    height: unset;
                    margin-top: 10px;
                }
            }
        }
    }
}





@media (max-width: 576px) {
    .tab-content-main:has(._form-container) {
        background: #dfe0e1;
        max-width: 100vw;
        width: 100vw;
        transition: 0s all linear;

        &.show {
            padding-top: unset;
            z-index: 7;
            justify-content: start;

            .tab-content-main-head {
                display: none;
            }
        }

        .wpforms-container {
            margin-top: 50px;
        }

        .tab-content,
        .tab-content-footer {
            transition: 0s all linear;
        }

        .tab-content-footer {
            flex-direction: column;
            gap: 12px;

            ul {
                gap: 12px;
            }
        }

        .form_close_icon {
            display: block !important;
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 2;
        }

        .wpforms-container .wpforms-one-half {
            width: 100%;
            margin: 0 !important;
        }
    }
    
    .header { 
        .header-container {
            nav ul { 
                li:first-child {
                    img { 
                        width: 42px !important;
                    }
                }
            }
        }
    }
}