html{
  scroll-behavior: smooth;
  overflow-x: hidden;

 }

body{
    margin-left: 10px;
    margin-right: 10px;
    height: auto;
    background: linear-gradient(to top right, violet, cyan, darkviolet);
    width: 100%;
    overflow-x: hidden;

   }

   .first-page{
     position: relative;
     width: 100%;
     height: 100vh;
     background: black;
   }

   .first-page-mobile{
    position: relative;
    width: 100%;
    height: 100vh;
    background: black;
  }

   .first-page-img{
     position: absolute;
     width: 150%;
     height: 150%;
     opacity: 0;
     top: -50%;
     left: -10%;
   }

   .first-page-img-mobile{
     position: absolute;
     top: 0;
     left: 0%;
     width: 160%;
     height: 100%;
     opacity: 0.5;
   }

   .first-page-name{
     position: relative;
     left: 5%;
     top: 50%;
     font-size: 70px;
     transform: translateY(-50%);
     color: violet;
     font-family: 'Anton', sans-serif;
     margin: 0;
     width: 90%;
   }

   .first-page-title{
    position: relative;
    width: 90%;
    left: 5%;
    top: 50%;
    font-size: 25px;
    transform: translateY(-50%);
    color: white;
    font-family: 'Saira', sans-serif;
    margin: 0;
   }

   #arrow-down{
    position: absolute;
    font-size: xx-large;
    bottom: 10%;
    left: 50%;
    color: violet;
    z-index: 4;
   }
   
/* Navbar */

.nav-bar{
  position: fixed;
  background: transparent;
  height: 100px;
  width: 100%;
  right: 0;
  top: 0;
  z-index: 5;
}

.nav-logo-image{
  height: 100%;
  width: auto;
  background: violet;
  margin-left: 20px;
}

.nav-ul{
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 20px;
}

.nav-li{
  list-style-type: none;
  display: inline-block;
  margin-right: 15px;
}

.nav-li-a{
  border: 2px solid violet;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: small;
  color: #fff;
  font-family: 'Saira', sans-serif;
}

#nav-home{
  border: 2px solid cyan;
}

.nav-li-a:hover{
  text-decoration: none;
  box-shadow:  0 0 20px  darkviolet;
  -moz-box-shadow: 0 0 20px  darkviolet;
  -webkit-box-shadow: 0 0 20px  darkviolet;
  -o-box-shadow: 0 0 20px  darkviolet;
  transition: 300ms;
  -webkit-transition: 300ms;
  -o-transition: 300ms;
  -moz-transition: 300ms;
  color: #fff;
}

.mobile-menu-li-a:hover{
  text-decoration: none;
  border-bottom: 2px solid violet;
  transition: 300ms;
  -webkit-transition: 300ms;
  -o-transition: 300ms;
  -moz-transition: 300ms;
  color: #fff;
}

.active-nav:hover{
  box-shadow:  0 0 20px  cyan;
  -moz-box-shadow: 0 0 20px  cyan;
  -webkit-box-shadow: 0 0 20px  cyan;
  -o-box-shadow: 0 0 20px  cyan;
  transition: 300ms;
  -webkit-transition: 300ms;
  -o-transition: 300ms;
  -moz-transition: 300ms;
}

#fa-bars{
  position: relative;
  border: 3px solid violet;
  float: right;
  font-size: xx-large;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 20px;
  color: #fff;
}

.menu-anime{
  left: 50% !important;
  transition-timing-function: cubic-bezier(.1,.18,1,-0.02) !important;
  -webkit-transition-timing-function: cubic-bezier(.1,.18,1,-0.02) !important;
  -o-transition-timing-function: cubic-bezier(.1,.18,1,-0.02) !important;
  -moz-transition-timing-function: cubic-bezier(.1,.18,1,-0.02) !important;
}

