/* Basic Styles */
html{
  scroll-behavior: smooth;
 
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  .Welcome{
   color: black;
   font-weight: bolder;
   -webkit-text-stroke: 1px #ff5af1;
    font-size: 40px;
 width: auto;
 margin-top: 50px;
 display: inline-flex;
    margin-left: 30px;
    margin-bottom: 0;
    top: 0;
  }
  .Welcome .Zahra{
  color: #ff5af1;
  font-family: 'Varela Round', sans-serif;
  font-size: 120px;
  font-weight: 100;
  -webkit-text-stroke: 2px #efefef;
  margin-left: 30px;
  text-shadow: 3px 3px #ff5af1 ;
  
  
  }
  /* Navbar Styles */
  .navbar {z-index: 4000;
    display: flex;
    position:fixed;
    width: 98%;
   
    justify-content: space-between;
    align-items: center;
    background-color: #212121;
    padding: 15px 20px;
    box-shadow: #ff5af1 0px 2px;
  }
  
  .navbar .logo {
    color: white;
    margin-left: 20px;
   justify-items: space-between;
    display: flex;
    font-weight: 900;
    text-shadow: 2px 2px  #ff5af1 ;
    font-size: 24px;
    text-decoration: none;
  }
  .navbar .logo:hover {
    color: rgb(0, 0, 0);
    
  }
  .navbar .logo a {
    font-family: "Brush Script MT", cursive;
  }
  
  .navbar .nav-links {
    list-style: none;
    display: flex;
    gap: 15px;
    padding: 0;
    margin-right: 10px;
  
  }
  
  .navbar .nav-links li {
    display: inline;
    
  }
  
  .navbar .nav-links a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    padding: 5px;
    background-color: #ff5af1;
    box-shadow: white 2px 2px;
    transition: 0.3s;
    border-radius: 2px;
  }
  
  .navbar .nav-links a:hover {
    background-color: black;
   
  }
  
  /* Hamburger Menu */
  .hamburger {
    display: none;
    margin-right: 20px;
    flex-direction: column;
    cursor: pointer;
  }
  
  .hamburger div {
    background-color: white;
    height: 3px;
    width: 25px;
    margin: 5px 0;
  }
  .bcgsimg{margin-top: 0px;
    background: linear-gradient(rgba(255, 255, 255, 0.9),
     rgba(255, 255, 255, 0.9)), url('bcgimg.jpg');
 width: 100%;
 background-position: center;
 height: 600px;
 margin-top: 25px;
display: flex;
justify-content: space-between;
 background-size: contain;
 background-repeat: no-repeat;
 }
 .im1{
    width: 400px;
    height: 400px;
 margin-top: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 10px 0px 0px 0px;
   
    margin-right: 100px;
    border: 5px solid #ffffff;
    box-shadow: 10px 10px #ff5af1;
 }
 .im1 img{
  
    width: 380px;
    height: 380px;
    opacity: 0.4;
 }
  .desc{
    margin-top: 100px;
    background-color: black;
    background: linear-gradient(black,rgba(0, 0, 0, 0.01));
    border-radius: 5px;
    margin-left: 50px;
    padding-bottom: 50px;
    padding-left: 5px;
    padding-top: 5px;
    height: 200px;
    padding-right: 20px;
       font-size: 15px;
       width: 45%;
       text-shadow: 1px 1px #ff5af1;
       font-weight: lighter;
       word-spacing: 5px;
       color: white;
       font-family: 'Raleway', sans-serif;
   font-style: italic; /* or normal */
   
       border-left: 1px dashed #ff5af1 ;
     }
