/* =========================================
   IMPORT FONT
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =========================================
   ROOT
========================================= */

:root {
    --red: #d71920;
    --red-dark: #b31217;
    --black: #050505;
    --dark: #0f0f10;
    --white: #ffffff;
    --gray: #a7a7a7;
    --light: #f8f9fb;
    --card: #151515;
    --border: rgba(255,255,255,.08);
    --shadow: 0 10px 40px rgba(0,0,0,.25);
    --radius: 24px;
    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Poppins', sans-serif;
}
/* =========================================
   AQARONE LOADER
========================================= */

#aqarLoader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at top, #161616 0%, #050505 70%);
    z-index: 999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity .5s ease, visibility .5s ease;
}

    /* HIDE */

    #aqarLoader.hide {
        opacity: 0;
        visibility: hidden;
    }

/* =========================================
   CONTENT
========================================= */

.aqar-loader-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* =========================================
   LOGO
========================================= */

.aqar-loader-logo h1 {
    font-size: 95px;
    font-weight: 900;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -2px;
    font-family: var(--font-ar);
    animation: logoFade 1.5s ease infinite alternate;
}

    .aqar-loader-logo h1 span {
        color: var(--red);
    }

.aqar-loader-logo p {
    color: #888;
    font-size: 18px;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-weight: 700;
}

/* =========================================
   SPINNER
========================================= */

.aqar-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 45px 0;
}

    .aqar-spinner span {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--red);
        display: block;
        animation: bounce 0.7s infinite alternate;
        box-shadow: 0 0 25px rgba(215,25,32,.7);
    }

        .aqar-spinner span:nth-child(2) {
            animation-delay: .2s;
        }

        .aqar-spinner span:nth-child(3) {
            animation-delay: .4s;
        }

/* =========================================
   TEXT
========================================= */

.aqar-loader-text {
    color: #d4d4d4;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* =========================================
   BACKGROUND EFFECT
========================================= */

#aqarLoader::before,
#aqarLoader::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .18;
}

#aqarLoader::before {
    width: 350px;
    height: 350px;
    background: var(--red);
    top: -100px;
    right: -80px;
}

#aqarLoader::after {
    width: 300px;
    height: 300px;
    background: #ffffff;
    bottom: -100px;
    left: -80px;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes bounce {

    from {
        transform: translateY(0);
        opacity: .5;
    }

    to {
        transform: translateY(-18px);
        opacity: 1;
    }
}

@keyframes logoFade {

    from {
        transform: scale(1);
        opacity: .85;
    }

    to {
        transform: scale(1.03);
        opacity: 1;
    }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px) {

    .aqar-loader-logo h1 {
        font-size: 62px;
    }

    .aqar-loader-logo p {
        font-size: 14px;
        letter-spacing: 5px;
    }

    .aqar-loader-text {
        font-size: 15px;
    }

    .aqar-spinner span {
        width: 14px;
        height: 14px;
    }
}

/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
.english1{
    text-align:start;
}
.swal2-html-container {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
}
/* =========================================
   REVIEW FORM
========================================= */

.review-upload {
    width: 120px;
    height: 120px;
    margin: auto;
    position: relative;
}

    .review-upload img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid rgba(255,255,255,.08);
    }

    .review-upload label {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--red);
        color: white;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: .3s;
    }

        .review-upload label:hover {
            transform: scale(1.1);
        }

/* =========================================
   STARS
========================================= */

.rating-stars,
.review-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .rating-stars i,
    .review-stars i {
        font-size: 22px;
        color: #444;
        cursor: pointer;
        transition: .3s;
    }

        .rating-stars i.active,
        .review-stars i {
            color: #ffc107;
        }

/* =========================================
   REVIEWS GRID
========================================= */

.reviews-grid {
    display: grid;
    gap: 25px;
}

.review-top {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.review-user-img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
}

.review-top h5 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 800;
    color: white;
}

.review-text {
    color: #cfcfcf;
    line-height: 2;
    font-size: 15px;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px) {

    .review-upload {
        width: 100px;
        height: 100px;
    }

    .review-user-img {
        width: 60px;
        height: 60px;
    }

    .review-top h5 {
        font-size: 17px;
    }

    .review-text {
        font-size: 14px;
    }
}
body {
    background: var(--black) !important;
    color: var(--white) !important;
    overflow-x: hidden !important;
    font-family: var(--font-ar) !important;
    direction: rtl !important;
    text-align: right !important;
    line-height: 1.7 !important;
}
/* =========================================
   SWEET ALERT CUSTOM
========================================= */

