body{
   
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1em;
    overflow-x: hidden;
   
    background-color:whitesmoke;
}
 
.navbar{
    padding:0 2em 0 2em;
     background-color: rgb(31, 30, 30);
     height: 50px;
     width:100%;
 }
 .main-nav{
     text-decoration:none;
     display:flex;
     flex-direction: row; 
 }
 .nav{
     text-decoration:none;
     margin: 0;
     padding: 0;
     list-style: none;
    }
 .logo{
       text-decoration: none;
       margin: 0;
       font-size: 1.0em;
      }
   .main-nav{
       margin-top: 0.358em;
   
   }
   .logo,
   .nav {
       padding: 0.625em 0.789em;
       text-transform: uppercase;
       text-align: center;
       display: block;
   }
   .nav{
       color: #f80808;
       font-size: 0.75em;
   }
 
  .nav a{
     color:black;
     text-decoration: none;
     border-right:1px solid #ffffff;
     padding-right: 0.752em;
     padding-left: 0.752em;
 
   }
   .nav :hover {
       text-decoration: none;
       cursor: pointer;
       color:black;
   } 
 
   a:hover{ 
     text-decoration:none;
     border-bottom: 2px solid red;
   }
  
   .header{
    background-image: url("../images/Header.jpg");
    height:500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	z-index:-1;
   }
   .header_overlay{
  min-height:100%;
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255,255,255,0.45);
   
	   
	   
	   
   }
   .about{
    min-height:700px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   
   }
   
   .about_overlay{
	 background-size:cover;
     box-shadow:inset 0 0 0 2000px rgba(255,255,255,0.8);   
	   
   }
   .services{
    min-height:600px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left:4px;
   
   }
   
   .contact{
    display:flex;
    flex-direction: row;
    background-color:whitesmoke;
    
    }
    .contacts{
        background-color:whitesmoke; 
      }
      
      
  .card{
    display:flex;
    flex-direction: column;
    background-color:whitesmoke;
    text-align:center;
    width: 300px;
    height: 450px;
    box-shadow: 0 0 10px  red;
    transition: box-shadow .6s ease-out;
    margin-right:0px;
    border-radius:20px 20px
    
  }
  .services-section{
    font-family: 'Lato', sans-serif;
    position: relative;
    z-index: 1
  }
  .services-section .service-icon{
    background: #f1e9ea;
    font-size: 55px;
    text-align: center;
    line-height: 128px;
    width: 140px;
    height: 140px;
    margin: 0 auto 30px;
    border: 5px solid #fff;
    border-radius: 100px;
    box-shadow: 0 0 10px rgb(235, 11, 11);
    position: relative;
    transition: all 0.3s ease 0s;
}
.services-section:hover .service-icon{
   box-shadow: 0 0 15px rgba(0,0,0,0.2); 
  }
  .services-section.service-icon i{
     transition: all 0.3s ease 0s;
     }
     
  .card-body{
    flex: 1 1 auto;
    padding: 1.25rem;
  }
  .services-section:hover{ 
       box-shadow: 1px 8px 20px red;
      transition:  box-shadow .6s ease-in;
    }
    .service-content .card-title{
      color: #fff;
    background: red;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 5px;
    margin: 0 0 10px;
    }
    .services-section  .service-icon:before{
      content: "";
      background: red;
      width: 50px;
      height: 50px;
      margin: 0 auto;
      opacity: 0;
      transform: rotateY(360deg);
      position: absolute;
      bottom: -33px;
      right: 0;
      left: 0;
      z-index: -1;
      transition: all 0.3s;
      -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);
      clip-path: polygon(100% 0, 0 0, 50% 100%);
  }
  .services-section:hover .service-icon:before{
    opacity: 1;
    transform: rotateY(0);
}
.services-section .service-content{
  text-align: center;
  border-radius: 20px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.services-section.service-content:after{
  content: '';
  background:red;
  width: 100%;
  height: 20px;
  display: block;
}
.contact-us{
    padding:0.275em;
      text-align: left;
      font-size: o.875em;
    } 
    input[type=text] {
      
      padding:0.750em; 
      border-radius:3px;
      box-sizing: border-box; 
      margin-top: 0.375em; 
      margin-bottom: 1.00em; 
      resize: vertical ;
    } 
    .control-form {
      border-radius: 0.275em;
      padding:1.875em;
    }
    .footer{
      background-color: rgb(78, 78, 78);
    }
   .messages{
      display:flex;
      flex-direction: column;
      justify-content:center;
    } 
    
    .slider {
        max-width: 700px;
        height:350px;
        margin: 20px auto;
        position: relative;
        display: grid;
        
        justify-content : center;
        grid-gap : 1em;
        margin : 6em;
        perspective: 1200px;
        transform-style: preserve-3d;
        width : 35em;
        position: relative;
        color :black;
        padding : 2em 4em;
        border-radius: 20px;
        perspective-origin: bottom right;
        transform: rotateX(10deg) rotateY(3deg);
        border-bottom: 8px solid rgba(0,0,0,0.2);     
        border-right: 12px solid rgba(0,0,0,0.2);   
      }
      .slide1,.slide2,.slide3,.slide4,.slide5 {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .slide1 {
        background:#ddd;
        color: #333;
        border-radius: 0 70px 0 70px;
        animation:fade 20s infinite;
       -webkit-animation:fade 20s infinite;
      
      } 
      .slide2 {
       background:#ddd;
       color: #333;
       border-radius: 0 70px 0 70px;
       animation:fade2 20s infinite;
      -webkit-animation:fade2 20s infinite;
      }
      .slide3 {
        background:#ddd;
       color: #333;
        border-radius: 0 70px 0 70px;
        animation:fade3 20s infinite;
       -webkit-animation:fade3 20s infinite;
      } 
      
      @keyframes fade
      {
        0%   {opacity:1}
        33.333% { opacity: 0}
        66.666% { opacity: 0}
        100% { opacity: 2}
      }
      @keyframes fade2
      {
        0%   {opacity:0}
        33.333% { opacity: 1}
        66.666% { opacity: 0 }
        100% { opacity: 2}
      }
      @keyframes fade3
      {
        0%   {opacity:0}
        33.333% { opacity: 0}
        66.666% { opacity: 1}
        100% { opacity: 2}
      }
      .slideshow {
        position: relative;
        margin-bottom: 0px;
      }
      
      .slides {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
        height: 700px;
        width: 100%;
        overflow: hidden;
        
        color: #333;
      }
      .no-js .slides {
        height: auto;
      }
      .slides > li {
        width: 100%;
        height: 100%;
        position: absolute;
        visibility: hidden;
        perspective: 1600px;
      }
      .no-js .slides > li {
        position: relative;
        visibility: visible;
      }
      .slideshow > nav {
        text-align: center;
        margin-top: 20px;
      }
      
      .slideshow > nav span {
        display: inline-block;
        width: 60px;
        height: 25px;
        border-top: 10px solid #fff;
        border-bottom: 10px solid #fff;
        background-color: #ddd;
        cursor: pointer;
        margin: 0 3px;
        transition: background-color 0.2s;
      }
      
      .slideshow > nav span:hover {
        background-color: #333;
      }
      
      .slideshow > nav span.current {
        background-color: #aaa;
      }
      .description {
        width: 50%;
        padding: 2em 4em;
        font-size: 1.5em;
        position: relative;
        z-index: 1000;
        opacity: 0;
      }
      
      .no-js .description {
        opacity: 1;
      }
      
      .description h2 {
        font-size: 200%;
      }
      .tiltview {
        position: absolute;
        left: 30%;
        width: 90%;
        top: 70%;
        transform-style: preserve-3d;
        transform: translateY(-80%) rotateX(55deg) rotateZ(35deg);
      }
      .tiltview.row a:nth-child(2) {
        left: 50%;
        left: calc(50% + 15px);
        position: absolute;
        top: 0;
      }
      /* Show/Hide */
.slides > li.current,
.slides > li.show {
	visibility: visible;
}
.description {
	transition: opacity 0.75s;
}

.current .description,
.show .description {
	opacity: 1;
}

.hide .description {
	opacity: 0;

}
/*services  css*/
  .headers{
      min-height:600px; 
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-left:4px; 
      background-image: url('../images/93190.jpg');
	  width:100%; 
  } 
  .security{
    min-height:600px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../images/14624.jpg'); 

}
.backup{
    min-height:100px; 
    min-width: 1350px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    background-image: url('../images/Backup.jpg');
	
  }
  .backup_overlay{
  min-height:100%;
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255,255,255,0.8); 
	 	  
  }
  
  .support{
    min-height:600px; 
    min-width: 1350px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    background-image: url('../images/15491.jpg');
   
  }
  .support-overlay{
  min-height:100%;
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255,255,255,0.8);
	 
  
  }
  
  
  
  
  .web{  
    min-height:600px; 
    min-width: 1350px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    background-image: url('../images/1123.jpg');
  }
  
  .web-overlay{
	    min-height:100%;
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255,255,255,0.9);
	  
	  
	  
	  
  }
  .security1 .div-left
  {    width:48%;
       height:auto;
       float:left;
       margin-left:1%;
    }
   .security1 .div-right {
         width:46%;
         height:auto;
         float:right;
         }
		 
	  
  .security-overlay{
  min-height:100%;
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255,255,255,0.7);
	 
  
  }	 
    .back-up .div-left
    {
           width:48%;
           height:auto;
           float:left;
           margin-left:1%;
     }
     .back-up .div-right
     {
             width:47%;
             height:auto;
             float:right;
             
     }
     .support1 .div-left{
      width:48%;
      height:auto;
      float:left;
      margin-left:1%;
     
     }
     .support1 .div-right{
        width:46%;
        height:auto;
      float:right;
        
     }
     .aos{
      height:100vh;
      width:100%;
    }
    
    .center {
	 position: absolute;
     left: 0;
     top: 50%;
     width: 100%;
     text-align: center;
     font-size: 18px;
	 		
	}
	
	.div.relative{
	 position:relative;
	 widht:400px;
	 height:200px;
	 border:3px solid #73AD21;
	 
	}
	
	.container{
	 position:relative;
	 padding-top: 250px;
	 padding::100px;
	 		
	}