/* start global */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    --moz-box-sizing:border-box;
    --webkit-box-sizing:border-box;
}
body{
    /* font-family: 'Cairo', sans-serif;
    font-family: 'Open Sans', sans-serif; */
    font-family: 'Tajawal', sans-serif;
/* background-color: rgb(46, 45, 45); */
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}
:root{
    --primary-color:red;
    --padding-top:50px;
    --padding-bottom:50px;
    --primary-backgroundcolore: rgb(46, 45, 45);
    --primary-fontcolore:white;
}
/* end global */
/* start media screen  */
.continer{
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}
/* small screen  */
@media (min-width:768px){
    .continer{
        width: 760px;
    }
}
/* medium screen  */
@media (min-width:991px){
    .continer{
        width:980px;
    }
}
/* large screen  */
@media (min-width:1200px){
    .continer{
        width: 1200px;
    }
}
/* end media screen  */
/* start header  */
.header{
    box-shadow: 1px 1px 10px gainsboro;
    padding: 20px 0;
}
.header .continer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    position: relative;
}
.header .continer > a{
    color: white;
    background-color: var(--primary-color);
    padding: 7px 15px;
    font-weight: bold;
    transition: 0.3s;
    border: 1px solid var(--primary-color);
}
.header .continer > a:hover{
    color: red;
    background-color: white;
    box-shadow: 0px 0px 20px rgb(210, 210, 212);
}
.header img{
    width: 300px;
}
.header .links{
    display: flex;
    justify-content: center;
    align-items: center;
}
.header .links img{
    display: none;
}
.header .links .close{
    display: none;
}
.header ul{
    display: flex;
    direction: rtl;
    gap: 10px;
}
.header ul li a{
    padding: 35px 15px;
    color: black;
    font-weight: 600;
    font-size: 17px;
    position: relative;
    font-weight: bold;
    transition: 0.3s;
}
.header ul li a::before{
    position: absolute;
    content: '';
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: 0.5s;
}
.header ul li a:hover{
    /* border-bottom: 2px solid var(--primary-color); */
    color:var(--primary-color);
}
.header ul li a:hover::before{
    width: 100%;
}
.header i{
    font-weight: bold;
    font-size: 30px;
    cursor: pointer;
    transition: 0.3s;
    display: none;
}
.header i:hover{
    color: var(--primary-color);
}

