@font-face {
  font-family: 'cairo';
  src: url(../fonts/ar/cairo/Cairo-VariableFont_slnt,wght.ttf) format('woff2');
}

 @font-face {
  font-family: 'EnFell';
  src: url(../fonts/en/EnFell/IMFellEnglishSC-Regular.ttf) format('woff2');
}

@font-face {
  font-family: 'Kalnia';
  src: url(../fonts/en/Kalnia_soft/Kalnia-VariableFont_wdth,wght.ttf) format('woff2');
}



@font-face {
  font-family: 'Ysabeau';
  src: url(../fonts/en/Ysabeau_SC_header_capitalized/YsabeauSC-VariableFont_wght.ttf) format('woff2');
}

  @font-face {
  font-family: 'Tajawal';
  src: url(../fonts/ar/Tajawal/Tajawal-Regular.ttf) format('woff2');
}


html{
   scroll-behavior: smooth;
}
   body{
       
       font-family: Ysabeau;
       margin: 0px;
       text-align: center;
        
     /*
     background: radial-gradient(1.5em 6.28571em at 1.95em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(1.5em 6.28571em at -0.45em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 1.5em 5.5em, radial-gradient(2.3em 4.57143em at 2.99em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(2.3em 4.57143em at -0.69em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0) 55%) 2.3em 4em, radial-gradient(3.5em 6.28571em at 4.55em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(3.5em 6.28571em at -1.05em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 3.5em 5.5em, radial-gradient(#15ffa5, #00ced1);
  background-color: mediumspringgreen;
  background-size: 1.5em 11em, 1.5em 11em, 2.3em 8em, 2.3em 8em, 3.5em 11em, 3.5em 11em, 100% 100%;
  background-repeat: repeat;  
  */
  
            }


#content{
     
}
#brand{
    width: 175px;
  margin: 10px;
  border-radius: 30px;
}

#languages{
display: flex;
  background: #fff;
  height: 20px;
  width: 260px;
  border-radius: 30px;
  position: fixed;
  bottom: 20px;
  left: 30px;
  padding: 6px;
}

.lang_icon{
    margin-left:20px;
    cursor:pointer;
    display: flex;
}

#languages img{
    width:20px;
    margin: 3px;
}

#copyright{
    text-align:center !important;
    font-family: arial;
}
.page_img{
    width: 100%;
  border-radius: 30px;
}

#page_list{
    top: 60px;
  position: relative;
  text-align: center;
  display: block ruby;
}
#header{
    background: #fff;
  height: 70px;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
    text-align: center;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.14);
z-index: 2;

}

#about{
    margin-top: 150px;
}
#about video{
    width: 100%;
    border-radius: 30px;
}

.video{
    width: 100%;
    border-radius: 30px;
     filter: drop-shadow(0px 5px 3px rgba(0,0,0,0.5));
  border: solid #fff 4px;
}

.Services_photos{
    width: 90%;
  border-radius: 30px;
  margin: 5%;
  filter: drop-shadow(0px 5px 3px rgba(0,0,0,0.5));
  border: solid #fff 4px;
}

.social_icon{
    width: 50px;
    margin:10px;
    transition:all 0.5s;
    
}

.social_icon:hover{
    width: 55px;
}

#contact p {
text-align: justify;
  padding: 15px;    
}

#Contacts_list  {
 display: block;
  text-align: left;
  direction:ltr;
}

#logo{
width: 100px;
  margin: 10px;
}


:root {
  --bg: "../../../assets/static/bg/moroccan-flower.png";
}

/*
get

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var deg= rootStyles.getPropertyValue('--deg');
console.log(deg); 
--> 10deg

set

root.style.setProperty('--deg', '20deg');
*/

#bg{
    position: fixed;
  display: block;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width:100%;
  /*    
      background: url("../../assets/patterns/moroccan-flower.png"),radial-gradient(rgb(255, 255, 255),rgba(255, 255, 255,0.5),rgba(245, 245, 245,0.5),rgba(0,0,0,0.2));
    background-repeat: repeat, repeat;
  background-blend-mode: multiply;
  */
      background-image: url("../../../assets/static/bg/moroccan-flower.png");
  background-repeat:repeat;
  

}
        .photo {
            width: 90%;
  margin: 10px;
  border-radius: 20px 20px 10px 10px;
    position: relative;
    display: inline-block;
    transition: all 1s;
    box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.2), 0 10px 50px 30px rgba(0, 0, 0, 0.2)

}

.rtl{
    text-align: right !important;
  direction: rtl !important;
}

.ltr{
    /* text-align: left !important; */
  direction: ltr !important;
}

#services ul{
    
    display: block;
  text-align: left;
}

li{
    margin:8px;
}

.page{
    
    background: rgba(230, 230,230,0.02 );
  backdrop-filter: blur(5px);
  filter: brightness(1.03);
  
    width:80%;
    border-radius: 30px;
    padding: 25px;
    padding-bottom: 10px;
  padding-bottom: 35px;
  margin: auto;
  margin-bottom:50px;
  margin-top:50px;
  box-shadow: 0px 5px 10px rgba(100, 10, 100, 0.2);

    
    
}

#nav{
    background:#fff;
    background: rgba(230, 230,230,0.02 );
  backdrop-filter: blur(5px);
  filter: brightness(1.03);
    height:20px;
    width:100%;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.14);
    position:fixed;
    top:70px;
    z-index:1;
    padding: 10px;
}

#nav a{
    text-decoration:none;
    margin-left:10px;
    margin-right:10px;
    color: #000;
}

.photo_name{
            width: 180px;
            transition: all 1s;
            position: relative;
            color:#555;
            text-decoration: none;
}

.item{
            width: 95%;
    margin: 16px;
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 1s;
    /*
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.14);
    */

    cursor: pointer;
    background: #fff;
}

.item:hover{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.14);
}

.photo:hover{
    filter: brightness(1.1);
}

.hide {
    display: none;
   }
   
  .back{
      opacity: 1;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    font-size: 22px;
    margin: 20px;
    margin-top: -10px;
    position: fixed;
    z-index: 2;
    top: 30px;
  left: 10px;
    
  }

.header{
    margin: 5px;
  position: relative;
  display: inline-block;
  font-size: 25;
  background: #eee;
  height: 44px;
  padding-left: 15px;
  padding-right: 15px;
  align-items: center;
  text-align: center;
  padding-top: 5px;
  border-radius: 30px;
  cursor: pointer;
  transition: all .3s;
}

.header:hover{
    filter: brightness(1.02);
}

        

        #logo1 {
            width: 70%;
            margin: auto;
            margin-top:40%;
        }
        #logo2{
            width: 50%;
    margin-left: 25%;
        }
      

        @media only screen and (max-width: 600px) {
            body {
                /*
                background-image: url(img/bg/bg (1).webp);
               overflow: hidden; */
               
            }
            
            #footer{
                bottom:-200px;
            }
          
        
        
        
    /* modal */
    
    #myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 50px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}