.hide-mobile-menu{
  background: grey;
  width: 50%; /* 50% original value */
  position: fixed;
  right: 0;
  height: 100vh;
  z-index: 8;
  top: 0;
  left: 100%;
  transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
  transition-timing-function: cubic-bezier(.1,.18,1,-0.02) !important;
  -webkit-transition-timing-function: cubic-bezier(.1,.18,1,-0.02) !important;
  -o-transition-timing-function: cubic-bezier(.1,.18,1,-0.02) !important;
  -moz-transition-timing-function: cubic-bezier(.1,.18,1,-0.02) !important;
}

#fa-close{
  position: relative;
  border: 3px solid violet;
  float: right;
  font-size: xx-large;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 20px;
  margin-top: 20px;
}

.mobile-menu-ul{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
}

.mobile-menu-li{
  list-style-type: none;
  margin-top: 20px;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  
}

.mobile-menu-li-a{

  padding-right: 35px;
  padding-left: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: x-large;
  color: #fff;
  position: relative;
  left: 10%;
  font-family: 'Saira', sans-serif;
}

/* Welcome Page */

   .welcome-page-cont{
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 75px;
    margin-bottom: 75px;
   }
   
   .cont{
     position: relative;
     height: auto;
     box-shadow:  0 0 10px  rgba(0,0,0,0.6);
     -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
     -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
     -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
     background: #fff;
     opacity: 0;
   }

   .about-fade{
     opacity: 1;
     transition: 3s;
     -moz-transition: 3s;
     -o-transition: 3s;
     -webkit-transition: 3s;
   }

   .profile-info-h1{
     font-family: 'Oswald', sans-serif;
     display: inline-block;
     font-weight: normal;
     text-transform: uppercase;
     margin-top: 20px;
     margin-bottom: 0;
     font-size: 50px;
   }
   
   .profile-info-h1-span{
     color: violet;
   }
   
   .profile-info-h3{
     font-family: 'Titillium Web', sans-serif;
     font-size: 20px;
     font-weight: bold;
     margin-top: 0;
     margin-bottom: 20px;
   }
   
   .profile-info-h4{
     font-size: 15px;
     letter-spacing: 0.6px;
     font-family: 'Titillium Web', sans-serif;
     line-height: 1.5em;
   }
   
   .ul-info{
     padding-left: 10px;
     margin-top: 20px;
   }
   
   .li-info{
     position: relative;
     list-style-type: none;
     width: 100%;
   }
   
   .span-info-left-1, .span-info-left-2, .span-info-left-3{
     width: 80px;
     display: inline-block;
     font-size: 15px;
     color: grey;
     margin-bottom: 15px;
   }
   
   .span-info-right-1, .span-info-right-2, .span-info-right-3{
     font-size: 15px;
     color: #000;
   }
   
   .col-lg-12{
     margin-top: 15px;
}

   .title-links{
     font-size: 15px;
     color: #000;
   }
   
   .ul-smedia{
     padding-left: 10px;
     margin-top: 20px;
   }
   
   .li-smedia{
     display: inline-block;
   }
   
   .li-smedia-a{
       position: relative;
       font-size: medium;
   }

   .li-smedia-a-i{
     position: relative;
     list-style-type: none;
     text-align: center;
     line-height: 40px;
     border-radius: 10px;
     width: 30px;
     height: 30px;
   }
   
   .fa-facebook{
     color: #3b5998;
   }
   
   .fa-twitter{
     color: #55acee;
   }
   
   .fa-google-plus{
     color: #dc4e41;
   }
   
   .fa-pinterest{
     color: #bd081c;
   }
   
   .fa-linkedin{
     color: #0077b5;
   }
   
   .fa-behance{
      color: #1769ff;
   }
   
   .fa-instagram{
     color: #7232bd;
   }
   
   .fa-dribbble{
     color: #ea4c89;
   }

   .fa-facebook:hover, .fa-twitter:hover, .fa-google-plus:hover, .fa-pinterest:hover, .fa-linkedin:hover, .fa-behance:hover, .fa-instagram:hover, .fa-dribbble:hover{
     color: violet;
     transition: 0.5s;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     -moz-transition: 0.5s;
   }

   .experience-page-big-cont, .projects-page-big-cont{
     position: relative;
     width: 100%;
     height: auto;
     margin-top: 75px;
   }

   .projects-page-row, .experience-page-row{
     background: white;
     box-shadow:  0 0 10px  rgba(0,0,0,0.6);
     -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
     -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
     -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
     background: #fff;
   }

   .contact-title-cont{
     position: relative;
     width: 250px;
     height: 50px;
     margin-bottom: 70px;
   }

   .experience-title{
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    margin: 0;
    margin-bottom: 5px;
    position: relative;
    text-align: center;
    font-family: 'Saira', sans-serif;
    line-height: 1.3em;
   }

   .line{
     position: relative;
     width: 100px;
     height: 7px;
     background: linear-gradient(to right, cyan, violet);
     left: 50%;
     transform: translateX(-50%);
     border-radius: 10px;
   }

   .experience-cont{
     position: relative;
     height: auto;
     left: 50%;
     transform: translateX(-50%);
     margin-top: 30px;
     margin-bottom: 40px;
   }

   .experience-meter-p-cont{
     position: relative; 
     width: 90%;
     border-radius: 25px;
     left: 50%;
     transform: translateX(-50%);
   }

   .experience-meter-p{
     position: relative; 
     width: 90%;
     font-family: 'Saira', sans-serif;
     font-weight: bold;
     left: 50%;
     transform: translateX(-50%);
   }

   .experience-meter-cont{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: grey;
    border-radius: 25px;
   }

   .experience-meter{
     position: relative;
     width: 0%;
     height: 20px;
     background: linear-gradient(to left, darkcyan, violet);
     margin-bottom: 10px;
     border-radius: 25px;
   }

   .meter-percent{
     position: absolute;
     right: 10px;
     color: white;
     font-family: 'Saira', sans-serif;
     font-weight: bold;
   }

   .experience-page-btn{
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     background: transparent;
     border: 2px solid cyan;
     width: 300px;
     height: 50px;
     font-family: 'Saira', sans-serif;
     font-size: medium;
     margin-bottom: 20px;
     transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
   }

   .experience-page-btn:hover{
    box-shadow:  0 0 40px  cyan;
    -moz-box-shadow: 0 0 40px  cyan;
    -webkit-box-shadow: 0 0 40px  cyan;
    -o-box-shadow: 0 0 40px  cyan;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
   }

   .experience-page-btn-i{
     font-size: 17px;
     margin-right: 5px;
   }

   .second-page-experience-2{
     margin-top: 20px;
   }

   .experience-page-2-h1{
    font-family: 'Anton', sans-serif;
    font-size: 25px;
   }

   .experience-page-2-line{
    position: relative;
    width: 100px;
    height: 4px;
    background: linear-gradient(to right, cyan, violet);
    border-radius: 10px;
    margin-top: 10px;
  }

  .second-page-experience-2-ul{
    padding: 0;
    margin-top: 30px;
  }

  .experience-page-2-li{
    display: inline-block;
  }

  #fa-check1, #fa-check2, #fa-check3, #fa-check4, #fa-check5{
    float: left;
    margin-top: 2px;
    font-size: 18px;
    margin-right: 10px;
    color: darkcyan;
  }

  #fa-check-toggle{
    color: grey;
  }

  .experience-page-2-p{
    position: relative;
    font-size: 17px;
    width: 90%;
    display: inline-block;
    font-family: 'Saira', sans-serif;
    color:grey;
  }

   .projects-page-h1{
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    margin: 0;
    margin-bottom: 5px;
    position: relative;
    text-align: center;
    font-family: 'Saira', sans-serif;
    line-height: 1.3em;
   }
   
