/* Wefaq intro / landing site brand styles */

.logodiv .wefaq-logo img,
.footer-item .wefaq-logo img {
    margin: 0 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.header {
    background: var(--wefaq-hero-gradient);
}

.fixedhead {
    background: rgba(25, 12, 46, 0.88) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(25, 12, 46, 0.25);
}

.lastitem {
    background: var(--wefaq-gradient) !important;
    border: none;
    box-shadow: var(--wefaq-glow);
}

.lastitem:hover {
    background: var(--wefaq-primary-dark) !important;
    box-shadow: 0 6px 28px rgba(125, 82, 208, 0.45);
}

.lastitem:hover.lastitem a {
    color: var(--wefaq-white) !important;
}

.form_label input[type="button"],
.form_label input[type="submit"] {
    background: var(--wefaq-gradient);
    color: var(--wefaq-white);
    border: none;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--wefaq-glow);
}

.form_label input[type="button"]:hover,
.form_label input[type="submit"]:hover {
    background: var(--wefaq-primary-dark);
    box-shadow: 0 6px 28px rgba(125, 82, 208, 0.45);
    transform: translateY(-1px);
}

.about-app {
    background: var(--wefaq-gradient);
}

.about-app .howItem {
    background: var(--wefaq-white);
    border: 1px solid var(--wefaq-pale);
    box-shadow: 0 4px 20px rgba(157, 115, 230, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-app .howItem:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(157, 115, 230, 0.2);
}

.about-app .icon {
    background: var(--wefaq-pale);
    color: var(--wefaq-primary-dark);
}

.about-app .txt h4 {
    color: var(--wefaq-heading);
}

.about-app .txt p {
    color: var(--wefaq-text);
}

.arselfooter {
    background: var(--wefaq-dark);
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.25);
}

.footer-item ul li a:hover {
    color: var(--wefaq-light) !important;
}

.titl,
.txt h4,
.appPage,
.about-text h3 {
    color: var(--wefaq-heading);
}

.textInfo {
    color: var(--wefaq-text);
}

.about-text p,
.txt p,
.secondcarousel .item .gray {
    color: var(--wefaq-text);
}

.secondcarousel .item {
    border: 1px solid var(--wefaq-pale);
    box-shadow: 0 4px 20px rgba(157, 115, 230, 0.08);
}

.form_label input,
.areaForm {
    background-color: var(--wefaq-bg);
    border: 1px solid var(--wefaq-pale);
}

.form_label input:focus,
.areaForm:focus {
    border-color: var(--wefaq-primary);
    box-shadow: 0 0 0 3px rgba(157, 115, 230, 0.15);
}

.about-us {
    background-color: var(--wefaq-bg);
    padding: 60px 0;
}

.opinion {
    background-color: var(--wefaq-pale);
    border-radius: 0;
}

.Contact {
    background-color: var(--wefaq-bg);
}

.about-img::before {
    background: var(--wefaq-gradient);
    box-shadow: var(--wefaq-glow);
}

.about-img:hover.about-img::before {
    background: var(--wefaq-primary-alpha);
}

.navBar li a:hover {
    color: var(--wefaq-light) !important;
}

@media (max-width: 992px) {
    .nav-list.respon {
        background-color: var(--wefaq-dark);
    }

    .navBar li a:hover {
        color: var(--wefaq-secondary) !important;
    }

    .lastitem {
        background: var(--wefaq-gradient) !important;
    }

    .lastitem a {
        color: var(--wefaq-white) !important;
    }
}

.playIcon i {
    color: var(--wefaq-primary-dark);
}

.rated,
.secondcarousel .item .client-info .info .rate .rated i {
    color: var(--wefaq-primary) !important;
}
