/* ---------------------We Go--------------------- */

:root {
    --color-primary: #0a75ef;
    --color-denger: #ff7782;
    --color-success: #41f1b6;
    --color-waring: #ffbb55;
    --main-transition: 00.3s;
    --color-white: #fff;
    --color-info-dark: #7d8da1;
    --color-info-light: #dce1eb;
    --color-dark: #353949;
    /* --color-light: rgba(132, 139, 208, 0.18); */
    --color-light: rgb(132 139 208 / 11%);
    --color-primary-varint: #111e88;
    --color-dark-varint: #677483;
    --color-background: #f6f6f9;
    --card-order-radius: 2rem;
    /* border-radius */
    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;
    /* padding */
    --card-padding: 1.8rem;
    --main-padding-top: 50px;
    --main-padding-bottom: 50px;
    --padding-1: 1.2rem;
    /* box-shadow */
    --box-shadow: 0 2rem 3rem var(--color-light);
}

.dark-them-var {
    --color-background: #181a1e;
    --color-white: #202528;
    --color-dark: #edeffd;
    --color-dark-varint: #a3bdcc;
    --color-light: rgba(0, 0, 0, 0.4);
    --box-shadow: 0 2rem 3rem var(--color-dark);
}

* {
    padding: 0;
    margin: 0;
    outline: 0;
    border: 0;
    appearance: none;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html {
    font-size: 14px;
}
.aa {
    list-style: none;

    text-decoration: none;
    width: 100%;
    font-size: 20px;
    /* margin-left: 18rem; */
    text-align: center;
}
body {
    width: 100vw;
    height: 100vh;
    font-family: cursive, system-ui;

    /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 0.88rem;
    background-color: var(--color-background);
    user-select: none;
    overflow-x: hidden;
    color: #333;
}
.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    padding: 10px;
}
.image{
    width: 100%;
    height: 100%;
}
.image img {
    width: 250px;
    height: 125px;
}
nav{
    color: #fff;
    background-color: #007bff;
    display: grid;
    grid-template-columns: .1fr 5fr;
    padding: 20px;
}
nav .login {
    padding: 20px;
}
nav .login .btn:nth-child(1) {
    color: #fff;
    background-color: #007bff;
    border: 1px solid #fff;
    font-size: 20px;
}
.navbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.navbar .head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
}
.navbar .head h2 {
    font-size: 34px;


}
.navbar .head .aa {
    font-size: 34px;
    color: #fff;
    text-decoration: none;
    margin-left: 6rem;

}
.navbar .mid ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .mid ul li {
    padding: 7px;

    /* background-color: #fff; */
    border-radius: 7px;
}
.navbar .mid ul li a {
    color: #fff;
    margin-right: 7px;
    font-size: 16px;
    font-weight: bold;
}
.navbar .search {
    width: 100%;
    text-align: center;
}
.navbar .search input {
    width: 49%;
    padding: 10px;
    border-radius: 7px;
}
/* MAIN GRID */

