/* Description: Master CSS file */

/*****************************************
Table Of Contents:
- General Styles
- Navigation
- Home
- Information
- Button
- Services
- Plans
- Testimonials
- Newsletter
- Back To Top Button
- Extra Pages
- Media Queries
******************************************/


/**************************/
/*     General Styles     */
/**************************/
:root {
	--primary: #c41d1d;
	--primary-light:#ffffff;
	--secondary: #242627;
	--tertiary: #474a4b;
	--gradient: linear-gradient(to right,#242627,#c41d1d);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Century Gothic";
}

h1 {
	font-size: 60px;
	font-weight: 500;
}

button {
	font-family: sans-serif;
}

p,
ul
{
	margin: 0;
	padding: 0;
}

a {
	color: rgb(0, 0, 0);
	text-decoration: none;
}

li {
  	list-style-type: none;
}

i{
    color: var(--primary);
}

html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body{
    margin: 0;
    padding: 0;
    min-width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-family: "Century Gothic";
}



/* Navigation */

.content{
    min-height: 100%;
    height: 100%;
}

.content .navbar{
    background-color: var(--primary);
    height: 100%;
    position: absolute;
}

.content .navbar #mobile-nav{
    
    display: none;
}

.content .navbar .container{
    width: 100%;
}

.content .navbar .container .container-fluid{
    margin: 0;
}

.content .navbar .container-fluid .navbar-nav{
    margin: 0;
}

.content .navbar .container-fluid .navbar-nav li{
     margin: 0;
    line-height: 5rem;
}

.content .navbar .container-fluid .navbar-nav li a img{
    width: 2rem;
    height: 2rem;
}

.content .home{
    height: 100%;
}

.content .home .main-img{
    margin-top: 0;
    width: 100%;
    height: 110%;
    /*background-image: url(../pictures/conn.gif);*/
    background-repeat: no-repeat;
    background-size: cover;
}

.content .home .main-img .nav-toggler{
    display: none;
    position: absolute;
}

.content .home .main-img .nav-toggler button{
    
    border-width: 0;
    background: none;

}

.content .home .main-img .nav-toggler img{

    width: 2rem;
    height: 2rem;
}

.content  .navbar .logo{
    background-color: var(--primary-light);
    width: 100%;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    margin-top: 0;
}

.content  .navbar .logo img{
    height: 5rem;
    margin: 0;
    padding: 0;

}

.content .home .intro{
    background-image: url(../pictures/1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}


.content .home .intro{
    color: var(--primary);
    margin-left: 2rem;
}

.content .home .intro .intro-content .feat-img img{
    width: 3rem;
    height: 3rem;
}

.content .home .intro .intro-content .feat-img h5{
    color: #0000;
    font-weight: 500;
}

.content .home .intro .container-fluid div:nth-child(3) div
{
    text-align: left;
}

.content .home .intro .container-fluid .comp-img img
{
    width: 22rem;
    height: 25rem
}

.content .home .mission {
    background-image: var(--gradient);
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 2rem;
}


.content .home .mission .container-fluid{
    text-align: left;
    /* background-color: rgba(255, 255, 255, 0.932); */
    color: var(--primary-light);
    min-width: 100%;
}

.content .home .mission .container-fluid div:nth-child(1) ul li{
    list-style: circle;
}

.content .home .service{
    margin-left: 2rem;
}

.content .home .service .container-fluid{
    min-width: 100%;
}

.content .home .service .container-fluid div{
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--primary-light);
    padding-bottom: 3%;
    padding-top: 3%;
}

.content .home .service .container-fluid  #serv-1{
    background-image: url(../pictures/it.jpg);
}

.content .home .service .container-fluid  #serv-2{
    background-image: url(../pictures/network-solutions.jpg);
}

.content .home .service .container-fluid  #serv-3{
    background-image: url(../pictures/out.jpg);
}

.content .home .service .container-fluid  #serv-4{
    background-image: url(../pictures/Networksecurity.jpg);
}

.content .home .service .container-fluid  div .serv-img{
    border-color: var(--primary-light);
    border-width: 2px;
    border-style: solid;
    width: 85%;
    margin-left: 1rem;
    background-color: rgba(0, 0, 0, 0.3);
}

.content .home .service .container-fluid  div .serv-img:hover{
    background-color: rgba(196, 0, 0, 0.795);
}

.content .home .contact{
    color: #0000;
    background-image: url(../pictures/1.jpg) ;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 2rem;
}


.content .home .contact .container-fluid  div form input[type=text],
.content .home .contact .container-fluid  div form input[type=email],
.content .home .contact .container-fluid  div form input[type=phone]{
     width: 50rem;
     padding-bottom: 3%;
     border-width: 2px;
     border-style: solid;
     border-color: var(--primary);
     border-radius: 5px;
     text-indent: 10px;
     outline: none;
}

.content .home .contact .container-fluid  div form textarea{

    width: 50rem;
    border-width: 2px;
    border-style: solid;
    border-color: var(--primary);
    border-radius: 5px;
    text-indent: 10px;
    outline: none;
}