.aqar-swal-popup {
    border-radius: 30px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: var(--black) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
    direction: rtl !important;
    overflow: hidden !important;
}
/* =========================================
   SWEET ALERT LOGO
========================================= */

.swal-brand-logo {
    text-align: center !important;
    margin-bottom: 20px !important;
    min-width:75%;
    max-width:75%;

}

    .swal-brand-logo h1 {
        font-size: 42px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        margin-bottom: 5px !important;
        color: white !important;
        font-family: var(--font-ar) !important;
    }

        .swal-brand-logo h1 span {
            color: var(--red) !important;
        }

    .swal-brand-logo p {
        color: #999 !important;
        font-size: 14px !important;
        font-family: var(--font-ar) !important;
    }

/* TITLE */

.swal-custom-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: white !important;
    margin-bottom: 14px !important;
    font-family: var(--font-ar) !important;
}

/* TEXT */

.swal-custom-text {
    color: #cfcfcf !important;
    font-size: 16px !important;
    line-height: 2 !important;
    margin-bottom: 10px !important;
    font-family: var(--font-ar) !important;
}
.aqar-swal-title {
    font-family: var(--font-ar) !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    color: white !important;
    margin-bottom: 10px !important;
}

.aqar-swal-text {
    font-family: var(--font-ar) !important;
    font-size: 17px !important;
    color: #bcbcbc !important;
    line-height: 2 !important;
}

