@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.a-link{
    text-decoration: none !important;
    margin-bottom: 20px;
}
.a-link:hover{
    text-decoration: none !important;
}

.social-link{
    border: 3px solid black;
    margin-top: 50px;
    text-decoration: none !important;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 15px 15px 5px rgb(206, 203, 203);
}

.social-link img{
    width: 100%;
    height: 160px;
    box-shadow: 1px 5px 12px 0px rgb(83, 83, 83);
}

.social-link:hover{
    text-decoration: none !important;
    opacity: 0.8;
    transform: scale(1.1,1.1);
    transition: 0.9s ease-in-out;
}

.icon-class{
    margin-top: -120px;
    text-decoration: none;
    padding:0px 20px;
    color: white;
    font-size: 50px;
    text-shadow: 3px 3px 2px black;
}
.icon-class:hover{
    text-decoration: none !important;
}

.word-class h3{
    margin-top: 60px;
    text-decoration: none;
    color: black;
    font-size: 40px !important;
    font-family: 'Times New Roman', Times, serif;
    font-style:italic;
    letter-spacing: 5px;
    width: 100% !important;
    text-transform: capitalize !important;
}
.word-class:hover{
    text-decoration: none !important;
}

.follow-class h3{
    text-decoration: none;
    text-align: center;
    color: black;
    font-size: 25px !important;
    font-family: 'Times New Roman', Times, serif;
    font-style:italic;
    letter-spacing: 5px;
    margin-top: 40px;
    border-bottom: 2px solid black;
    width: 80%;
    padding: 5px;
    margin-left: 25px;
}
.follow-class h3:hover{
    text-decoration: none !important;
}

.controls-top{
    margin-left: 45% !important;
}

.btn-floating{
    font-size: 70px !important;
    padding: 20px;
    color: black;
}
.controls-top:hover{
    text-decoration: none !important;
}

.fa-angle-double-left{
    position: absolute !important;
    left: -50px !important;
    top:40%;
}
.fa-angle-double-right{
    position: absolute !important;
    right: -50px !important;
    top:40%;
}

.card-title{
    text-decoration: none;
    text-transform: capitalize;
    text-align: center;
    color: black;
    font-size: 25px !important;
    font-family: 'Times New Roman', Times, serif;
    font-style:italic;
    letter-spacing: 5px;
    border-bottom: 2px solid black;
    padding: 5px;
}

.card-text{
    text-decoration: none;
    text-align: justify;
    color: black;
    font-family: 'Times New Roman', Times, serif;
    font-style:italic;
    padding: 5px;
}

.btn-primary{
    background:linear-gradient(to right, rgb(0,0,0), rgb(0, 128, 128)) !important;
    border-radius: 0px !important;
    border: none !important;
    padding:8px 20px !important;
    font-size: 16px !important;
    width: 100%;
    font-weight: 300 !important;
    letter-spacing: 2px !important;
    color: white !important;
}

.btn-primary:hover{
    background:linear-gradient(to right,  rgb(0, 128, 128),rgb(0,0,0)) !important;
    color: white !important;
    transform: scale(0.9,0.9) !important;
    transition: 0.5s !important;
}

.preview-card {
    position: relative;
    margin: 15px;
    background: #fff;
    box-shadow: 0px 3px 10px rgba(34, 35, 58, 0.2);
    padding: 30px 25px 30px;
    /* border-radius: $preview-card-border-radius; */
    height: auto;
    width: auto;
    transition: all 0.3s;
}
    .preview-card__item {
      display: flex;
      align-items: center;
    }
  
  
    .preview-card__img {
      width: 300px;
      height: 300px;
      /* background-image: $preview-card-image-bg; */
      box-shadow: 0px 3px 10px 1px rgba(56, 252, 209, 0.2);
      transform: translateX(-80px);
      overflow: hidden;
    }
    .preview-card__img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.4;
      }
  
      .pre-img {
        width: 100%;
        height: 100%;
        display: block;
        opacity: 1;
        transition: all 0.3s;
      }
  
  
      .preview-card__content {
      width: 90%;
    }
     
  
      .preview-card__code {
      color: #799092;
      margin-bottom: 15px;
      display: block;
      font-weight: 500;
    }
  
    .preview-card__title {
      margin-bottom: 20px;
      text-decoration: none;
      text-transform: capitalize;
      text-align: left;
      color: black;
      font-size: 25px !important;
      font-family: 'Times New Roman', Times, serif;
      font-style:italic;
      letter-spacing: 5px;
      border-bottom: 2px solid black;
      padding: 5px;
    }
  
    .preview-card__text {
      color:black;
      margin-bottom: 30px;
      font-size: 16px !important;
    }

    .preview-card__text ol{
        text-align: left !important;
        list-style:decimal;
    }

    .preview-card__text ol li{
        text-align: left !important;
        font-weight: 400 !important;
        text-transform: capitalize;
        letter-spacing: 2px;
        font-size: 18px;
    }

    .preview-card__list ul{
        margin-top: 40px !important;
        list-style:circle;
    }

    .preview-card__list ul li{
      color:black !important;
      font-weight:normal !important;
      margin-bottom: 20px;
      font-size: 15px !important;
      text-align: justify;
      text-transform: none !important;
      letter-spacing: normal !important;
    }

    .preview-card__list ul li b{
        text-align: left !important;
        text-transform: capitalize;
        letter-spacing: 2px;
        font-size: 18px;
    }



    .first-letter{
        font-size: 30px !important;
        font-family: 'Times New Roman', Times, serif !important; 
    }
  
    .preview-card__button {
      display: inline-flex;
      background:linear-gradient(to right, rgb(0,0,0), rgb(0, 128, 128)) !important;
      padding: 15px 35px;
      margin-bottom: 30px;
      border-radius: 50px;
      color: white;
      /* box-shadow: $preview-card-button-shadow; */
      text-decoration: none;
      font-weight: 500;
      justify-content: center;
      text-align: center;
      letter-spacing: 1px;
    }
      .preview-card__button:hover {
        text-decoration: none;
        opacity: 0.8; 
        color: white !important;
        text-decoration: none !important;
      }