/* Doesnt Work */
   #projects-page{
     transition: 2s !important;
     -webkit-transition: 2s !important;
     -o-transition: 2s !important;
     -moz-transition: 2s !important;
     transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
     -webkit-transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
     -o-transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
     -moz-transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
   }

   .projects-cont{
     margin-bottom: 5px;
     height: auto;
   }

   .project-img{
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
   }

   .projects{
     position: relative;
     top: 50px;
     opacity: 0;
     height: 250px;
     margin-top: 20px;
     background: #000;
     transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
     -webkit-transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
     -o-transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
     -moz-transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
   }

   .projects-cont{
     margin-bottom: 75px;
   }

   .nav-bar-shadow-anime{
    box-shadow:  0 0 20px  violet;
    -moz-box-shadow: 0 0 20px  violet;
    -webkit-box-shadow: 0 0 20px  violet;
    -o-box-shadow: 0 0 20px  violet;
   }

   .hidden-menu{
     position: absolute;
     width: 100%;
     height: 100%;
     background: linear-gradient(to left, darkcyan, violet);
     left: 0;
     opacity: 0;
   }

   .hidden-menu-p{
     position: absolute;
     width: 80%;
     font-size: large;
     font-family: 'Titillium Web', sans-serif;
     color: white;
     left: 50%;
     top: 100%;
     transform: translate(-50%, -100%);
     
   }

   .hidden-menu-p-anime{
     position: absolute;
     top: 10%;
     transform: translate(-50%, -10%);   
     transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -webkit-transition: 0.5s;
   }

   .hidden-menu-anime{
     opacity: 0.9;
     transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -webkit-transition: 0.5s;
   }

   .hidden-menu-btn{
     position: absolute;
     font-family: 'Saira', sans-serif;
     left: 50%;
     top: 10%;
     transform: translate(-50%, -10%);
     width: 200px;
     height: 50px;
     font-size: large;
     background: transparent;
     box-shadow:  0 0 20px  white;
    -moz-box-shadow: 0 0 20px  white;
    -webkit-box-shadow: 0 0 20px  white;
    -o-box-shadow: 0 0 20px  white;
    font-weight: bold;
   }

   .hidden-menu-btn:hover{
    box-shadow:  0 0 20px  black;
    -moz-box-shadow: 0 0 20px  black;
    -webkit-box-shadow: 0 0 20px  black;
    -o-box-shadow: 0 0 20px  black;
    color: white;
   }

   .hidden-menu-btn-anime{
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -95%);
    transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    color: silver;
   }

   .reviews-page-cont{
     background: #fff;
     margin-top: 75px;
     margin-bottom: 75px;
     height: auto;
   }

    .small-cont{
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition-duration: 2s !important;
      -moz-transition-duration: 2s !important;
      -o-transition-duration: 2s !important;
      -webkit-transition-duration: 2s !important;
    }

    .reviews-cont{
      transition-duration: 2s;
      -moz-transition-duration: 2s;
      -o-transition-duration: 2s;
      -webkit-transition-duration: 2s;
      display: none;
    }
   .reviewer-photo{
     width: 150px;
     height: 150px;
     border-radius: 50px;
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     margin-top: 70px;
     box-shadow:  0 0 20px  darkviolet;
    -moz-box-shadow: 0 0 20px  darkviolet;
    -webkit-box-shadow: 0 0 20px  darkviolet;
    -o-box-shadow: 0 0 20px  darkviolet;
   }

   .reviewer-comment{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    margin-top: 30px;
    font-family: 'Saira', sans-serif;
    font-size: 20px;
   }

   .reviewer-name{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-top: 50px;
    font-family: 'Saira', sans-serif;
    font-weight: bold;
    font-size: 20px;
   }

   .reviewer-title{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: 'Saira', sans-serif;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 50px;
   }

   .contact-page-big-cont{
     position: relative;
     left: 100%;
     margin-top: 75px;
     margin-bottom: 75px;
     background: #fff;
     height: auto;
     box-shadow:  0 0 10px  rgba(0,0,0,0.6);
     -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
     -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
     -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
     transition: 2s;
     -webkit-transition: 2s;
     -o-transition: 2s;
     -moz-transition: 2s;
     
   }

   .contact-anime{
     left: 0px !important;
     transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
     -webkit-transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
     -o-transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
     -moz-transition-timing-function: cubic-bezier(0,1.55,.4,.2) !important;
   }

   .contact-page-h1, .services-page-h1{
    font-weight: bold;
    margin: 0;
    margin-bottom: 5px;
    position: relative;
    text-align: center;
    font-family: 'Saira', sans-serif;
    line-height: 1.3em;
   }

   .contact-cont{
     position: relative;
   }

   .contact-cont-2{
     position: relative;
   }

   .contact-cont-2 ul{
    position: relative; 
    padding: 0;
    margin-top: 50px;
    margin-bottom: 40px;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
   }

   .contact-cont-2 ul li{
     list-style-type: none;
     font-size: large;
     margin-top: 20px;
     font-family: 'Saira', sans-serif;
     color: grey;
   }

   .contact-cont-2 ul li i{
     font-size: x-large;
     color: darkcyan;
     margin-right: 20px;
   }

   .contact-message{
     position: relative;
     margin-top: 20px;
     font-size: large;
     font-family: 'Saira', sans-serif;
     text-align: center;
   }

   .contact-form{
     position: relative;
  
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
     margin-top: 30px;
     height: 300px;

   }

   .contact-form-input{
     width: 80%;
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     height: 50px;
     background: transparent;
     border: none;
     border-bottom: 3px solid violet;
     font-size: medium;
     font-family: 'Saira', sans-serif;
     margin-bottom: 20px;
     color: grey;
   }

   .contact-form-input:focus{
     outline: none;
     transition: 0.5s;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     -moz-transition: 0.5s;
     font-size: small;
     border-bottom: 3px solid cyan;
     color: silver;
   }

   .contact-form-btn{
     position: relative;
     width: 150px;
     height: 40px;
     left: 25%;
     transform: translateX(-25%);
     margin-top: 20px;
     border: none;
     background: transparent;
     border: 2px solid cyan;
     font-family: 'Saira', sans-serif;
     font-size: medium;
     font-weight: bold;
   }

   .contact-form-btn:hover{
    box-shadow:  0 0 40px  cyan;
    -moz-box-shadow: 0 0 40px  cyan;
    -webkit-box-shadow: 0 0 40px  cyan;
    -o-box-shadow: 0 0 40px  cyan;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    -moz-transition: 0.5s;
   }