.Services{
    justify-self: center;
    font-size: 80px;
    text-shadow: 2px 2px #ff5af1;
    background-color: black;
    border: 1px solid #ff5af1;
   padding: 5px;
   border-radius: 15px;
    color: white;
}
.gallery{
  justify-self: center;
  font-size: 80px;
  text-shadow: 2px 2px #ff5af1;
 margin-top: 100px;
  
 padding: 5px;
 border-radius: 15px;
  color: white;
}
.content{ padding-left: 30px;
  margin-top: 20px;
 justify-content: center;
 justify-self: center;
  width: 95%;
  align-items: center;
  align-content: center;
  
  height: 900px;
  display: flexbox;
}
.content img{
 width: 30%;
 border-radius: 1px;
 box-shadow:#212121 10px 10px ;
 border:  2px solid #ff5af1;
 margin: 10px;
 height: 300px;
 }

.bcg{  padding-top: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background: linear-gradient(rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.9)), url('img2.jpg');
}
.move{
  margin-left: 50px;
  color: #ff5af1;
  font-weight: 100;
  font-style: italic;
}
.quickdesc{
  color: #ff5af1;
  font-style: italic;
  margin-left: 20px;
  font-family: 'Raleway', sans-serif;
  margin-bottom: 1px;
  padding-bottom: 1px;
}
.itemsedesc{
  
   margin-left: 75px;
}
.cast{
  width: 220px;
  height: auto;
  margin-top: 0;
  padding-top: 0;
  border-left: 1px solid #ff5af1 ;
  border-right: 1px solid #ff5af1 ;
  border-bottom: 1px solid #ff5af1 ;
  
}
.itemsedesc h2{
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
 font-size: 30px;
 margin-bottom: 0px;
  font-style: italic;
  color: #ff5af1;
}
.itemsedesc ul{
  
  width: 200px;
  font-family: 'Raleway', sans-serif;
  margin-left: 0;
  margin-top: 20px;

 background-color: #f979ee;
  color: #ffffff;
  font-weight: 100;
  font-size: 15px;
  padding-left: 20px;
}
.itemsedesc ul li{
  margin-bottom:10px ;
  text-shadow: 1px 1px #ff5af1;
}
.contact{
   display: block;
}
.contact h1{
 font-weight: 100;

  justify-self: center;
  font-size: 80px;
  text-shadow: 2px 2px #ff5af1;
 margin-top: 200px;
  
 padding: 5px;
 border-radius: 15px;
  color: white;
}.contact h2{

  font-weight: 100;
}
.contact a{

  text-decoration: none;
  color: #ff5af1;
}
.cntct{ border: 1px solid #ff5af1;
  width: 350px;
  padding-left: 10px;
  margin-bottom: 100px;
  margin-left: 100px;
}
.foot{
  background-color: black;
 margin:0;
}.foot section{
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  color: white;
 width: 99%;
 margin: 0;
 justify-self: center;
 padding-bottom: 100px;
 justify-self: center;
}
.foot div{
  padding: 0;
  
  justify-content: center;
  margin-left: 10px;
  margin-right: 10px;
}
.foot div h3{
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
  font-style: italic;
  font-size: 20px;
}
.foot div h3 a{
 text-decoration: none;
 color: white;
}
    