.aqar-swal-confirm {
    height: 55px !important;
    min-width: 160px !important;
    border-radius: 16px !important;
    font-family: var(--font-ar) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    background: linear-gradient( 135deg, var(--red), #a50f15 ) !important;
    border: none !important;
    transition: .3s !important;
    box-shadow: 0 10px 25px rgba(215,25,32,.25) !important;
}

    .aqar-swal-confirm:hover {
        transform: translateY(-3px) !important;
        background: linear-gradient( 135deg, #e11d25, #920c12 ) !important;
    }

/* ICON */

.swal2-success-ring {
    border-color: rgba(215,25,32,.35) !important;
}

.swal2-success-line-tip,
.swal2-success-line-long {
    background-color: #d71920 !important;
}

.swal2-success-circular-line-left,
.swal2-success-circular-line-right,
.swal2-success-fix {
    background: transparent !important;
}

/* MOBILE */

@media(max-width:768px) {

    .aqar-swal-popup {
        width: 90% !important;
        padding: 2rem 1.3rem !important;
        border-radius: 24px !important;
    }

    .aqar-swal-title {
        font-size: 24px !important;
    }

    .aqar-swal-text {
        font-size: 15px !important;
    }

    .aqar-swal-confirm {
        width: 100% !important;
    }
}
img {
    max-width: 100% !important;
    display: block !important;
}

a {
    text-decoration: none !important;
    color: var(--white) !important;
}

button,
input,
textarea {
    font-family: var(--font-ar) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label {
    font-family: var(--font-ar) !important;
}

/* =========================================
   CONTAINER
========================================= */

.main-container {
    width: 90% !important;
    max-width: 1450px !important;
    margin-inline: auto !important;
}

/* =========================================
   HEADER
========================================= */

.topbar {
    position: fixed !important;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 95px !important;
    z-index: 99999 !important;
    background: rgba(0,0,0,.82) !important;
    backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

.custom-navbar {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* =========================================
   LOGO
========================================= */

.brand-logo h1 {
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}

    .brand-logo h1 span {
        color: var(--red) !important;
    }

.brand-logo p {
    color: #aaa !important;
    font-size: 14px !important;
}
/* =========================================
   LOGIN MODAL
========================================= */

.login-modal-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 35px !important;
}

.login-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
    color: white !important;
}

.login-input {
    width: 100% !important;
    height: 60px !important;
    border-radius: 18px !important;
    border: 2px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.03) !important;
    outline: none !important;
    padding: 0 20px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #fff !important;
    transition: .3s !important;
}

    .login-input:focus {
        border-color: var(--red) !important;
        box-shadow: 0 0 0 4px rgba(215,25,32,.12) !important;
    }

    .login-input::placeholder {
        color: #888 !important;
    }

.login-footer {
    display: flex !important;
    justify-content: center !important;
    padding: 0 35px 35px !important;
}

.login-submit-btn {
    width: 100% !important;
    height: 58px !important;
    border: none !important;
    border-radius: 18px !important;
    background: linear-gradient( 135deg, var(--red), #a50f15 ) !important;
    color: white !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    transition: .3s !important;
    cursor: pointer !important;
}

    .login-submit-btn:hover {
        transform: translateY(-3px) !important;
        background: linear-gradient( 135deg, #e11d25, #920c12 ) !important;
    }

/* MOBILE */

@media(max-width:768px) {

    .login-modal-body {
        padding: 30px 20px !important;
    }

    .login-title {
        font-size: 18px !important;
    }

    .login-input {
        height: 55px !important;
        font-size: 16px !important;
    }

    .login-submit-btn {
        height: 54px !important;
        font-size: 16px !important;
    }
}
/* =========================================
   NAVBAR
========================================= */

.nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
}

    .nav-links a {
        color: white !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        position: relative !important;
        transition: .3s !important;
        padding-bottom: 8px !important;
    }

        .nav-links a:hover {
            color: var(--red) !important;
        }

        .nav-links a::after {
            content: "";
            position: absolute;
            bottom: 0;
            right: 50%;
            transform: translateX(50%);
            width: 0;
            height: 2px;
            background: var(--red);
            transition: .3s;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

/* =========================================
   BUTTONS
========================================= */

.nav-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;

}

.login-btn,
.logout-btn {
    min-width: 140px !important;
    height: 50px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    transition: .3s !important;
}

.login-btn {
    border: 1px solid rgba(215,25,32,.4) !important;
    color: white !important;
    background: rgba(255,255,255,.03) !important;
}

    .login-btn:hover {
        background: var(--red) !important;
        border-color: var(--red) !important;
        transform: translateY(-2px) !important;
    }

/* =========================================
   HERO
========================================= */

.hero {
    min-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.hero-left {
    position: absolute !important;
    inset: 0 !important;
}

    .hero-left img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .hero-left::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to left, rgba(0,0,0,.35), rgba(0,0,0,.82) );
    }

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 120px 120px;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 5;
    text-align: center !important;
    padding-top: 80px !important;
}

.hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    border-radius: 100px !important;
    background: rgba(255,255,255,.08) !important;
    color: white !important;
    margin-bottom: 25px !important;
    font-size: 15px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

.hero-title {
    font-size: 180px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-bottom: 25px !important;
    text-shadow: 0 10px 40px rgba(0,0,0,.5) !important;
}

    .hero-title span {
        color: var(--red) !important;
    }

.hero-subtitle {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #e7e7e7 !important;
    line-height: 2 !important;
}

/* =========================================
   SECTIONS
========================================= */

.services-section,
.standards-section,
.modern-testimonials,
.clients,
.modern-contact-section {
    padding: 120px 0 !important;
}

.services-section {
    background: #0b0b0b !important;
}

.standards-section {
    background: linear-gradient(to bottom,#050505,#0d0d0d) !important;
}

.clients {
    background: #080808 !important;
}

.modern-contact-section {
    background: linear-gradient(to bottom,#0d0d0d,#050505) !important;
}

/* =========================================
   TITLES
========================================= */

.section-title {
    text-align: center !important;
    margin-bottom: 60px !important;
}

    .section-title h2 {
        font-size: 46px !important;
        font-weight: 900 !important;
        margin-bottom: 15px !important;
    }

    .section-title p {
        color: #bcbcbc !important;
        font-size: 17px !important;
    }

.mini-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    border-radius: 100px !important;
    background: rgba(215,25,32,.12) !important;
    color: #ff4d55 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: 1px solid rgba(215,25,32,.25) !important;
}

/* =========================================
   GRID
========================================= */

.services-grid,
.standards-grid {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 30px !important;
}

/* =========================================
   CARDS
========================================= */

.service-card,
.standard-card,
.client-card,
.testimonial-item {
    background: #141414 !important;
    border-radius: 28px !important;
    padding: 45px 30px !important;
    transition: .3s !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    text-align: center !important;
}

    .service-card:hover,
    .standard-card:hover,
    .client-card:hover,
    .testimonial-item:hover {
        transform: translateY(-10px) !important;
        border-color: rgba(215,25,32,.4) !important;
    }

.service-icon,
.standard-icon {
    font-size: 52px !important;
    margin-bottom: 20px !important;
}

/* =========================================
   CONTACT
========================================= */

.contact-side-card,
.modern-form-card {
    background: #121212 !important;
    border-radius: 32px !important;
    padding: 40px !important;
    height: 100% !important;
    border: 1px solid rgba(255,255,255,.05) !important;
}

.contact-item {
    display: flex !important;
    gap: 18px !important;
    margin-bottom: 35px !important;
}

.icon-box {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
    background: rgba(215,25,32,.15) !important;
    color: var(--red) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
}

.modern-input {
    width: 100% !important;
    height: 58px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.03) !important;
    padding: 0 20px !important;
    color: white !important;
    text-align:center;
}

.modern-send-btn {
    min-width: 220px !important;
    height: 60px !important;
    border: none !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg,var(--red),#a50f15) !important;
    color: white !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    transition: .3s !important;
}

/* =========================================
   MODAL
========================================= */

.modal {
    z-index: 99999 !important;
}

.modal-content {
    background: #111 !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    overflow: hidden !important;
}

.modal-title {
    color: white !important;
}

.btn-close {
    filter: invert(1) !important;
}

.ux-card {
    background: rgba(255,255,255,.03) !important;
    border-radius: 18px !important;
    padding: 25px !important;
    border: 1px solid rgba(255,255,255,.05) !important;
}

/* =========================================
   TABLET
========================================= */

@media(max-width:992px) {

    .topbar {
        height: auto !important;
        padding: 20px 0 !important;
    }

    .custom-navbar {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .nav-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    .hero {
        padding-top: 180px !important;
        padding-bottom: 100px !important;
    }

    .hero-title {
        font-size: 100px !important;
    }

    .hero-subtitle {
        font-size: 22px !important;
    }

    .services-grid,
    .standards-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px) {

    .topbar {
        padding: 15px 0 !important;
    }

    .brand-logo {
        text-align: center !important;
    }

        .brand-logo h1 {
            font-size: 32px !important;
        }

    .nav-links {
        gap: 14px !important;
    }

        .nav-links a {
            font-size: 14px !important;
        }

    .nav-buttons {
        width: 100% !important;
        justify-content: center !important;
    }

    .login-btn {
        width: 180px !important;
    }

    .hero {
        padding-top: 220px !important;
        padding-bottom: 80px !important;
    }

    .hero-title {
        font-size: 75px !important;
        margin-bottom: 18px !important;
    }

    .hero-subtitle {
        font-size: 18px !important;
        line-height: 2 !important;
        width: 95% !important;
        margin-inline: auto !important;
    }

    .hero-badge {
        font-size: 13px !important;
        padding: 8px 18px !important;
    }

    .section-title h2 {
        font-size: 32px !important;
    }

    .section-title p {
        font-size: 15px !important;
        line-height: 2 !important;
    }

    .services-section,
    .standards-section,
    .modern-testimonials,
    .clients,
    .modern-contact-section {
        padding: 80px 0 !important;
    }

    .services-grid,
    .standards-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .service-card,
    .standard-card,
    .client-card,
    .testimonial-item {
        padding: 30px 22px !important;
    }

    .service-icon,
    .standard-icon {
        font-size: 42px !important;
    }

    .contact-side-card,
    .modern-form-card {
        padding: 25px 20px !important;
    }

    .contact-item {
        gap: 15px !important;
    }

    .icon-box {
        width: 52px !important;
        height: 52px !important;
    }

    .modern-send-btn {
        width: 100% !important;
    }

    .modal-dialog {
        width: 94% !important;
        margin: 25px auto !important;
    }

    .modal-title {
        font-size: 24px !important;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px) {

    .hero {
        padding-top: 240px !important;
    }

    .hero-title {
        font-size: 58px !important;
    }

    .hero-subtitle {
        font-size: 16px !important;
    }

    .section-title h2 {
        font-size: 27px !important;
    }

    .nav-links {
        gap: 10px !important;
    }

        .nav-links a {
            font-size: 13px !important;
        }

    .service-card,
    .standard-card,
    .client-card,
    .testimonial-item {
        border-radius: 22px !important;
    }

    .modern-send-btn {
        border-radius: 16px !important;
    }
}