/* Image Slider */
  
.blog-page-big-cont{
  position: relative;
   width: 100%;
   height: 70vh;
   background: #fff;
   margin-top: 75px;
 }
 
 .left-wall{
   position: absolute;
   width: 5.02%;
   height: 90%;
   left: 0;
   z-index: 3;
   background: white;
   bottom: 0;
 }
 
 .right-wall{
   position: absolute;
   width: 5.02%;
   height: 90%;
   background: white;
   right: 0;
   z-index: 3;
   bottom: 0;
 }
 
 .full-img-cont{
   width: 90%;
   height: 90%;
   position: relative; 
   left: 50%;
   top: 30%;
   transform: translate(-50%, -30%);
 }
 
 .imgs-cont{
   left: 0;
   position: relative;
   width: 200%;
   height: 90%;
   background: white;
   -webkit-transition: 2s;
   transition: 2s;
   -o-transition: 2s;
   -moz-transition: 2s;
   top: 28%;
   transform: translateY(-30%);
 }
 
 .img-cont{
  width: 16.269%;
  height: 100%;
  float: left;
  margin-right: 0.3980%; /* 8px on lg screen */
 }

 .mobile-blog{
   height: auto;
 }

 .mobile-blog-title-cont{
   background: #fff;
   margin: 0;
 }

 .mobile-blog-h1{
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  font-family: 'Saira', sans-serif;
  line-height: 1.3em;
  margin-top: 15px;
 }

 .mobile-blog-line{
  position: relative;
  width: 100px;
  height: 7px;
  background: linear-gradient(to right, cyan, violet);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  margin-bottom: 25px;
 }

 .mobile-blog-cont{
  width: 100%;
  height: auto;
  background: white;
 }

 .mobile-blog-img{
   position: relative;
   width: 90%;
   height: 50%;
   left: 50%;
   transform: translateX(-50%);
 }

 .mobile-blog-title{
  position: relative; 
  text-align: center;
  font-family: 'Saira', sans-serif;
  font-weight: bold;
  color: darkcyan;
 }

 .mobile-blog-paragraph{
  position: relative;
  font-family: 'Saira', sans-serif;
  width: 70%;
  left: 25%;
  transform: translateX(-25%);
 }

 .mobile-blog-btn{
  position: relative;
  background: transparent;
  border: none;
  border: 2px solid darkcyan;
  width: 200px;
  font-weight: bold;
  margin-top: 10px;
  left: 50%;
  transform: translateX(-50%);
 }

 .mobile-blog-small-cont{
  position: relative;
  bottom: 0;
  width: auto;
  padding: 0;
  margin-left: 50px;
  margin-top: 10px;
}
 
 
 .slider-img{
   width: 100%;
   height: 100%;
 }

 .blog-h1{
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  font-family: 'Saira', sans-serif;
  line-height: 1.3em;
 }

 .blog-img{
   position: relative;
   width: 100%;
   height: 50%;
   left: 50%;
   transform: translateX(-50%);
 }

 .blog-title{
  font-family: 'Saira', sans-serif;
  font-weight: bold;
  color: darkcyan;
  text-align: center;
 }

 .blog-paragraph{
  font-family: 'Saira', sans-serif;
 }

 .blog-btn{
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   background: transparent;
   border: none;
   border: 2px solid darkcyan;
   width: 200px;
   font-weight: bold;
   margin-top: 3px;
 }

 .blog-btn:hover, .mobile-blog-btn:hover{
  box-shadow:  0 0 40px  darkcyan;
  -moz-box-shadow: 0 0 40px  darkcyan;
  -webkit-box-shadow: 0 0 40px  darkcyan;
  -o-box-shadow: 0 0 40px  darkcyan;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
 }

 .blog-small-cont{
   position: relative !important;
   top: 5% !important;
   margin-left: 10px;
   padding: 0 !important;
 }

 .blog-small-cont-li{
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Saira', sans-serif;
  font-size: 12px !important;
  font-weight: bold;
 }

 .blog-small-cont-li-full-view{
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Saira', sans-serif;
  font-size: 15px !important;
 }

 .blog-i{
  color: darkcyan;
 }

 .blog-full-view{
   position: fixed;
   width: 100%;
   height: 100vh;
   opacity: 0.93;
   background: black;
   left: 0;
   top: 0;
   z-index: 200;
   overflow-y: auto;
   clip-path: polygon(0 48%, 100% 48%, 100% 52%, 0 52%);
   left: -100%;
 }

 #blog-close-btn{
  position: absolute;
   color: cyan;
   z-index: 200;
   font-size: x-large;
   right: 3%;
   top: 3%;
   cursor: pointer;
 }

 .main{
  position: relative;
  width: 100%;
  height: auto;
  background: black;
}