.foot  h4{
 font-weight: 100;
      color: white;
      justify-self: end;
     }
     .foot  h4 a{
      font-weight: 100;
           color: #ff5af1;
           text-decoration: none;
          }
  /* Responsive Design */
  @media (max-width: 768px) {
    .navbar .nav-links {
      
      flex-direction: column;
      width: 100%;
      display: none;
      animation: actives 0.005s ease-in 0.005s forwards;
      
      margin: 0;
      align-items: end;
      justify-content: end;
      position: absolute;
      top: 60px;
      padding-top: 10px;
     padding-bottom: 10px;
      left: 0;
      height: auto;
      background-color: #333;
      text-align: center;
    }
  
    .navbar .nav-links.active {
      display: flex;
    }
    .navbar .nav-links li {
     width: 150px;
     
     height: 20px;
     margin: 0;

    }
    .navbar .nav-links li a {
      font-size: 12px;
          background: none;
     }
    .hamburger {
      display: flex;
    }

    .desc{
        margin-top: 50px;
         margin-left: 20px;
           font-size: 12px;
           width: 80%;
           color: w;
           height: auto;
           font-weight: 100;
           word-spacing: 2px;
           font-family: 'Raleway', sans-serif;
       font-style: italic; /* or normal */
        border: none;
           
         }
         .Welcome{
            
            font-weight: bolder;
            -webkit-text-stroke: 1px #ff5af1;
             font-size: 50px;
             display: block;
          width: auto;
      
             margin-left: 30px;
           }
           .Welcome .Zahra{
           color: #ff5af1;
           font-family: 'Varela Round', sans-serif;
           font-size: 60px;
           -webkit-text-stroke: 2px #efefef;
           margin-left: 30px;
           text-shadow: 3px 3px #ff5af1 ;
           
           }

           .bcgsimg{margin-top: 0px;
            background: linear-gradient(rgba(255, 255, 255, 0.9),
             rgba(255, 255, 255, 0.9)), url('bcgimg.jpg');
         width: 100%;
         background-position: center;
         height: 600px;
         margin-top: 25px;
          display: block;
       
         background-size: contain;
         background-repeat: no-repeat;
         }
           .desc{
            margin-top: 100px;
            background-color: black;
            background: linear-gradient(black,rgb(255,255,255,0.01));
            border-radius: 5px;
            
            padding-bottom: 50px;
            padding-left: 5px;
            padding-top: 5px;
            height: 250px;
            padding-right: 20px;
               font-size: 15px;
               justify-self: center;
               text-shadow: 1px 1px #ff5af1;
               font-weight: lighter;
               word-spacing: 5px;
               color: white;
               font-family: 'Raleway', sans-serif;
           font-style: italic; /* or normal */
           
               border-left: 1px dashed #ff5af1 ;
             }
             .im1{
              width: 400px;
              height: 400px;
           margin-top: 20px;
              background-size: contain;
              background-repeat: no-repeat;
              border-radius: 10px 0px 0px 0px;
              justify-self: center;
              margin-left: 100px;
              border: 5px solid #ffffff;
              box-shadow: 10px 10px #ff5af1;
           }
             
           .Services{
            margin-top: 150px;
            justify-self: center;
            font-size: 60px;
            text-shadow: 2px 2px #ff5af1;
            background-color: black;
            border: 1px solid #ff5af1;
           padding: 5px;
           margin-bottom: 30px;
            color: white;
        }
        .itemsedesc h2{
          font-family: 'Raleway', sans-serif;
          font-weight: 100;
         font-size: 25px;
         margin-bottom: 0px;
          font-style: italic;
          color: #ff5af1;
        }
        .content{ padding-left: 30px;
          margin-top: 20px;
         justify-content: center;
         justify-self: center;
          width: 95%;
          align-items: center;
          align-content: center;
          
          height: 2700px;
          display: block;
        }
        .content img{
          width: 90%;
          border-radius: 1px;
          box-shadow:#212121 10px 10px ;
          border:  2px solid #ff5af1;
          margin: 10px;
          height: 300px;
          }
          .contact{ margin-top: 300px;
            display: block;
         }
         .contact h1{
         
         
           justify-self: center;
           font-size: 60px;
           text-shadow: 2px 2px #ff5af1;
          margin-top: 200px;
           
          padding: 5px;
          border-radius: 15px;
           color: white;
         }
         .contact a{
         
           text-decoration: none;
           color: #ff5af1;
         }
         .cntct{
           margin-left: 50px;
         }
         .foot section{
          display: block;
          justify-content: space-between;
          background-color: black;
          color: white;
         width: 95%;
         margin: 0;
 
         justify-self: center;
         padding-bottom: 100px;
         justify-self: center;
         
        }
        .foot div{
          padding: 0;
          justify-self: center;
          justify-content: center;
          margin-left: 10px;
          margin-right: 10px;
        }
        .foot div h3{
          font-family: 'Raleway', sans-serif;
          font-weight: 100;
          font-style: italic;
          font-size: 20px;
        }
         
  }
  @keyframes actives {
    0%   {}
    25%  {height: 0;}
    50%  {height: 25px;}
    75%  { height: 100px;}
    100% { height: auto;}
  }