.grid {
    display: grid;
    grid-template-columns: 2fr 2fr;
    width: 100%;
    padding: 7rem;
    gap: 20px;
}
.grid .grid-one , .grid .grid-two {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
/* .grid .grid-one .full {
    width: 100%;
    height: 100%;
} */
.grid .grid-one .full img , .grid .grid-two .full img {
    width: 100%;
    height: 90%;
}
.grid .grid-one .two , .grid .grid-two .two {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.grid .grid-one .two img , .grid .grid-two .two img {
    width: 100%;
    height: 100%;
}
.logo {
    color: #f09c1d;
    font-size: 30px;
    font-family: cursive, system-ui;
    font-style: italic;
    font-weight: bold;
    margin-left: 15px;
}

.link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    z-index: 900;
    background-color: #f6f6f914;
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.sidebar {
    display: none;
}
.sidebar .btn {
    color: #333;
    width: 100% ;
    border: none;
}
.icone {
    cursor: pointer;
    font-size: 24px;
    padding: 10px;
}
.sidebar .btn:hover {
    border: none;
}
.btn {
    padding: 10px;
    margin-right: 7px;
    border: 1px solid #7e7474;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
}

.btn:hover {
    transition: .1s;
    /* scale: 1.1; */
    transform: translate(-1px , -1px);
    border: 1px solid #333;

}
/* START stric */
.grid-full {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 10rem;
}
.grid-full .btn {
    background-color: #0a75ef;
    font-size: 24px;
    border: 1px solid #fff;
    padding: 10px 20px;
}
.stric {
    width: 100%;
    height: 100%;
    padding: 10px;
    /* transform: translate(-127px, 19px); */
    text-align: center;
    background-color: #0a75ef0d;
    border: 1px solid rgb(142 197 252 / 47%);

}
.stric p {
    color: #333;
    font-size: 24px;
    font-weight: bold;
}
/* START MAIN */

/* .container .image {
    width: 100%;
    height: 100%;
}
.container .image img {
    width:80rem;
    height: 30rem;
}
/* START MAIN */
.container {
    margin-top: 5rem;
    padding: 20px;
    text-align: center;
}
.boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px;
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    /* min-height:100vh; */
}
.boxes img {
    border-radius: 10px;
} */
/* End MAIN */
/*Start form*/
/* ////////////////////////\ */


/* LOGIN PAGE */
.new {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;

    padding: 10rem;
    width: 100%;
    height: 100%;
}
.continer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* transform: translate(50px, 50px); */
    width: 100%;
    height: 100%;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid rgb(98 114 130 / 38%);
    border-radius: 9px;
    width: 55%;
    /* height: 66%; */
    text-align: center;
}
.form h3 {
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #0a75ef;
}
.form label {
    font-size: 13px;
    font-weight: bold;
}
.form .flext {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.form input:not(.check) {
    padding: 10px;
    outline: none;
    border: 1px solid rgba(180, 192, 203, 0.38);
    border-radius: 9px;
    background-color: transparent;
    width: 100%;
}
.checkbox-container {
    display: flex;
    align-items: center; /* لتوسيط العناصر عموديًا */
    margin-top: 10px; /* مسافة من العناصر السابقة */
}

.check {
    -webkit-appearance: none; /* إزالة التصميم الافتراضي للـ checkbox */
    -moz-appearance: none; /* إزالة التصميم الافتراضي للـ checkbox */
    appearance: none; /* إزالة التصميم الافتراضي للـ checkbox */
    width: 20px; /* عرض الـ checkbox */
    height: 20px; /* ارتفاع الـ checkbox */
    border: 2px solid #007bff; /* لون حدود الـ checkbox */
    border-radius: 4px; /* زوايا دائرية */
    outline: none; /* إزالة الحدود عند التركيز */
    cursor: pointer; /* تغيير المؤشر عند المرور فوق الـ checkbox */
    margin-right: 10px; /* مسافة بين الـ checkbox والـ label */
    margin-left: 7px;
}

.check:checked {
    background-color: #007bff; /* لون الخلفية عند التحديد */
    border: 2px solid #0056b3; /* تغيير لون الحدود عند التحديد */
}

.check:checked::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    /* background-color: #007bff; لون علامة التحقق */
    position: relative;
    top: 2px; /* ضبط الموقع العمودي */
    left: 4px; /* ضبط الموقع الأفقي */
    border-radius: 2px; /* زوايا دائرية */

}

.form button {
    width: fit-content;
    padding: 10px 20px;
    background-color: #0a75ef;
    color: #fff;
    border-radius: 9px;
    cursor: pointer;
}
.social {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding: 10px;
}
.social a{
    margin-top: 5px;
    font-size: 17px;
    color: #0a75ef;
}
/*End form*/
/* START Footer */
.under {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10rem;
    text-align: center;
    background-color: #0a75ef0d;
    font-size: 16px;
    /* border-top: 1px solid #d3bebe3d; */
    border-top: 1px solid rgb(142 197 252 / 47%);
}
.under .first h4 , .last h4  {
    padding: 10px;
    margin-top: 10px;
}
/* End Footer */
.image-gallery {
    display: grid;
    grid-template-columns: 4fr 4fr;
    gap: 2rem;
    padding: 4rem;
}
.image-gallery-m {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr 4fr;
    gap: 2rem;
    padding: 4rem;
}