.blog-img-cont{
  position: relative;
  width: 80%;
  height: 50vh;
  left: 50%;
  transform: translateX(-50%);
  box-shadow:  0 0 20px  cyan;
  -moz-box-shadow: 0 0 20px  cyan;
  -webkit-box-shadow: 0 0 20px  cyan;
  -o-box-shadow: 0 0 20px  cyan;
}

.blog-img-cont img{
  width: 100%;
  height: 100%;
}

.blog-small-cont-mobile{
   position: absolute !important;
   bottom: 0 !important;
   width: auto !important;
   padding: 0 !important;
   right: 10px !important;
   background: white !important;
   padding-left: 10px !important;
   border-radius: 5px !important;
 }

 .blog-small-cont-li{
   display: inline-block;
   margin-right: 10px;
   font-family: 'Saira', sans-serif;
   font-size: 15px;
 }

 .blog-i{
   color: darkcyan;
 }

 .blog-full-view-title{
  position: relative;
  color: darkcyan;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
  margin-top: 50px;
  font-family: 'Saira', sans-serif;
}
.divider-line{
  position: relative;
  width: 100px;
  height: 5px;
  background: linear-gradient(to right, violet, cyan);
  border-radius: 25px;
  left: 15%;
  transform: translateX(-15%);
}

