* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(8, 8, 8);
    color: var(--white);
    transition: .4s;
    position: relative;
}
body.li {
    background-color: rgb(243, 241, 241) ;
    color: var(--black-da);
}
.show {
    display: flex;
    position: fixed;
    z-index: 10000;
    top: 10px;
    left: 10px;
    justify-content: start;
    align-items: center;
    text-align: center;
    background-color: #4a91e273;
    border-radius: 20px;
    transition: .6s;
}
.show i {
    color:var(--white);
    display: block;
    padding: 10px;
}
.show::after {
    content: '';
    width: 43%;
    height: 86%;
    right:  3px;
    transform: translateX(0);
    background-color: #c380046c;
    top: 2px;
    position: absolute;
    border-radius: 50%;
    transition: .6s;
}
.show.showmove::after {
    transform: translateX(-113%);
}
:root {
    --blue-li : #2299FF;
    --blue-lito: #33CCFF;
    --black-da : black;
    --black-li : #202020 ;
    --main-padding: 100px;
    --black-li-b: #1a1a2e;
    --green-dr:rgb(2, 31, 16);
    --blue-da: #4a90e2; 
    --green-dr-too: rgb(1, 20, 16);
    --green-li: rgb(1, 102, 77);
    --box-shadow: 1px 0px 7px 1px #4a90e2;
    --box-shadow2: 1px 0px 7px 1px green;
    --box-shadow3: 1px 0px 7px 1px #808080;
    --color-gold : #c38104;
    --back-ground : #04040e;
    --white : white ;
}
.container{
    margin-left: auto;
    margin-right: auto;
}
@media (min-width:768px) {
    .container {
        width: 750px;
    }
    .head .links ul {
        width: 92% !important;
    }
    .head .links ul li a {
        margin-right: 30px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px; 
    }
    .head .links ul {
        width: 71% !important;
    }

}
@media (min-width: 1200px) {
    .container {
        width: 1100px;
    }
}

.head {
    padding-bottom: var(--main-padding);
    padding-top: 50px;
    background-color: var(--back-ground);
}
.head .entire {
    background-color: var(--black-da);
    color: var(--white);
    height: 100px;
    margin-bottom: -50px;
}
.head .entire p {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    padding-top: 15px;
}
.head .container {
    display: flex;
    height: 100px;
    align-items: center;
    background-color: #1a1a2e9d;
    border-radius: 15px;
    margin-bottom: var(--main-padding);
}
/* links */
.head .links {
    width: 70%;
    display: flex;
    justify-content: end;
    height: 200px;
    margin-top: 175px;
    position: relative;
}
.head .links i {
    display: none;
    color: var(--color-gold) !important;
    cursor: pointer;
    padding-left:50px ;
    height: 25px;
}
.head .links ul.app {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.472);
    border-radius: 5px;
}
.head .links ul.app li {
    display: block !important;
    position: absolute;
    top: 65px;
    right: 5px;
    color: var(--black-da) !important;
    
}
.head .links ul.app li.a {
    left: 40%; 
    top: 105px;
}
.head .links ul.app li.b {
    top: 160px; 
    left: 0;
}
.head .links ul.app li.c {
    left: 0;
}
.head .links ul.app li.d {
    top: 160px;
}