.image img {
    width: 100%; /* عرض الصورة 100% من العنصر الحاوي */
    height: auto;
    border-radius: 8px; /* الحفاظ على نسبة العرض إلى الارتفاع */
}
@media(max-width:800px) {
    .hideOnMobile{
        display: none;
    }
    .wrapper{
        position: relative;
        width: 700px;
        height: 350px;
    }
    .main {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4rem;
        /* min-height: 50vh; */
    }
    .wrapper .sliders label{
        width: 16px;
        height: 16px;
    }
    .container .image img {
        width:40rem;
        height: 15rem;
    }
    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
    }
    .card::before {
        top: 200px;
        left: 200px;
    }
    .container-buy {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        margin-top: 10px;
        justify-content: space-between;
    }
    .form-buy {
        text-align: center;
    }
    .stric {
        width: 80%;
        height: 161px;
        padding: 10px;
        /* transform: translate(-127px, 19px); */

    }

}
@media (max-width: 480px) {
    .hideOnMobile{
        display: none;
    }
    .wrapper{
        position: relative;
        width: 400px;
        height: 250px;
    }
    .main {
        display: flex;
        align-items: center;
        justify-content: center;
        /* min-height: 50vh; */
    }
    .wrapper .sliders label{
        width: 13px;
        height: 13px;
    }
    .container .image img {
        width: 25rem;
        height: 10rem;

    }
    .card::before {
        top: 200px;
        left: 200px;
    }
    .form {
        width: 96%;
    /* height: 55%; */
    }
    .stric {
        width: 80%;
        height: 161px;
        padding: 10px;
        /* transform: translate(0, 0); */
    }
    .grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 2rem;
    }
    .flex {
        display: flex;
        /* flex-direction: column; */
        gap: 20px;
        width: 100%;
        /* gap: 20px; */
        padding: 10px;
    }
    .image-gallery {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }
    .image-gallery-m {
        display: grid;
        grid-template-columns: 4fr 4fr ;
        gap: 2rem;
        padding: 2rem;
    }

    nav{
        color: #fff;
        background-color: #007bff;
        display: grid;
        grid-template-columns: 0fr 5fr;
        padding: 20px;
    }
    a {
        margin-left: 0rem;
        text-align: center;
    }
}
@media(min-width:800px) {
    .hideOndisk{
        display: none;
    }

   .container .image img {
        width:60rem;
        height: rem;
    }
    .stric {
        width: 80%;
        height: 161px;
        padding: 10px;
        /* transform: translate(-127px, 19px); */
    }
    /* .grid {
        padding: 2rem;
    } */

}


/*Start animation*/

@keyframes up-and-down {
    0%,
    100% {
        top: 0;
    }
    50% {
        top: -50px;
    }
}

@keyframes bouncing {
    0%,
    10%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40%,
    60% {
        transform: translateY(-15px);
    }
}

@keyframes jump {
    /* 0%,
    10%,
    20%,
    50%,
    80%,
    100% {
        transform: rotatez(271deg), translateY(0);
    }
    40%,
    60% {
        transform: rotatez(271deg), translateY(-15px);
    }*/
    0%,
    10%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40%,
    60% {
        transform: translateY(-10px);
    }
}

@keyframes left-move {
    50% {
        left: 0;
        width: 12px;
        height: 12px;
    }
    100% {
        left: 0;
        border-radius: 0;
        width: 100%;
        height: 100%;
    }
}

@keyframes right-move {
    50% {
        right: 0;
        width: 12px;
        height: 12px;
    }
    100% {
        right: 0;
        border-radius: 0;
        width: 100%;
        height: 100%;
    }
}

@keyframes moving-arrow {
    100% {
        transform: translateX(10px);
    }
}

@keyframes flashing {
    0%,
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        width: 200%;
        height: 200%;
    }
}