@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap');
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    direction: rtl;
    font-family: 'Cairo', sans-serif !important;
    transition: all .3s ease-in-out !important;
    background-color: #000;
    color: gold;
}

.logo img {
    position: absolute;
    left: 3px;
    width: 17%;
    top: 3px;
    border-radius: 50%;
    box-shadow: 0 0 20px;
    cursor: pointer;
}

.order {
    text-decoration: underline;
    font-size: 20px;
}

.logo img:hover {
    box-shadow: 0 0 35px;
}

.containerx {
    margin: 15vh 20% 5px;
}

.main-title {
    font-size: 50px;
    text-shadow: 1px 1px 1px gold;
    text-align: center;
}

.main-images {
    display: grid;
    gap: 10px;
    grid-template-columns: 70% 30%;
    grid-template-rows: 40vh 40vh;
}

.main-images img {
    width: 100%;
    height: 100%;
    border-radius: 15%;
    box-shadow: 0 0 10px;
}

.main-images img.first {
    grid-column: 1;
    grid-row: 1 / 3;
}

.main-desc {
    margin-top: 20px;
    height: auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    text-align: center;
}

.main-desc span,
span.desc {
    font-size: 30px;
}

.fit {
  max-width: 99%;
  max-height: 99%;
}
/*.main-desc span.color {*/


/*    grid-column: 1/4;*/


/*    grid-row: 1 / 2;*/


/*}*/


/*.main-desc span.quantity {*/


/*    grid-column: 2/4;*/


/*    grid-row: 2 / 3;*/


/*}*/

.desc {
    /* margin-top: 20px; */
    height: auto;
}

.other-images {
    margin-top: 20px;
    height: 200vh;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 40% 27% 27%;
    gap: 10px;
    padding: 10px;
}

.other-images video {
    width: 100%;
    height: 100%;
    grid-column: 1/3;
    grid-row: 1 / 2;
}

.other-images img {
    width: 100%;
    height: 100%;
    border-radius: 5%;
    margin: 3px auto;
}

.other-images img.other1,
.other-images img.other2 {
    grid-row: 2 / 3;
}

.other-images img.other3,
.other-images img.other4 {
    grid-row: 3 / 4;
}

.more-desc {
    line-height: 65px;
}

.more-desc h2 {
    text-align: center;
    font-size: 50px;
}

.more-desc h3 {
    text-align: center;
    font-size: 35px;
}

.more-desc h4 {
    text-align: center;
    font-size: 25px;
}


/* form */

.form {
    padding: 25px;
}

label:not(.radio-label) {
    position: absolute;
    transform: translateY(3px);
    right: 13px;
    color: #ffd900;
    transition: all 0.25s ease;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    font-size: 15px;
background-color: grey; /* or background-color: gray; */
}

.req {
    margin: 2px;
    color: #a00;
}

label.active:not(.radio-label) {
    transform: translateY(-50px);
    right: 2px;
    font-size: 14px;
}

label.active .req {
    opacity: 0;
}

label.highlight {
    color: gold;
    background-color: #000000;
}

input:not(.radio),
textarea,
select {
    font-size: 16px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    background: none;
    background-image: none;
    border: #FFD900 solid;
    border-radius: 2px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: 0;
    border-color: gold
}

textarea {
    border: 2px solid #a0b3b0;
    resize: vertical;
}

.field-wrap {
    position: relative;
    margin-bottom: 40px;
}

select,
input[type=submit] {
    cursor: pointer;
    transition: all .3s ease-in-out;
}

input[type=submit]:hover {
    transform: translateY(-10px);
    box-shadow: 0 3px 10px;
    font-weight: bold;
}

.radio {
    position: relative;
    margin-bottom: 15px;
}


/* footer */

footer.footer {
    margin-top: 5px;
    padding: 0 10px;
    text-align: center;
    color: rgba(255, 217, 0, 0.13) !important;
    box-shadow: 0 -1px 3px gold;
}

.footer-container {
    margin-top: 3px;
    padding: 3px 5px;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 35vh 35vh;
    gap: 10px;
}

.footer-logo {
    /* width: 100%; */
    height: 75%;
    border-radius: 50%;
}

.footer-col-logo {
    grid-column: 3/4;
    grid-row: 1 / 3;
}

.footer-icon {
    display: block;
    font-size: 35px;
    margin: 10px auto;
}

span.footer-span {
    color: rgba(255, 217, 0, 0.438) !important;
    font-size: 15px;
    line-height: .5;
}

.footer-col .h4 {
    font-size: 22px;
    color: gold;
    text-decoration: underline;
}

.footer-col {
    border: 1px rgba(255, 217, 0, 0.507) solid;
    border-radius: 20px;
    padding: 0;
}

.contact {
    margin-top: 3px;
    padding: 3px 5px;
    display: grid;
    grid-template-columns: 50% 50%;
    /* grid-template-rows: 35vh 35vh; */
    gap: 10px;
}

.contact i {
    font-size: 25px;
}