/* links */
.head .call-us {
    width: 30%;
}
.head .links ul {
    display: flex;
    width: 75%;
    text-align: center;
    list-style: none;

}
.head .links ul li a{
    text-decoration: none;
    color:var(--blue-da) ;
    display: block;
    font-size: 20px;
    transition: .3s;
}
.head .links ul li a:hover {
    color: var(--white);
}
.head .call-us a {
    font-size: 35px;
    text-decoration: none;
    display: block;
    color: var(--black-da);
    width: 100%;
}
.head .call-us a span {
    font-size: 20px ;
}
.head .call-us {
    margin-left: 20px;
    background-color: var(--blue-lito);
    text-align: center;
    border-radius: 15px;
    transition: .3s;
}
.head .call-us:hover {
    box-shadow: var(--box-shadow);
}
.head .text {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    text-align: center;
    padding-top: var(--main-padding);
}
.head .text h1 {
    margin-bottom: 20px;
    color: var(--white);
    font-size: 45px;
}
.head .entire {
    text-align: center;
}
.head .text h2 {
    margin-bottom: 30px;
    color: var(--color-gold);
    font-size: 45px;
}
.head .phone {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: green;
    position: fixed;
    z-index: 1000;
    bottom: 20px;
    left: 20px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:  .5s;
}
.head .phone a {
    display: block;
    font-size: 30px;
    transition: .5s;
    text-decoration: none;
}
.head .phone:hover a {
    transform: rotate(360deg);
}
.head .phone:hover {
    width: 60px;
    height: 60px;
    box-shadow: var(--box-shadow);
}
/* end heading */
/* img */
.types .container {
    display: flex;
    padding-bottom: var(--main-padding);
    justify-content: space-between;
    padding-top: var(--main-padding);
    text-align: end;
}
.types .text {
    margin-top: 50px;
    width: 40% ;
    height: 100%;
}
.types .img {
    overflow: hidden;
    width: 50% ;
    height: 800px !important;
    text-align: center !important;
}
.types .img img {
    width: 100%;
    height: 100%;
}
.types .img .two {
    height: 35%;
    margin-top: -400px;
    width: 80%;
    border: 20px solid var(--color-gold);
    border-bottom:none !important;
}
.types .text .flex {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}
.types .text .flex .fl {
    display: flex;
    justify-content: end;
}
.types .text .one {
    width: 45%;
    padding-top: 20px ;
}
.types .text .one.ta {
    width: 55% !important;
}
.types .text .one p{
    padding-bottom:10px ;
    font-weight: bold;
    font-size: 15px;
    padding-right: 5px;
}
/* end img */
.information .container{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-evenly;
    padding:var(--main-padding) 0 ;
}
.information .bg {
    width: 15%;
}
.information .sm {
    width: 10%;
}
.information .one h2 {
    font-weight: bold;
    font-size: 40px;
    padding: 10px 0;
    position: relative;
}
.information .one h2::after {
    content: '+';
    position: absolute;
    left: 0;
    font-size: 20px;
    color : var(--color-gold)
}
/* grid */
.grid {
    text-align: center;
    color: var(--black-da);
}
.grid .text {
    background-color: var(--back-ground);
    text-align: center;
    padding: var(--main-padding) ;
}
.grid .column {
    display: grid;
    grid-template-columns: repeat(auto-fit , minmax(300px,1fr));
    gap: 10px;
}
.grid .first img {
    height: 300px !important;
}
.grid .second img {
    height:400px !important;
    margin-top: -9px;
}
.grid .thrithd img {
    height: 200px !important;
}
.grid .co {
    position: relative;
    padding: 20px;
    border-radius: 5px;
    background-color: var(--white) !important;
}
.grid .co .img {
    overflow: hidden;
}
.grid .co img {
    border-radius: 5px;
    height: 300px;
    width: 100%;
    transition: .3s ease;
}
.grid .co img:hover {
    transform: rotate(3deg) scale(1.1);
}
.grid .co h2 {
    padding: 20px 0;
    color:var(--color-gold);
}
.grid .bottun {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50% , 0);
}
.grid .co p {
    color: var(--black-da);
    font-weight: bold;
    font-size: 15px;
    padding: 15px 10px;
    line-height: 1.2;
}
.grid .co a {
    text-decoration: none;
    line-height: 1.3;
    color: black;

    transition: .7s;
}
.the-change {
    display: flex;
    justify-content: space-evenly;
}
.the-change .one {
    width: 40%;
    background-color: var(--white);
    margin: var(--main-padding) 0;
    border-radius: 5px;
    padding: 20px;
    position: relative;
}
.grid .the-change .one a{
    text-decoration: none;
    line-height: 1.7;
    color: black;
    transition: .4s;
}
.grid .co a:hover,
.grid .the-change a:hover {
    color: var(--color-gold) ;
}
.the-change .one h2 {
    color: var(--color-gold);
}
.the-change .one p {
    color: var(--black-da);
    font-weight: bold;
    font-size: 15px;
    padding: 15px 10px;
    line-height: 1.6;
}
.the-change .one .blue {
    color: var(--blue-da) !important;
}
/* end grid */
.my-thinking {
    display: flex;
    justify-content: space-between;
    padding: var(--main-padding) 0;
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
}
.my-thinking .big {
    width: 60%
}
.my-thinking  p {
    padding: 10px 15px 5px 5px;
    font-weight: bold;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
}
.my-thinking .small p {
    padding-bottom: 60px;
}
.my-thinking .big a {
    text-decoration: none;
    color: var(--blue-li);
    transition: .4s;
    display: block;
}
.my-thinking .big a:hover {
    color: var(--green-dr);
}
.my-thinking .big img {
    width: 100%;
    border-radius: 5px;
}
.my-thinking  .small {
    order: -1;
    width: 35%;
}
.my-thinking .small img {
    width: 100%;
    height: 350px;
    border-radius: 5px;
}
.my-thinking  h2 {
    padding: 30px 0;
    color: var(--color-gold);
}
/* the finaly img */
.entire h2 {
    text-align: center;
    padding-bottom: 20px;
}
.entire .container {
    display: grid;
    grid-template-columns: repeat(auto-fit , minmax(300px,1fr));
}
.entire .container img {
    width: 100%;
    
} 
.entire .container .st {
    position: relative;
    overflow: hidden;
}
.entire .container .st::before {
    content: 'خزائن مبتكرة';
    font-size: 25px;
    background-color: transparent !important;
    color: transparent;
    z-index: 3;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: .5s;
}
.entire .container .st:hover::before {
    background-color: rgba(0, 0, 0, 0.857) !important;
    color: var(--white) !important;
}
.entire .container .sl {
    position: relative;
    overflow: hidden;
}
.entire .container .sl::before {
    content: 'غرف نوم';
    font-size: 25px;
    background-color: transparent !important;
    color: transparent;
    z-index: 3;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: .5s;
}
.entire .container .sl:hover::before {
    background-color: rgba(0, 0, 0, 0.857) !important;
    color:var(--white) !important;
}
.entire .container .k {
    position: relative;
    overflow: hidden;
}
.entire .container .k::before {
    content: 'مطابخ';
    font-size: 25px;
    background-color: transparent !important;
    color: transparent;
    z-index: 3;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: .5s;
}
.entire .container .k:hover::before {
    background-color: rgba(0, 0, 0, 0.857) !important;
    color: var(--white) !important;
}
.entire .container .d{
    position: relative;
    overflow: hidden;
}
.entire .container .d::before {
    content: 'ابواب خشبية';
    font-size: 25px;
    background-color: transparent !important;
    color: transparent;
    z-index: 3;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: .5s;
}
.entire .container .d:hover::before {
    background-color: rgba(0, 0, 0, 0.857) !important;
    color: var(--white) !important;
}
.entire .container .i {
    position: relative;
    overflow: hidden;
}
.entire .container .i::before {
    content: 'ديكورات خشبية';
    font-size: 25px;
    background-color: transparent !important;
    color: transparent;
    z-index: 3;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: .5s;
}
.entire .container .i:hover::before {
    background-color: rgba(0, 0, 0, 0.857) !important;
    color: var(--white) !important;
}
.video {
    margin-top: var(--main-padding);
    text-align: center;
    display: flex;
    justify-content: center;
}
.video video {
    width: 100%;
    position: relative;
    z-index: 100px;
}
.video h2 {
    padding-bottom: 30px;
}
/* footer  */
.footer .li {
    background-color: var(--back-ground);
    text-align: center;
    margin-top: var(--main-padding);
    padding-bottom: var(--main-padding);
    padding-top: var(--main-padding);
}
.footer h2 {
    color: var(--color-gold);
    padding:20px 0 ;
}
.footer a {
    display: block;
    text-decoration: none;
    line-height: 1.4;
    color:var(--blue-da);
}
.footer .links {
    display: flex;
    justify-content: space-between;
}
.footer .one {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.end {
    text-align: center;
    background-color: var(--back-ground);
    padding: 20px;
}
.footer h2 , footer h3 {
    color: var(--white) !important;
}
/* end footer */
/* in the contact */
.header-co .head {
    background-color: transparent !important;
}
.contact {
    margin-top: var(--main-padding);
    margin-bottom: var(--main-padding);
}
.contact .container {
    display: flex;
    justify-content: space-between;
    color: var(--white);
}
.contact .myInformation {
    width: 50%;
    height: 150px;
    background:linear-gradient(45deg,#2299FF , rgb(23, 23, 156)) ;
    border-radius: 4px;
    padding: 20px;
}
.contact .myInformation a {
    text-decoration: none;
    color: var(--white);
}
.contact .myInformation .num-phone {
    font-size: 20px;
    padding: 20px;
    text-align: center;
}
.contact .myInformation h2 {
    font-size: 30px;
    padding: 20px;
}
.contact .myInformation .site {
    font-size: 15px;
    padding: 20px;
    text-align: center;
}
.contact .yourInformation {
    width: 50%;
    text-align: center;
}
.contact .yourInformation input[type=text],
.contact .yourInformation input[type=tel] ,
.contact textarea{
    width: 70%;
    text-align: center;
    height: 50px;
    padding: 5px;
    margin-bottom: 30px;
}
.contact button[type=submit] {
    width: 50%;
    height: 50px;
    background: linear-gradient(45deg , #2299FF , rgb(23, 23, 156));
    color: var(--white);
    font-size: 15px;
    border-radius: 3px;
    outline: none;
    padding: 5px;
    border: none;
    overflow: hidden;
}
.contact button[type=submit] i {
    visibility: hidden;
    transition: .6s ease;
    transform: translate(0);
}
.contact button[type=submit]:hover i {
    visibility: visible;
    transform: translate(110px ,-30px);
}
/*end in the contact */
/* section colors */
.our_colors h2 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.our_colors .container .color{
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    margin-bottom: var(--main-padding);
    background-color: var(--black-da) !important;
    padding: 30px 20px;
}
.our_colors .some_colors {
    width: calc(  95% / 7);
    height: 50px;
}
.our_colors .example {
    text-align: center;
}
.our_colors p {
    padding: 50px;
    padding-bottom: 0 !important;
    font-size: 20px;
    direction: rtl;
}
.our_colors .example img {
    width:90%;
    margin-left: auto;
    margin-right: auto;
    height: 600px;
    margin-top:50px ;
}
/* in the phone */
@media (max-width:767px) {
    .head .links ul li{
        display: none;
    }
    .head .links i {
        display: block !important;
        font-size: 25px;
    }
    .head .text {
        width: 300px !important;
    }
    .the-change {
        flex-direction: column;
    }
    .the-change .one {
        width: 100% !important;
    }
    .information .container {
        display: block;
        text-align: center !important;
    }
    .information .one {
        width: fit-content!important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 5px;
    }
    .information .one h2::after {
        left: -20px;
    }
    .information .one p {
        padding-bottom: 30px;
    }
    .information .one h1 {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px !important;
    }
    .footer .links {
        flex-direction: column;
    }
    .contact .container {
        flex-direction: column;
        justify-content: center !important;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }
    .contact .myInformation {
        order: -1;
        margin-bottom: 50px ;
        width: 100%;
        text-align: center;
    }
    .contact .yourInformation {
        width: 100%;
    }
}
@media (max-width: 991px) {
    .types .container {
        flex-direction: column;
        height: auto !important;
        text-align: center;
    }
    .types .container div ,
    .types .container figure {
        width: 100%;
    }
    .my-thinking {
        flex-direction: column;
    }
    .my-thinking .big {
        width: 100% !important;
        order: -1;
    }
    .my-thinking .small {
        flex-direction: column;
        width: 100% !important;
    }
}
@media (max-width: 990px) {
    .entire .container {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 500px) {
    .head .links ul.app li.a {
        left: 60% !important;
        top: 20px !important;
    }
    .head .links ul.app li.b {
        top: 45px !important; 
        left: 60% !important;
    }
    .head .links ul.app li.c {
        left: 60% !important;
        top: 120px !important ;
    }
    .head .links ul.app li.d {
        top: 165px !important;
        left: 60% !important;
    }
    .head .links ul.app li.e {
        top: 85px;
        left: 60%;
    }
    .head .links ul {
        width: 50% !important;
    }
    .head .links {
        width: 85% !important;
    }
    .types .text .flex {
        flex-direction: column;
        justify-content: end !important;
    }
    .types .text .flex .one {
        width: 100% !important;
        padding-right: 20px;
        padding-top: 0;
    }
    .our_colors .container .color{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding-top: 30px;
    }
    .our_colors .some_colors {
        width: 90%;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
    }
    .head .call-us a {
        font-size: 25px;
    }
}
/* who we */
.who {
    text-align: center;
    padding: 80px 20px;
    line-height: 1.6;
    direction: rtl;
}
/* end in the phone  */
/* global */
.text a {
    text-decoration: none;
    line-height: 1.7;
    color: var(--blue-lito);
}
.bottun a{
    width: fit-content;
    display: block;
    background-color: var(--blue-lito);
    padding: 15px 45px;
    border-radius: 10px;
    color: black !important;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    transition: .5s;
    text-decoration: none;
} 
.no-po {
    height: 50px;
    margin-bottom: 20px;
}
.bottun a:hover {
    background-color: var(--green-li) !important;
}
.text .up {
    font-size: 30px;
    color: var(--color-gold);
    padding-bottom: 30px;
    text-align: center;
}
.text .center {
    padding:30px 10px ;
    font-size: 25px;
    color: var(--blue-da);
}
#up {
    border: none;
    padding: 20px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    background-color: brown;
    display: none;
    cursor: pointer;
    z-index: 100;
}
textarea {
    resize: none;
}
.felo {
    text-decoration: none ;
    color: var(--color-gold) ;
    font-size: 20px;
    display: inline-block !important;
    animation: ch-color .5s ease-in-out alternate  infinite;
    background-color: rgb(23, 23, 156);
    padding: 4px 7px;
    border-radius: 3px;
} 
@keyframes ch-color{
    0% {
        color: #f5a418 ;
    }
    25% {
        color: #d49622;
    }
    50% {
        color: #c08008;
    }
    75% {
        color: #9c6601;
    }
    100% {
        color: #815502;
    }
}
/* end global */