.main .paragraph{
  position: relative;
  color: silver;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 20px;
  font-family: 'Saira', sans-serif;
  font-size: medium;
  line-height: 1.6em;
}

.main .quote{
  position: relative;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
  font-size: medium;
  margin-top: 20px;
  color: white;
}

.quote-span{
  color: darkcyan;
  font-size: large;
}

.divider{
  position: relative;
  width: 80%;
  height: 2px;
  background: grey;
  margin-top: 40px;
  margin-bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.comments-cont{
  position: relative;
  width: 80%;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}

.comments-no{
  position: relative;
  color: darkcyan;
  width: 100%;
  top: 5%;
  transform: translateY(-5%);
  margin-bottom: 40px;
  font-family: 'Saira', sans-serif;
}

.commenter-info-cont{
  position: relative;
  width: 250px;
  height: 150px;
  top: 10%;
  transform: translateY(-10%);
  margin-left: 0;
}

.img-name{
  position: relative;
  width: 50%;
  height: 100%;

  float: left;
}

.img-name img{
  position: relative;
  width: 70%;
  height: 60%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 25px;
  margin-top: 20px;
  box-shadow:  0 0 10px  cyan;
  -moz-box-shadow: 0 0 10px  cyan;
  -webkit-box-shadow: 0 0 10px  cyan;
  -o-box-shadow: 0 0 10px  cyan;
}

.img-name p{
  font-size: small;
  text-align: center;
  margin-top: 10px;
  font-family: 'Saira', sans-serif;
  font-weight: bold;
  color: white;
}

.date-reply{
  position: relative;
  width:50%;
  height: 100%;
  float: left;
  color: white;
}

.date{
  position: relative;
  font-size: small;
  text-align: center;
  margin-top: 50px;
  font-family: 'Saira', sans-serif;
}

.reply-btn{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 25px;
  font-family: 'Saira', sans-serif;
  background: transparent;
  border: none;
  border: 2px solid darkcyan;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
}

.reply-btn:focus{
  outline: none;
}

.reply-btn:hover{
  box-shadow:  0 0 10px  cyan;
  -moz-box-shadow: 0 0 10px  cyan;
  -webkit-box-shadow: 0 0 10px  cyan;
  -o-box-shadow: 0 0 10px  cyan;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
}

.commenter-text{
  position: relative;
  margin-top: 0;
  letter-spacing: 0.6px;
  font-family: 'Titillium Web', sans-serif;
  font-size: small;
  width: 90%;
  color: grey;
}

.replier-cont{
  position: relative;
  width: 80%;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 20px;
}

.replier-info-cont{
  position: relative;
  width: 250px;
  height: 150px;
  top: 10%;
  transform: translateY(-10%);
  margin-left: 30px;
}

.replier-text{
  position: relative;
  margin-bottom: 50px;
  letter-spacing: 0.6px;
  font-family: 'Titillium Web', sans-serif;
  font-size: small;
  width: 90%;
  color: grey;
  margin-left: 30px;
}

.comments-form-cont{
  position: relative;
  width: 80%;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  border-top: 2px solid #666;
  margin-top: 40px;
}

.comments-form-cont h1{
  position: relative;
  top: 5%;
  transform: translateY(-5%);
  color: darkcyan;
  font-family: 'Saira', sans-serif;
}

.comments-form-cont form{
  position: relative;
  width: 100%;
  height: auto;

  margin-left: 20px;
  margin-top: 40px;
}

.comments-form-cont input{
  width: 100%;
  height: 50px;
  font-size: large;
  font-family: 'Saira', sans-serif;
  margin-top: 10px;
  background: transparent;
  border: none;
  border-bottom: 4px solid darkcyan;
  
}

.comments-form-cont input::placeholder{
  color: white;
}

.comments-form-cont input:focus{
  outline: none;
  color: white;
}

.comments-form-cont button{
  position: relative;
  width: 150px;
  height: 40px;
  font-size: medium;
  font-family: 'Saira', sans-serif;
  background: transparent;
  border: none;
  border: 2px solid darkcyan;
  margin-top: 30px;
  margin-left: 30px;
  color: white;
}

.comments-form-cont button:hover{
  border: 2px solid cyan;
}

 .services-page-big-cont{
  margin-top: 75px;
  background: #fff;
  height: auto;
  box-shadow:  0 0 10px  rgba(0,0,0,0.6);
  -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
  -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
  -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
}

 .services-cont{
   height: auto;
   background: #fff;
   margin-bottom: 75px;
   margin-top: 20px;
  
 }

 .service-cont{
   position: relative;
   width: 100%;
   height: auto;
   background: transparent;
   clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
   margin-top: 15px;
 }

 .service-icon{
   font-size: xx-large;
   left: 50%;
   transform: translateX(-50%);
   margin-top: 5px;
   color: darkcyan;
 }

 .service-title{
   margin: 0;
   text-align: center;
   font-size: x-large;
   font-family: 'Saira', sans-serif;
   margin-top: 10px;
 }

 .service-line{
  position: relative;
  width: 50px;
  height: 4px;
  background: linear-gradient(to right, cyan, violet);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  margin-top: 10px;
 }

 .service-para{
  position: relative;
  margin: 0;
  font-size: medium;
  font-family: 'Saira', sans-serif;
  margin-top: 30px;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: grey;
 }

 .footer{
   background: white;
   height: auto;
   box-shadow:  0 0 20px  darkviolet;
   -moz-box-shadow: 0 0 20px  darkviolet;
   -webkit-box-shadow: 0 0 20px  darkviolet;
   -o-box-shadow: 0 0 20px  darkviolet;
   
 }

 #ul-smedia{
   position: relative;
   width: 360px;
   height: 30px;
   left: 50%;
   transform: translate(-50%);
 }

 #ul-smedia li{
   position: relative; 
   margin: 0;
   padding: 0;
   height: 30px;
   top: 50%;
   transform: translate(-50%, -50%);
 }

 #ul-smedia li a{
  padding-bottom: 0px;

  
 }

 #ul-smedia li a:hover{
   color: white;
   transition: 0.5s;
   -webkit-transition: 0.5s;
   -o-transition: 0.5s;
   -moz-transition: 0.5s;
 }

 #ul-smedia li{
   margin-left: 1px;
   margin-right: 1px;
 }

 /* Loader Screen */

 .loader-screen{
   position: fixed;
   width: 100%;
   height: 100vh;
   background: violet;
   z-index: 500;
 }

 .loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid cyan;
  top: 50%;
  animation: loader 2s infinite ease;
  left: 50%;
  transform: translateX(-50%);
  transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: white;
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

/* Loader Screen */

/* Dark Mode Button */

.dark-mode-cont{
  position: fixed;
  width: auto;
  height: auto;
  background: silver;
  z-index: 400;
  top: 30%;
  right: -70px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
  z-index: 7;
}

.dark-mode-anime{
  right: 0;
  transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
}

.dark-mode-cont i{
  font-size: x-large;
  float: left;
  margin-right: 10px;
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  animation: 4s rotation infinite;
}

.dark-mode-btn{
  width: 60px;
  height: 30px;
  float: left;
  border-radius: 25px;
  border: 2px solid grey;
  background: white;
  margin-top: 5px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  margin-right: 5px;
}

.btn-circle{
  position: relative;
  width: 50%;
  height: 100%;
  border-radius: 25px;
  border: 3px solid grey;
  left: 100%;
  transform: translateX(-100%);
  background: linear-gradient(to right, violet, cyan);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
}

.toggle-btn{
  left: 0%;
  transform: translateX(0%);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
}

.toggle-btn-cont{
  background: black;
}

@keyframes rotation {
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}

/* Dark Mode Button */

 /* Some Mobile size changes */

 @media screen and (max-width: 991px){

  .blog-page-big-cont{
    display: none;
  }

 }