@media (max-width:768px){
    .header ul{
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .header ul li a{
        border-right: 4px solid var(--primary-color);
        padding:15px 20px;
        width: 100%;
        line-height: 10px;
        display: block;
        outline: none;
        box-shadow: 1px 1px 5px ghostwhite;
        transition: 0.3s;
    }
    .header ul li a::before{
        height: 0;
    }
    .header img{
        width: 200px;
    }
    .header .links{
        position: absolute;
        top: -100vh;
        left: 0;
        width: 100%;
        background-color: white;
        height: 100vh;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 90px 20px;
        z-index: 1000;
        transition: 0.3s;
    }
    .header i{
        display: block;
    }
    .header .links .close{
        display: flex;
        justify-content: center;
        align-content: center;
        position: absolute;
        top: 10px;
        left: 20px;
        background-color: var(--primary-color);
        color: white;
        width: 40px;
        height: 40px;
        font-weight: 900;
        border-radius: 50%;
        font-size: 30px;
        cursor: pointer;
        transition: 0.3s;
    }
    .header .links .close:hover{
        border: 1px solid var(--primary-color);
        background-color: white;
        color: var(--primary-color);
    }
    .header .links img{
        position: absolute;
        display: block;
        top:20px;
        right: 20px;
        width: 200px;
    }
}
/* end header  */
/* start slider-photo */
.slider{
}
.slider-photo{
    height:calc(100vh - 100px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: relative;
    width: 100%;
    transition: 0.5s;
}
.slider-photo .cover{
    position: absolute;
    z-index: -1;
    opacity: 0.1;
    height: 600px;
    left: 0px;
}
.slider-photo .image{
    height: 350px;
    animation: float 3s linear infinite;
}
@keyframes float{
    0%,100%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(15px);
    }
}
.slider-photo .slider-info{
    text-align: right;
    flex-basis: 40%;
    padding: 0 20px;
}
.slider-photo .slider-info h4{
    margin-bottom: 20px;
    font-size: 32px;
    color: red;
}
.slider-photo .slider-info p{
    margin-bottom: 30px;
    color: #727171;
    font-size: 18px;
    direction: rtl;
    line-height: 1.5;
    /* font-weight: bold; */
}
.slider-photo .slider-info button{
    outline: none;
    border: 1px solid var(--primary-color);
    background: none;
    padding: 7px 40px;
    font-weight: bold;
    color: var(--primary-color);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 20px;
    overflow: hidden;
}
.slider-photo .slider-info button::before{
    position: absolute;
    content: "";
    width: 0%;
    height: 100%;
    background-color: var(--primary-color);
    top: 0;
    right: 0;
    z-index: -1;
    transition: 0.3s;
}
.slider-photo .slider-info button:hover:before{
    width: 100%;
    left: 0;
}
.slider-photo .slider-info button:hover{
    color: white;
}
.slider .swiper-pagination-bullets{
    bottom: 40px;
}
.slider .swiper-pagination-bullet {
    width: 20px;
    height: 8px;
}
@media (max-width:992px){
    .slider-photo{
        flex-direction: column;
    }
    .slider-photo .image{
        display: none;
    }
    .slider-photo{
        height: 60vh;
    }
    .slider-photo .slider-info{
        text-align: center;
    }
    .slider-photo .cover {
        height: 400px;
        left: 50%;
        transform: translateX(-50%);
    }
    .swiper-horizontal>.swiper-pagination-bullets{
        bottom: 30px;
    }
}
/* end slider-photo  */
/* start about 3m */
.why-3m {
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    background-color: rgba(248, 248, 255, 0.705);
}
.contact-us h3,
.nanociramic h3,
.prodection h3,
.window-film h3,
.who-us h3,
.vision h3,
.our-brand h3,
.our-service h3,
.why-3m h3{
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    background:none;
    font-size: 35px;
    padding: 15px 5px;
    color: rgb(66, 66, 66);
    position: relative;
    /* box-shadow: 1px 1px 30px gainsboro; */
}
.contact-us h3::after,
.nanociramic h3::after,
.prodection h3::after,
.window-film h3::after,
.who-us h3::after,
.vision h3::after,
.our-brand h3::after,
.our-service h3::after,
.why-3m h3::after{
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    width: 20%;
    height: 3px;
    background-color: var(--primary-color);
    transition: 0.5s;
    border-top-left-radius: 2px;
    border-bottom-left-radius:2px  ;
}
.contact-us h3:hover::after,
.nanociramic h3:hover::after,
.prodection h3:hover::after,
.window-film h3:hover::after,
.who-us h3:hover::after,
.vision h3:hover::after,
.our-brand h3:hover::after,
.our-service h3:hover::after,
.why-3m h3:hover::after{
    width: 100%;
}
.why-3m .about-3m{
    margin-top: 50px;
    display: flex;
    gap: 20px;
    direction: rtl;
} 
.why-3m .about-3m .img-3m{
    flex-basis:35%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.why-3m .about-3m img{
    height: 100px;    
} 
.why-3m .about-3m .info{
    flex-basis:calc(65% - 20px);
} 
.why-3m .about-3m .info p{
    line-height: 1.5;
    font-size: 23px;
    font-weight: 600;
    /* color: #656262; */
    margin-bottom: 15px;
} 
.why-3m .about-3m .info ul{
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* list-style:disc; */
    padding-right: 20px;
} 
.why-3m .about-3m .info ul li{
    font-size: 19px;
    color: #656262;
    position: relative;
    padding: 5px;
    line-height:1.7;
} 
.why-3m .about-3m .info ul li i{
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 18px;
    
}
@media (max-width:768px){
    .why-3m .about-3m{
        flex-direction: column;
        gap: 20px;
    }
    .why-3m .about-3m img{
        height: 60px;    
    }
    .why-3m .about-3m .info{
        padding: 10px;
    }
    .why-3m .about-3m .info p{
        text-align: center;
        margin-bottom: 20px;
    }
    .why-3m .about-3m .info ul{
        padding-right: 0;
    }
    .why-3m .about-3m .info ul li{
        text-align: center;
        padding-right: 40px;
        padding-bottom: 0px;
        line-height: 1.7;
    }
    .why-3m .about-3m{
        margin-top: 60px;
    }
    .why-3m .about-3m .info ul li i{
        right: 10px;
    }
    .nanociramic h3,
.prodection h3,
.window-film h3,
.who-us h3,
.vision h3,
.our-brand h3,
.our-service h3,
.why-3m h3{
    font-size: 25px;
}
}
/* end about 3m */
/* start about 3m */
.who-us {
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    background-color: #f8f8ffb4;
}
.who-us .about-us{
    margin-top: 50px;
    display: flex;
    gap:40px;
    direction: rtl;
} 
.who-us .about-us .img-us{
    flex-basis:35%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.who-us .about-us .img-us img{
    height: 180px;    
} 
.who-us .about-us .info{
    flex-basis:calc(65% - 40px);
} 
.who-us .about-us .info p{
    line-height: 1.5;
    font-size: 23px;
    font-weight: 600;
    /* color: #656262; */
    margin-bottom: 15px;
} 
.who-us .about-us .info ul{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 20px;
} 
.who-us .about-us .info ul li{
    font-size: 18px;
    color: #656262;
    position: relative;
    padding: 10px;
} 
.who-us .about-us .info ul li img{
    height: 25px;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}
.who-us .about-us .info ul li span{
    margin-right: 20px;
}

@media (max-width:768px){
    .who-us .about-us{
        flex-direction: column;
        gap: 20px;
    }
    .who-us .about-us img{
        height: 60px;    
    }
    .who-us .about-us .info{
        padding: 10px;
    }
    .who-us .about-us .info p{
        text-align: center;
        margin-bottom: 20px;
    }
    .who-us .about-us .info ul{
        padding-right: 0;
    }
    .who-us .about-us .info ul li{
        text-align: center;
        padding-right: 20px;
    }
    .who-us .about-us .info ul li img{
        height: 20px;
        right: 10px;
    }
    .who-us .about-us{
        margin-top: 60px;
    }
    .who-us .about-us .info ul li span{
        margin-right: 30px;
    }
    .who-us .about-us .img-us img{
        height: 150px;
    }
}
/* end about 3m */
/* sart our-service */
.our-service{
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    /* background-image: url("../images/SL-011719-17920-65.jpg"); */
    /* background-size: cover; */
    position: relative;

}
.our-service .background{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    opacity: 0.3;
}
.our-service .continer > P{
    padding: 25px 0;
    text-align: right;
    line-height: 1.5;
    color: #656262;
    font-size: 25px;
}
.our-service .service{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    margin-top: 30px;
    gap: 15px;
    overflow: hidden;
    padding: 15px;
         
}
.our-service .continer{
    position: relative;
}
.our-service .service .box-service{
    background-color: white;
    overflow: hidden;
    border: 1px solid rgb(228, 228, 231);
    transition: 0.3s;
    border-radius: 10px;
    /* flex-basis: calc(34% - 30px); */
}
.our-service .service .box-service:hover{
    box-shadow: 0px 0px 15px gainsboro;
    transform: translateY(-5px);
}
.our-service .service .box-service img{
    height: 220px;
    width: 100%;
    /* position: absolute;
    top: 0;
    right: 0; */
}
.our-service .service .box-service .info{
    text-align: center;
    padding: 15px;
    margin-top: 0px;
    /* position: absolute;
    bottom: 0;
    right: 0; */
}
.our-service .service .box-service .info h4{
    margin-bottom: 10px;
    font-weight: bold;
}
.our-service .service .box-service .info p{
    line-height: 1.5;
    color: #656262;
    font-size: 16px;
    direction: rtl;
    padding: 0 10px;
    margin-bottom: 0px;
}
.our-service .service .box-service .clicknav{
    background:none;
    border: 1px solid var(--primary-color);
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    color: red;
    outline: none;
    padding: 8px 25px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    position: relative;
    overflow: hidden;
    z-index: 0;
    width: fit-content;
    border-radius: 20px;
}
.our-service .service .box-service .clicknav::before{
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    z-index: -1;
    background-color: var(--primary-color);
    transition: 0.5s;
}
.our-service .service .box-service .clicknav:hover::before{
    width: 100%;
    left: 0;
}
.our-service .service .box-service .clicknav:hover{
    color:white;
}
.swiper-pagination-bullet{
    background-color: red;
    width: 15px;
    height: 4px;
    border-radius: 5px;
    outline: none;
}
@media (max-width:768px){
    .our-service .continer > P{
        text-align: center;
    }
    /* .our-service .service .box-service{
        flex-basis: calc(100% - 30px);
    } */
}
/* @media (max-width:992px){
    .our-service .service .box-service{
        flex-basis: calc(50% - 30px);
    }
} */
/* end our-service */
/* start our brand  */
.our-brand{
    position: relative;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    /* background-color: ghostwhite; */
}
.our-brand .brand{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 20px;
    padding-top: 100px;
    direction:rtl;
}
.our-brand .brand .box-brand{
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    border:1px solid gainsboro;
    transition: 0.3s;
}
.our-brand .brand .box-brand:hover{
    box-shadow: 0px 0px 15px gainsboro;
    transform: translateY(-5px);
    cursor: pointer;
}
.our-brand .brand .box-brand img{
    height: 250px;
    width: 100%;

}
.our-brand .brand .box-brand .info{
    padding: 20px;
    direction: rtl;
}
.our-brand .brand .box-brand p{
    padding: 5px 0;
    color: #656262;
    line-height: 1.5;
}
.our-brand .brand .box-brand p:nth-child(2),
.our-brand .brand .box-brand p:nth-child(2) i{
    font-size: 13px;
}
.our-brand .brand .box-brand p i{
    font-weight: 900;
    font-size: 14px;
    color: var(--primary-color);
    margin-left: 10px;
}
.our-brand .brand .box-brand a{
    outline: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: white;
    padding: 7px 15px;
    cursor: pointer; 
    transition: 0.3s;
    margin-top: 10px;
    display: block;
    width: fit-content;
    border-radius: 20px;
    font-size: 14px;
}
.our-brand .brand .box-brand a:hover{
    color: white;
    background-color: var(--primary-color);

}
/* end our brand  */
/* star book  */
.book{
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    direction: rtl;
}
.book h3{
    background:none;
    font-size: 30px;
    padding: 7px 15px;
    border-radius: 10px;
    color: rgb(66, 66, 66);
    margin-bottom: 20px;
    color: var(--primary-color);
}
.book .form{
    background-color: ghostwhite;
    padding: 50px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-radius: 10px;
    /* box-shadow: rgba(220, 220, 220, 0.596) 0px 0px 30px;
    border: 1px solid ghostwhite; */
}
.book .form input,
.book .form select,
.book .form textarea{
    padding: 5px 10px;
    outline: none;
    border-radius: 10px;
    border: 1px solid gainsboro;
}
.book .form input:focus,
.book .form select:focus,
.book .form textarea:focus{
    border: 1px solid var(--primary-color);
}
.book .form input,
.book .form select{
    flex-basis: calc(50% - 10px);
    height: 40px;
}
.book .form textarea{
    flex-basis: 100%;
}
.book .form button{
    background-color: var(--primary-color);
    outline: none;
    border: 1px solid var(--primary-color);
    color: white;
    padding: 7px 15px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}
.book .form button:hover{
    background-color: white;
    color: var(--primary-color);
}
.book span{
    color: var(--primary-color);
    display: none;
    font-size: 22px;
    line-height: 1.5;
    text-align: center;
}
.book span a{
    font-size: 16px;
    text-decoration-line: revert;
}
@media (max-width:768px){
    .book .form input,
    .book .form select{
        flex-basis: 100%;
}
}
/* end book  */
/* start vision */
.vision{
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    position: relative;
    overflow: hidden;
    /* background-image: url("../images/pngegg.png");
    background-size: cover */
}
.cover-im{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    opacity: 0.1;
    z-index: -1;
}
.our-vision{
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.vision .our-vision p{
    flex-basis: 50%;
    direction: rtl;
    text-align: center;
    /* color: #656262; */
    line-height: 1.5;
    font-size: 30px;
    font-weight: 500;
}
.vision .our-vision .img-vision{
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.vision .our-vision .img-vision img{
    height: 300px;
}
.vision .img-cover{
    position: absolute;
    bottom: 0px;
    left: 0;
    opacity: 0.1;
    height: 150%;
    z-index: -1;
    /* box-shadow: 1px 1px 10px gainsboro; */
}
@media (max-width:768px){
    .our-vision{
        flex-direction: column-reverse;
        gap: 40px;
    }   
    .vision .our-vision .img-vision img{
        height: 200px;
    } 
}
/* end vision  */
/* start window-film  */
.prodection,
.window-film {
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
}
.prodection h3,
.window-film h3{
    margin-bottom: 50px;
}
.prodection p,
.window-film p{
    margin-bottom: 0px;
    font-size: 20px;
    color: #838181;
    line-height: 2;
    padding: 0px 20px;
}
.prodection .cover,
.window-film .cover{
    width: 80%;
    margin-bottom: 80px;
    margin-top: 70px;
    height: 320px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.prodection .type-prodection,
.window-film .type-film,
.window-film .film{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-transform: capitalize;
    direction: rtl;
    background-color: gainsboro;
    padding: 0px 30px;
    margin-bottom: 10px;
    border-radius: 100px;
}
.window-film .film{
    margin-bottom: 20px;
}
.prodection .type-prodection li,
.window-film .type-film li,
.window-film .film li{
    padding: 20px 20px;
    height: 100%;
    cursor: pointer;
    transition: 0.3s;
    width: fit-content;
    text-align: center;
}
.prodection .type-prodection li:hover,
.window-film .type-film li:hover,
.window-film .film li:hover{
    color: var(--primary-color);
}
.prodection .type-prodection .active,
.window-film .type-film .active,
.window-film .film .active{
    color: var(--primary-color);
}
.prodection .info,
.window-film .info{
    padding: 20px 20px;
    text-transform: capitalize;
}
.prodection .info ul,
.window-film .info .ulSpecifications{
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #838181;
    margin-bottom: 30px;
    padding: 0px 20px;
}
.prodection .info h4,
.window-film .info h4{
    margin-bottom: 20px;
}
.window-film .show-cars{
    text-transform: capitalize;
}
.window-film .show-cars h4{
    margin-bottom: 50px;
    margin-top: 50px;
    font-size: 20px;
}
.prodection .show-prodection{
    display: flex;
    flex-direction: row-reverse;
    gap: 50px;
    margin-top: 50px;
}
.prodection .show-prodection .box:first-child{
    flex-basis: 25%;   
    direction: rtl;
}
.prodection .show-prodection .box:first-child h4{
    margin-bottom: 30px;
    text-align: center;
    color: var(--primary-color);
    font-size: 25px;
}
.prodection .show-prodection .box:first-child ul{
    background-color: gainsboro;
    border-radius: 10px;
    overflow: hidden;
}
.prodection .show-prodection .box:first-child ul li{
    border-bottom: 1px solid ghostwhite ;
    padding: 12px 15px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}
.prodection .show-prodection .box:first-child ul li:hover{
    background-color: var(--primary-color);
    color: white;
}
.prodection .show-prodection .box:first-child ul .active{
    background-color: rgb(219, 112, 112);
    color: white;
}
.prodection .show-prodection .box:last-child{
    position: relative;
}
.prodection .show-prodection .box:last-child .plasceCoverProtection{
    position: absolute;
    top: 0;
    right: 0;
}
@media (max-width:768px){
    .window-film .show-cars img{ 
        width: 100%;
    }
    .prodection .show-prodection{
        flex-direction: column;
    }
    .prodection .show-prodection .box img{
        width: 100%;
    }
    .prodection .show-prodection .box:last-child .plasceCoverProtection{
        left: 0;
    }
    .prodection .show-prodection .box:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .prodection .show-prodection .box:first-child ul{
        width: 90%;
    }    
    .window-film .type-film,
    .window-film .film{
        border-radius: 10px;
    }
    .window-film .type-film li{
        flex-basis: 25%;
        font-weight: bold;
        width: 100%;
        padding:20px 0;
    }
    .window-film .type-film{
        padding: 0;
    }
    .window-film .film li{
        width: 100%;
        flex-basis: 50%;
    }
    .window-film .cover{
        height: 200px;
        width: 100%;
    }
}
/* start nanociramic  */
.nanociramic {
    padding-top: var(--padding-top);
    padding-bottom:var(--padding-bottom);
}
.nanociramic h3{
    margin-bottom: 70px;
}
.nanociramic img{
    height: 500px;
    width: 90%;
    display: block;
    margin: 70px auto;
}
.nanociramic p{
    color: #838181;
    margin-bottom: 15px;
    padding: 0 10px;
    line-height:2;
    text-align: right;
    direction: rtl;
    /* font-size: 20px;   */
}
.nanociramic .continer > p{
    font-size: 20px;
}
.nanociramic .info-nano h4{
    color: #3d3d3ddb;
    margin-bottom: 10px;
    font-size: 20px;   
}
.nanociramic .info-nano h5{
    margin-bottom: 10px;
    color: #3d3d3ddb;
}
.nanociramic .info-nano ul{
    margin-bottom: 15px;
    color: #838181;
}
.nanociramic .info-nano ul li{
    padding:10px 10px;
    font-size: 16px;
}
@media (max-width:768px){
    .nanociramic img{
        height: 250px;
    }
}
/* end nanociramic */
/* end window-film  */

/* start book-appointment */
.book-appointment{
       display: block;
       font-size: 20px;
       margin: 50px 0 0 auto;
       color: white;
       background-color: red;
       width: fit-content;
       padding: 10px 40px;
       border-radius: 40px;
       transition: 0.3s;
       border: 1px solid var(--primary-color);
}
.book-appointment:hover{
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}
/* end book-appointment */

/* start contact-us */
.contact-us{
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
}

.contact-us .continer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: var(--padding-top);
    direction: rtl;
}
.contact-us .form{
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    align-items: center;
    /* border: 1px solid gainsboro; */
    padding: 40px;
    gap: 15px;
    box-shadow: gainsboro 1px 1px 30px;
    border-radius: 10px;

}
.contact-us .form input{
    height: 40px;
}
.contact-us .form input,
.contact-us .form textarea{
    width: 100%;
    direction: rtl;
    padding: 20px;
    outline: none;
    border: 1px solid #dcdcdc3b;;
    background-color: #dcdcdc3b;
    border-radius: 10px;
}
.contact-us .form a{
    display: block;
    background-color: var(--primary-color);
    color: white;
    padding: 7px 40px;
    font-weight: bold;
    border-radius: 100px;
    transition: 0.3s;
    border: 1px solid var(--primary-color);
}
.contact-us .form a:hover{
    background-color: white;
    color: var(--primary-color);
}
.contact-us .souil-media{
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    direction: rtl;
    align-items: center;
}
.contact-us .souil-media ul{
    display: flex;
    flex-direction: column;
    gap: 35px;
    width: 100%;
    align-items: center;
}
.contact-us .souil-media ul li{
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #838181;
}
.contact-us .souil-media ul li i{
    margin-left: 10px;
    color: red;
    font-size: 25px;
    font-weight: bold;
}
.contact-us .souil-media .icons{
    padding-top: 50px;
    font-size: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.contact-us .souil-media .icons div{
    display: flex;
    gap: 25px;
}
.contact-us .souil-media .icons i{
    cursor: pointer;
    font-size: 25px;
    color: var(--primary-color)
}
.contact-us p{
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
    line-height: 1.5;
    display: none;
}
@media (max-width:768px){
    .contact-us .continer {
        flex-direction: column;
        gap: 80px;
    }
    .contact-us .form{
        width: 90%;
    }

}
/* end contact-us */
/* start footer  */
.footer{
    background-color: #272626;
    padding: 30px 0 0 0;
}
.footer .continer{
    display: flex;
    gap: 20px;
    /* background-color: #656262; */
}
.footer .continer div{
    padding: 20px;
    flex-basis:calc(33.33% - 20px);
    direction: rtl;
}
.footer .continer div h3{
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
}
.footer .call-us ul li{
    padding: 5px;
}
.footer .call-us ul li i{
    width: 30px;
    padding: 5px;
    font-weight: bold;
    /* background-color: red; */
    text-align: center;
    margin-left: 5px;
    border-radius: 0px;
    color: white;
    font-size: 14px;    
}
.footer .call-us ul li span,
.footer .call-us ul li p{
    color: #838181;
    font-size: 14px;
}
.footer .service ul li{
    padding: 10px;
    color:#838181;
    cursor: pointer;
    border-bottom: 1px solid #3d3d3d;
    font-size: 14px;
    transition: 0.8s;
    position: relative;
    z-index: 10;
    /* background-color: red; */
}
.footer .service ul li::before{
    content: "";
    position: absolute;
    width:0;
    height: 100%;
    background-color: #838181;
    top: 0;
    right: 0;
    opacity: 0.1;
    transition: 0.8s;
}
.footer .service ul li:hover{
    color: white;
    border-bottom: 1px solid var(--primary-color);
    /* border-bottom: 1px solid var(--primary-color); */
}
.footer .service ul li:hover::before{
    color: white;
    width: 100%;
}
.footer .us p{
    color: #838181;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 10px 10px 0 0;
    font-size: 14px;
}
.footer .us .icons i{
    background-color: #838181;
    width: 30px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    margin-right: 5px;
}
.footer .us .icons a{
    color: #272626;
}
.footer .us .icons i:hover{
    color: white;
    background-color: var(--primary-color);    
}
.footer .reserved{
    text-align: center;
    display: block;
    margin: 0 auto;
    color: #838181;
    font-weight: bold;
    font-size: 14px;
    border-top: 1px solid #3d3d3d;
    margin-top: 20px;
    padding: 20px;
}
@media (max-width:768px){
    .footer .continer{
        flex-direction: column;
    }    
}
/* end footer  */

/* top to scroll  */
.top-to-scroll{
    position:fixed;
    z-index: 1000;
    font-size: 50px;
    bottom: 40px;
    right: 40px;
    color:var(--primary-color);; 
    cursor: pointer;
    outline: none;
}
.contact-whatsapp{
    position: fixed;
    z-index: 1000;
    font-size: 40px;
    bottom: 40px;
    left: 40px;
    color: white;
    padding: 12px 14px;
    cursor: pointer;
    background-color: green;
    border-radius: 50%;
    transition: 0.5s;
}
.contact-whatsapp:hover{
    color: green;
    background:none;
}