.content .home .contact .container-fluid  div form .btn{

    background-color: var(--primary);
    color: var(--primary-light)
}

.content .home .contact .container-fluid .contact-info{
    width: 100%;
    background-image: var(--gradient);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--primary-light);
    text-align: left;
}

.content .home .contact .container-fluid .contact-info ul{
    position: relative;
}

.content .home .footer{
    background-image: var(--gradient);
    color: var(--primary-light);
    text-align: left;
    margin-left: 2rem;
}


.content .home .footer .container-fluid div i{
   color: var(--primary-light);
}

.content .home .clients{
    
    color: var(--primary);
    background-image: url(../pictures/1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 2rem;
}

/*@import url(https://fonts.googleapis.com/css?family=Istok+Web);*/
@keyframes slidy {
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }
    body, figure { 
      margin: 0; background-color: var(--primary-light);
      font-family: Istok Web, sans-serif;
      font-weight: 100;
    }
    div#captioned-gallery { 
      width: 16rem; overflow: hidden; height:100%;
    }
    figure.slider { 
      position: relative; width: 500%; height: 100%;
      font-size: 0; animation: 30s slidy infinite; 
    }
    figure.slider figure {
      margin-top: 2rem; 
      width: 20%; height: 100%;
      display: inline-block;  position: inherit; 
    }
    figure.slider img { width: 100%; height: auto; }
    figure.slider figure figcaption { 
      position: absolute; bottom: 0;
      background: none;
      color: #fff; width: 100%;
      font-size: 2rem; padding: .6rem; 
    }
    
    /************************************/
    /*@import url(https://fonts.googleapis.com/css?family=Istok+Web);*/
    @keyframes slidy2 {
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }
    body, figure { 
      margin: 0; background: none;
      font-family: Istok Web, sans-serif;
      font-weight: 100;
    }
    div#wrapper { 
      width: 100%; overflow: hidden;
    }
    #slideContainer { 
      position: relative; width: 300%;
      font-size: 0; animation: 30s slidy2 infinite; 
    }
    #slideContainer li { 
      width: 20%; height: auto;
      display: inline-block;  position: inherit; 
    }
    #slideContainer img { width: 100%; }
    .caption { 
      position: absolute; bottom: 0;
      background: none;
      color: #fff; width: 100%;
      font-size: 2rem; padding: .6rem; 
    }
    /************************************/
            #wrapper
            {            
                overflow:hidden;
                position:relative;
                background-color: none;
                margin:0 auto;
            }
            
            #wrapper ul
            {
                list-style:none;
                margin:0;
                padding:0; 
                -webkit-transition: -webkit-transform 0.3s linear;
                transition: all;
                display:none;
            }
            
            #wrapper ul li
            {
               float:left;                        
            }
            #wrapper ul li img
            {
                -webkit-backface-visibility: hidden;
                -webkit-perspective: 1000;
                backface-visibility: visible;
                perspective: none;
            }


@media screen and (max-width:2560px) and (min-width: 1400px){

   .content .home .intro .intro-content p{
       margin-left: 10%;
       margin-right: 8%;
   }

   .content .home .service .container-fluid div .serv-img{
       margin-left: 6%;
   }

   .content .home .footer .container-fluid .row{
    
     margin-left: 9%;
   }
    
}


@media screen and (max-width:768px){
    
    body{
        overflow-x: scroll;
    }

    .content .home .intro .container-fluid div:nth-child(3) div h3,
    .content .home .intro .container-fluid div:nth-child(3) div p
    {
        margin-left: 5%;
    }

    .content .home .mission .container-fluid div:nth-child(1){

        margin-left: 3%;
    }

    .content .home .footer,
    .content .home .footer .container-fluid,
    .content .home .footer .container-fluid .row{
        display: inline-flex;
        justify-content: left;
        text-align: left;
    }

     .content .home .main-img .nav-toggler{

        display: block;
    }

    .content .navbar #side-bar{

        display: none;
    }
    
    .content .navbar #mobile-nav{

        display: block;
    }
    
    .content  .navbar{

        display: none;
    }

    .content .navbar .container{
        height: 100%;
    }

    .content div{

        margin-left: 0;
        padding: 0;
        align-items: left;
    }

    .content .home .intro,
    .content .home .mission,
    .content .home .service,
    .content .home .contact,
    .content .home .clients,
    .content .home .footer{

        margin-left: 0;
    }
}


@media screen and (max-width:593px){
     
  .carousel{
    margin-left: 11.5%;
  }
}


@media screen and (max-width:2560px) and (min-width: 1024px)
{
    .content .navbar .container{
        height: 100%;
    }  

    .content .navbar .container .navbar-nav{
        height: 100%;
    }
}


@media screen and (max-width:1399px) and (min-width: 1135px)
{
    .content .home .intro .intro-content p{
        margin-left: 5rem;
        margin-right: 5rem;
    }
    
    .content .home .footer .container-fluid .row{
        margin-left: 5rem;
    }
}