*{
  box-sizing: border-box;
}
body{
    
    background: linear-gradient(to right, #434343 0%, black 100%);
    
    
}

 .icone{
    color:#E0B01B;
    background-color :#292F2A;
    padding-right :8px;
    font-size: 30px;
}
.icone-1{
    color :#C56441;
    background-color :#292F2A;
    font-size: 30px;
}
.icone-2{
    color :#236F8F;
    background-color :#292F2A;
    font-size: 30px;
}
.icone-3{
    color :#6D5EC6;
    font-size: 30px;
    background-color :#292F2A;
}
.icone-4{
    color: #DFE2E4;
    font-size: 30px;
    background-color :#292F2A;
}
.icone-5{
    color:#77A96F;
    font-size: 30px;
    background-color :#292F2A;
}
.icone-6{
    color: #7FA180;
    font-size: 30px;
    background-color :#292F2A;
}
.icone-7{
    color: #B7C2CD;
    background: #292f2a;
    
    font-size: 30px;
}
.htm {
      background: #292f2a;
  width: 6rem;
  margin-bottom :14px;

  border: 4px solid #575858;
  box-shadow: 0 6px 10px rgba(207, 212, 222, 1);
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
}
.htm:hover{
  transform: translateY(-10px);
}

.don{
  color: #ffff00;
  text-align :center;
  border :2px solid #3D4D3E;
  background-color: #2F4744;
    box-shadow: 0 6px 10px rgba(207, 212, 222, 1);
  width: 80px;
  margin: 0 auto;
  height: 80px;
border-radius :8px;
font-size :35px;
  padding :8px 10px;
  align-items: center;
    transition: all 0.3s ease;
}
.don:hover {
    transform: translateY(-10px);
  
}
h2{
  color:#CFCA7D;
  margin-top :12px;
}
.fitti{
  text-align: center;
  color: whitesmoke;
}
.fotti{
  text-decoration: none;
}
.bip{
text-align :center;
}
.box-case{
  border :2px solid #ADB0CD;
  background-color :#8F92BA;
  box-shadow: 0 6px 10px rgba(207, 212, 222, 1);
  border-radius: 10px;
  text-align: center;
  transition: all 0.3s ease;
   box-sizing: content-box;
   width: 350px;
   height: 600px;
}
  
.fin{
  font-size :20px;
  border :1px solid #36384E;
  
  background :#596F8D;
  box-sizing: border-box;
  border-radius :30px;
  padding-top :12px;
  
  
}
.lin{
  font-size :25px;
}
.joli{
  color: rgb(154, 176, 234);
  padding-left: 8px;
  font-size: 30px;
}
.joli:hover{
  color: #11cdef;
}
.jol{
  text-decoration: none;
  color: black;
}
.jol:hover{
  color :#CFC82C;
}
        
.nav-link{
    color: beige;
    text-decoration: none;
}
.nav-link:hover {
    color: aqua;
}
li{
    font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.img-fluid{
    border-radius: 50%;
}
.naam{
    color:rgb(232, 197, 146);
}
.btn-grad {
    background-image: linear-gradient(to right, #403B4A 0%, #E7E9BB 51%, #403B4A 100%);
    margin: 8px ;
    padding: 5px 25px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }
       
 .btnn-grad {
    background-image: linear-gradient(to right, #1F1C2C 0%, #928DAB 51%, #1F1C2C 100%);
    margin: 8px;
    padding: 5px 25px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btnn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }
   .bttn{
     display: flex;
     justify-content: space-evenly;
     text-decoration: none;
   }
.line-break{
    border-bottom: 1px solid #c3aeaf;
    width: 200px;
    margin: 0 auto;
}
.lik{
  
    box-shadow: 3px 2px 4px;
    border-radius: 15px;
    border: 2px solid wite-space;
    background-color: #272627;
    cursor: pointer;
}
h1{
  text-align: center;
}
h2{
    text-align: center;
    color :white;
    font-family: "Roboto", sans-serif;
font-weight: 500;
font-style: italic;
  }
  .kip{
   display :flex;
   justify-content: center;
    margin:0 auto;
    font-family: "Poppins", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  font-style: italic;

  }
  .kat{
    color: green;
  }
  .iconbox {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background-color: #033f47;
    color: white;
    border-radius: 14px;
  }
  .shadow-effect {
  transition: all 0.5s;
}
.shadow-effect:hover {
  box-shadow: -6px 6px 0 0 #e0f780;
}
.programming {
  margin-top: 40px;
}
.programming h4 {
  font-size: 20px;
}
.programming .bg-base {
  width: 150px;
  height: 150px;
  text-align: center;
}
.programming .iconbox {
  margin: 0 auto;
}
    .card-img-top{
             transition: all 0.2s ease;
             cursor: pointer;
           }
           .card-img-top:hover{
             box-shadow :5px 6px 6px 2px #414440;
             transform: scale(1,1);
           }


.containerr {
    max-width: 650px;
    margin: 50px auto;
}
p {
    font-weight: 300;
    line-height: 1.5;
    font-size: 14px;
    opacity: .8;
}

.timeline {
    position: relative;
    padding-left: 0;
    margin: 0 ;
    color: white;

    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: #27293d;
    }
    .timeline-container {
        position: relative;
        margin-bottom: 2.5rem;;

        .timeline-icon {
            position: absolute;
            left: -88px;
            top: 4px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            text-align: center;
            font-size: 2rem;
            background: #4f537b;

            i {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
             img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .timeline-body {
            background: #27293d;
            border-radius: 3px;
            padding: 20px 20px 15px;
            box-shadow: 1px 3px 9px rgba(0, 0, 0, .1);

            &:before {
                content: '';
                background: inherit;
                width: 20px;
                height: 20px;
                display: block;
                position: absolute;
                left: -10px;
                transform: rotate(45deg);
                border-radius: 0 0 0 2px;
            }

            .timeline-title {
                margin-bottom: 1.4rem;
}
.timeline-title {
                margin-bottom: 1.4rem;

                .badge {
                    background: #4f537b;
                    padding: 4px 8px;
                    border-radius: 3px;
                    font-size: 12px;
                    font-weight: bold;
                }
            }

            .timeline-subtitle {
                font-weight: 300;
                font-style: italic;
                opacity: .4;
                margin-top: 16px;
                font-size: 11px;
            }
        }
        &.primary {
            .badge,
            .timeline-icon {
                background: #1d8cf8 !important;
            }
        
        &.info {
            .badge,
            .timeline-icon {
                background: #11cdef !important;
            }
        }
         
        &.success {
            .badge,
            .timeline-icon {
                background: #00bf9a !important;
            }
        }

        
        &.warning {
            .badge,
            .timeline-icon {
                background: #ff8d72 !important;
            }
        }
          
        &.danger {
            .badge,
            .timeline-icon {
                background: #fd5d93 !important;
            }
        }

    



.author{
 font-family: inherit;
 padding: 3em;
 text-align: center;
 width: 100%;
  color: white;}
 
 a:link,
 a:visited{
  color: white;
  &:hover{
   text-decoration: none;
  }
 }

 .btn:link,
 .btn:visited{
  margin-top: 1em;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  font-weight: 100;
  color: white;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: black;
  padding: 1.5em 2rem;
  border-radius: 1em;
  transition: .5s all;
  &:hover,
  &:focus,
  &:active{
   background-color: lighten(black, 10%);
  }}