/* || Loding Screen */

 #loader-wrapper {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;

     background-color: #e63946;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: opacity 3s ease-out;
     z-index: 1
 }

 .loader {
     display: inline-block;
     width: 30px;
     height: 30px;
     position: relative;
     border: 4px solid #Fff;
     animation: loader 2s infinite ease;
 }

 .loader-inner {
     vertical-align: top;
     display: inline-block;
     width: 100%;
     background-color: #fff;
     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%;
     }
 }




 #myDiv {
     display: none;
 }



 /* || General CSS */

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

 body {
     margin: 0px;
     font-family: Montserrat, sans-serif;
     padding: 0px;
     overflow-x: hidden;
 }

 .container {
     padding-left: 300px;
     padding-right: 300px;
 }

 .section {
     display: block;

 }

 .blur {
     filter: blur(10px);
     pointer-events: none;
     user-select: none;

 }

 /* Laptops */

 @media screen and (max-width: 1500px) {
     .container {
         padding-left: 100px;
         padding-right: 100px;
     }
 }

 /* Tablets */

 @media screen and (max-width: 1024px) {
     .container {
         padding-left: 50px;
         padding-right: 50px;
     }
 }



 /* Mobiles */
 @media screen and (max-width: 880px) {
     .container {
         padding-left: 30px;
         padding-right: 30px;
     }
 }


 /* || NavBar */
 .topnav {
     overflow: hidden;
     background-color: snow;
     position: fixed;
     top: 0;
     width: 100%;
     display: block;
     transition: top 0.3s ease;
     z-index: 1;
     font-weight: 400;
 }

 .topnav a {
     border-bottom: solid 3px snow;
     float: right;
     display: block;
     color: grey;
     text-align: center;
     padding: 21px 60px;
     text-decoration: none;
     font-size: 17px;
 }

 .topnav a:hover {
     color: rgb(252, 53, 101);
     border-bottom: 3px solid rgb(252, 53, 101);
     transition: 0.2s ease;
 }

 .topnav a.active {
     color: rgb(252, 53, 101);
 }

 .topnav .icon {
     display: none;
 }

 .logo {
     width: 220px;
     margin: 9px;
     padding: 0 10px;
 }


 @media screen and (max-width: 880px) {
     .topnav a:not(:first-child) {
         display: none;
         color: snow;
         border-top: solid 2px rgb(252, 53, 101);
         border: none;
     }

     .topnav a.icon {
         float: right;
         display: block;
         color: grey;
         border: none;
     }
 }

 @media screen and (max-width: 880px) {
     .topnav.responsive {
         position: relative;
     }

     .topnav.responsive .icon {
         position: absolute;
         right: 0;
         top: 0;
         background-color: snow;
     }

     .topnav.responsive a {
         float: none;
         display: block;
         text-align: left;
         background-color: rgb(42, 40, 46);
         border-bottom: solid 0px;
         z-index: 1;
     }
 }

 /* || Landing Page */

 #header-video {
     position: fixed;
     right: 0;
     bottom: 0;
     min-width: 100%;
     min-height: 100%;
     z-index: -1;
 }

 .header {
     text-align: center;
     background-size: cover;
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
 }

 .header .header-overlay {
     text-align: left;
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.4);
     background-color: cover;

 }

 .header .header-overlay .header-text {
     padding: 340px 0px 340px;
     color: snow;
 }

 .header-text-1 {
     font-size: 25px;
     margin: 0px;
     color: rgb(252, 53, 101);
     -webkit-animation: fadeInDown 1s;
     -moz-animation: fadeInDown 1s;
     /* Firefox < 16 */
     -ms-animation: fadeInDown 1s;
     /* Internet Explorer */
     -o-animation: fadeInDown 1s;
     /* Opera < 12.1 */
     animation: fadeInDown 1s;
     animation-fill-mode: both;

 }

 .header-text-2 {
     font-size: 80px;
     margin: 0px;
     font-weight: bold;
     -webkit-animation: fadeInDown 1s;
     -moz-animation: fadeInDown 1s;
     /* Firefox < 16 */
     -ms-animation: fadeInDown 1s;
     /* Internet Explorer */
     -o-animation: fadeInDown 1s;
     /* Opera < 12.1 */
     animation: fadeInDown 1s;
     animation-fill-mode: both;

     
 }

.header-text-2:after {
    content: " ";
    border: 1px solid crimson;
    margin-top: 15px;
    margin-bottom: 20px;
    display: block;
    max-width: 50px
}

 @keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-40px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }

 @-moz-keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-20px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }

 @-webkit-keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-20px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }


 @-o-keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-20px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }


 @-ms-keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-20px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }


 .header-text-3 {
     font-size: 25px;
     margin: 0px;
     color: snow;
     -webkit-animation: fadeInUp 1s;
     -moz-animation: fadeInUp 1s;
     /* Firefox < 16 */
     -ms-animation: fadeInUp 1s;
     /* Internet Explorer */
     -o-animation: fadeInUp 1s;
     /* Opera < 12.1 */
     animation: fadeInUp 1s;
     animation-fill-mode: both;
 }

 .header-btn {
     text-decoration: none;
     border: 2px solid crimson;
     background-color: transparent;
     color: snow;
     border-radius: 2px;
     text-align: center;
     font-size: 16px;
     cursor: pointer;
     width: 200px;
     height: 50px;
     margin-top: 20px;
     margin-right: 10px;
     transition: border 0.7s ease;
     box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
         0 6.7px 5.3px rgba(0, 0, 0, 0.048),
         0 12.5px 10px rgba(0, 0, 0, 0.06),
         0 22.3px 17.9px rgba(0, 0, 0, 0.072),
         0 41.8px 33.4px rgba(0, 0, 0, 0.086),
         0 100px 80px rgba(0, 0, 0, 0.12);
     -webkit-animation: fadeInUp 1s;
     -moz-animation: fadeInUp 1s;
     /* Firefox < 16 */
     -ms-animation: fadeInUp 1s;
     /* Internet Explorer */
     -o-animation: fadeInUp 1s;
     /* Opera < 12.1 */
     animation: fadeInUp 1s;
     animation-fill-mode: both;
 }

 .header-btn:hover {
     border: 2px solid crimson;
     background-color: crimson;
     border-radius: 2px;
     transition: border 0.7s ease;
     transition: background-color 0.7s ease;
     transition: border 0.7s ease-out;
     transition: background-color 0.7s ease-out;
 }


 @keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(40px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }

 @-moz-keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(20px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }

 @-webkit-keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(20px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }


 @-o-keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(20px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }


 @-ms-keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(20px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }

 .header-row {
     display: flex;
 }

 .header-column1 {
     flex: 80%;
     padding: 10px;
 }

.header-column2 {
     flex: 20%;
     padding: 10px;
 }

 @media screen and (max-width: 880px) {
     .header-btn {
         display: block;
     }
 }

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

     .header-text-1,
     .header-text-3 {
         font-size: 20px;
         text-align: left;
     }
 }

 @media screen and (max-width: 880px) {
     .header-text-2 {
         font-size: 50px;

     }
 }

 /* || Seperator */

 .seperator {
     background-color: rgb(39, 38, 43);
     padding: 50px;
 }

 /* || SVG Curve */
 #curve {
     width: 100%;
     margin-bottom: -10px;
 }

 .cls-1 {
     fill: white;
 }

 #curve1 {
     width: 100%;
     transform: rotate(180deg);
     margin: -10;
 }

 #curve1 path {
     fill: white;
 }

 /* || Introduction */

 .about-me {
     display: block;
     position: relative;
     padding-bottom:
         box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.12);
     background-color: snow;
 }

 /* ||| About Me */

 .about-me .intro-row {
     display: table;
     border-spacing: 0px;
     padding-top: 70px;
 }

 .about-me .intro-row .intro-column-left {
     display: table-cell;
     width: 40%;
     text-align: left;
     vertical-align: top;
     padding-top: 30px
 }

 .about-me .intro-row .intro-column-left .intro-header {
     text-align: left;
     font-size: 60px;
     color: black;
     font-weight: 400;
     margin: 0px;
 }

 .about-me .intro-row .intro-column-left .intro-text {
     font-size: 25px;
     color: rgb(94, 94, 94);
     font-weight: 500;
 }

 .about-me .intro-row .intro-column-left .intro-button {
     border: 0px solid;
     border-bottom: 3px solid black;
     background-color: transparent;
     color: black;
     font-size: 23px;
     font-weight: bold;
     text-align: left;
     padding: 0px 0px 0px;
     font-size: 16px;
     cursor: pointer;
     width: 200px;
     height: 50px;
     margin-top: 10px;
     transition: border 0.7s ease;
     box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
         0 6.7px 5.3px rgba(0, 0, 0, 0.048),
         0 12.5px 10px rgba(0, 0, 0, 0.06),
         0 22.3px 17.9px rgba(0, 0, 0, 0.072),
         0 41.8px 33.4px rgba(0, 0, 0, 0.086),
         0;

 }

 .about-me .intro-row .intro-column-left .intro-button:hover {
     border-bottom: 10px solid black;
     transition: border 0.7s ease-in;
     transition: background-color 0.7s ease-in;
     transition: color 0.4s ease;
     transition: border 0.7s ease-out;
     transition: background-color 0.7s ease-out;
     transition: color 0.4s ease-out;
 }

 .about-me .intro-row .intro-column-right {
     display: table-cell;
     width: 0%;
     text-align: center;
     vertical-align: middle;
 }

 .about-me .intro-row .intro-column-right .intro-img {
     width: 450px;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

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

 .about-me {
     padding-bottom: 0px;
 }

 .about-me .intro-row {
     display: flex;
 }

 .about-me .intro-row .intro-column-right {
     width: 100%;
 }

 .about-me .intro-row .intro-column-right .intro-img {
     display: block;
 }

 .about-me .intro-row .intro-column-left {
     width: 100%;
     padding: 10px;
 }

 .about-me .intro-row .intro-column-left .intro-button {
     display: block;
     margin-bottom: 30px;
 }

 @media screen and (max-width: 1024px) {
     .about-me {
         padding-bottom: 0px;
     }

     .about-me .intro-row {
         display: flex;
     }

     .about-me .intro-row .intro-column-right {
         width: 100%;
     }

     .about-me .intro-row .intro-column-right .intro-img {
         display: block;
     }

     .about-me .intro-row .intro-column-left {
         width: 100%;
         padding: 0px;
     }

     .about-me .intro-row .intro-column-left .intro-header {
         font-size: 60px;
     }

     .about-me .intro-row .intro-column-left .intro-text {
         font-size: 25px;
     }

     .about-me .intro-row .intro-column-left .intro-button {
         display: block;
         margin-bottom: 30px;
     }
 }

 @media screen and (max-width: 880px) {
     .about-me {
         padding-bottom: 50px;
     }

     .about-me .intro-row {
         display: grid;
     }

     .about-me .intro-row .intro-column-right {
         width: 90%;
     }

     .about-me .intro-row .intro-column-right .intro-img {
         display: none;
     }

     .about-me .intro-row .intro-column-left {
         width: 80%;
     }

     .about-me .intro-row .intro-column-left .intro-header {
         font-size: 40px;
     }

     .about-me .intro-row .intro-column-left .intro-text {
         font-size: 20px;
     }

     .about-me .intro-row .intro-column-left .intro-button {
         display: none;
     }
 }

 .modal-content {
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 1;
     /* Sit on top */
     padding-top: 100px;
     /* Location of the box */
     left: 0;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */

     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.7);
     /* Black w/ opacity */
     top: 100%;
    opacity: 0;
    transition: top 0.4s, opacity 0.4s;
}
.modal-content.show {
    top: 0%;
    opacity: 1;
    display: block;
}



 .modal-content .cardContainer {
     position: relative;
     margin: auto;
     overflow: hidden;
     width: 100%;
  max-width: 1200px;
  height: auto;
     background-color: crimson;
     box-shadow: 5px 5px 15px;
     border-radius: 10px;

 }

 .cardContainer .cardRow {
     display: flex;
 }

 .cardContainer .cardRow .cardColumn1 {
     width: 33%;
     background-color: transparent;
 }

 .cardContainer .cardRow .cardColumn1 .cardImage {
     align-content: center;
     margin-top: 30px;
     text-align: center;
     margin-bottom: 0px;
     animation: fadeDown linear 1s;

 }

 @keyframes fadeDown {
     0% {
         opacity: 0;
         transform: translateY(-10px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }

 .cardContainer .cardRow .cardColumn1 .cardText {
     text-align: center;
     color: snow;
     animation: fadeUp linear 1s;

 }

 @keyframes fadeUp {
     0% {
         opacity: 0;
         transform: translateY(10px)
     }

     100% {
         opacity: 1;
         transform: translateY(0px)
     }
 }

 .cardContainer .cardRow .cardColumn1 .cardText .cardSubhead {
     font-weight: bold;
     padding: 0px;
     margin: 0px;
     line-height: 0px
 }

 .cardContainer .cardRow .cardColumn1 .cardText .cardSubhead {
     font-weight: normal;
     color: snow;
     font-size: 13px
 }

 .cardContainer .cardRow .cardColumn1 .cardIcons {
     padding-top: 25px;
     transition: 0.5s ease;

 }




 .cardContainer .cardRow .cardColumn1 .fa {
     padding: 6px;
     font-size: 20px;
     width: 20px;
     text-align: center;
     text-decoration: none;
     border-radius: 50%;
     transition: 0.5s ease;

 }

 .cardContainer .cardRow .cardColumn1 .fa:hover {
     transform: translateY(-5px);
     transition: 0.4s ease;


 }

 .cardContainer .cardRow .cardColumn1 .fab {
     padding: 6px;
     font-size: 20px;
     width: 20px;
     text-align: center;
     text-decoration: none;
     border-radius: 50%;
     transition: 0.5s ease;

 }

 .cardContainer .cardRow .cardColumn1 .fab:hover {
     transform: translateY(-5px);
     transition: 0.4s ease;


 }

 .cardContainer .cardRow .cardColumn1 .cardText .fa-facebook {
     background: snow;
     color: crimson;
 }

 .cardContainer .cardRow .cardColumn1 .cardText .fa-linkedin {
     background: snow;
     color: crimson;
 }

 .cardContainer .cardRow .cardColumn1 .cardText .fa-youtube {
     background: snow;
     color: crimson;
 }

.cardContainer .cardRow .cardColumn1 .cardText .fa-tiktok {
     background: snow;
     color: crimson;
 }


 .cardContainer .cardRow .cardColumn1 .cardButton {
     color: snow;
     font-weight: bold;
     background-color: transparent;
     margin-bottom: 20px;
     margin-top: 40px;
     padding: 10px 20px;
     border-radius: 25px;
     border: 2px solid snow;
     cursor: pointer;
     transition: 0.5s ease;


 }

 .cardContainer .cardRow .cardColumn1 .cardButton:hover {
     color: crimson;
     background-color: snow;
     transition: ease-in 0.5s;
     transition: ease-out 0.5s;
     transform: translateY(-5px);
     transition: 0.4s ease;



 }




 .cardContainer .cardRow .cardColumn2 {
     width: 100%;
     height: 450px;
     background-color: rgb(39, 38, 43);
     border-radius: 10px;
     box-shadow: 0 0 15px 1px;
     overflow-y: scroll;
     padding: 50px;
 }

 .cardContainer .cardRow .cardColumn2 .cardInfoheader {
     color: snow;
     font-size: 24px;
     padding-top: 0px;


 }


 .cardContainer .cardRow .cardColumn2 .cardInforow {
    display: flex
 }

 .cardContainer .cardRow .cardColumn2 .cardInforow .cardInfocolumn1 {
     width: 60%;
     color: snow;

 }

 .cardContainer .cardRow .cardColumn2 .cardInforow .cardInfocolumn1 .cardInfotext {
     color: snow;
     padding-right: 50px;
 }

 .modal-content .cardContainer .cardRow .cardColumn2 .cardInforow .cardInfocolumn2 {
     width: 40%;
     padding-right: 50px;
     color: snow
 }

 .cardContainer .cardRow .cardColumn2 .cardInforow .cardTextinfo {
     font-size: 15px;
     color: crimson;
     font-weight: bold;
 }

 .cardContainer .cardRow .cardColumn2 .cardInforow .cardSkillscolumn1 {
     width: 50%;
     color: snow;
     padding-right: 20px;
     padding-bottom: 20px;
     
     
 }



 .cardContainer .cardRow .cardColumn2 .cardInforow .cardSkillscolumn1 .cardSkills {
     width: 100%;
     background-color: grey;
     color: crimson;
     border-radius: 100px;
     
     

 }


 .cardContainer .cardRow .cardColumn2 .cardInforow .cardSkillscolumn1 .cardSkills .cardProgress {
     text-align: center;

     color: crimson;
          padding-top: 3px;
     padding-bottom: 3px;

     
  
   
 }

 .html {
     width: 100%;
     background-color: crimson;

 }

 .css {
     width: 100%;
     background-color: crimson;
 }

 .js {
     width: 50%;
     background-color: crimson;
 }

.java {
 width: 40%;
 background-color: crimson;
    
}

.nuke {
 width: 80%;
 background-color: crimson;
    
}

.pp {
 width: 100%;
 background-color: crimson;
    
}

.ae {
 width: 100%;
 background-color: crimson;
    
}

.max {
 width: 80%;
 background-color: crimson;
    
}

 .cardContainer .cardRow .cardColumn2 .cardInforow .cardSkillscolumn2 {
     width: 50%;
     color: snow;


 }

 .cardContainer .cardRow .cardColumn2 .cardExperiancesection {
     padding-top: 20px;

 }

 .CVHeader {
     font-size: 24px;
     color: snow;
 }

 .Experienceheader {}


 .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWhere {
     font-size: 1.2857em;
     /* 18/16 -> 18px */
     font-weight: 300;
     display: inline;
     margin-right: 0.5em;
     color: snow;
 }

 .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWhat {
     font-size: 0.75em;
     /* 12/16 -> 12px */
     font-weight: 700;
     text-transform: uppercase;
     color: snow;
     background-color: #444444;
     display: inline-block;
     padding: 0 12px;
     margin: -5px 0.5em 0 0 !important;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
 }

 .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWhat.crimson {
     background-color: crimson;
 }

 .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWhen {
     float: right;
     color: #b9b9b9;
     font-style: italic;
 }

 .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardDescription {
     color: snow;
     display: block;
     margin-top: 0.5em;

 }

 .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWrapper {
     position: relative;

 }

 .cardlist {
     margin-left: -20px;
     list-style-image: url(Images/Homepage/Icons/Skill_Icon_Crimson_10px.png)
 }

 .modal-content .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWrapper .cardlist-itemwrapper {
     margin-top: 10px;
     position: relative;
     z-index: 2;
 }

 .modal-content .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWrapper .cardlist-itemwrapper .cardlist-bullet {
     float: left;
     margin-right: 20px;
     background: crimson;
     height: 30px;
     width: 30px;
     line-height: 30px;
     border-radius: 100px;
     font-weight: 700;
     color: white;
     text-align: center;

 }

 .modal-content .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWrapper .cardlist-itemwrapper .cardListitem {
     display: table-row;
     vertical-align: middle;
 }



 .modal-content .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWrapper .cardRedline {
     background-color: crimson;
     z-index: 1;
     width: 2px;
     height: 100%;
     position: absolute;
     left: 15px;

 }

 .modal-content .cardContainer .cardRow .cardColumn2 .cardExperiancesection .cardWrapper .white-line {
     background: rgb(39, 38, 43);
     z-index: -1;
     top: 0px;
     width: 2px;
     height: 100%;
     position: absolute;
     left: 15px;
     margin-bottom: -50px;
 }

@media screen and (max-width: 1024px) {
    
    .cardrow {
        flex-direction: column;
    }
    
    .cardInforow {
        flex-direction: column;
    
    }
}




 /* || Key Skills Dropdown */
 .skills {
     overflow: hidden;

     transition: max-height 0.5s ease-out;
     background-color: rgb(231, 61, 73);
     z-index: 10;


 }

 .skills .skills-row {
     display: flex;
 }

 .skills .skills-row .skills-column {
     flex: 33%;
     padding: 10px;
     color: white;
     text-align: center;
     padding-bottom: 50px;
     padding-top: 40px;

 }

 .skills .skills-row .skills-column .skills-box {
     position: block;
     width: 250px;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
     flex-direction: column;
     color: black;
     background: white;
     border-radius: 50px;
     box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
         0 6.7px 5.3px rgba(0, 0, 0, 0.048),
         0 12.5px 10px rgba(0, 0, 0, 0.06),
         0 22.3px 17.9px rgba(0, 0, 0, 0.072),
         0 41.8px 33.4px rgba(0, 0, 0, 0.086),
         0 100px 1000px rgba(0, 0, 0, 0.12);
     transition: 0.5s ease;
 }

 .skills .skills-row .skills-column .skills-box:hover {
     transform: translateY(-10px);
 }

 .skills-head {
     margin: 0px;
     padding-top: 10px;

 }

 .skills .skills-row .skills-column .skills-box .skills-img {
     width: 90px;
 }

 .skills .skills-row .skills-column .skills-box .skills-head {
     margin: 0px;
     padding-top: 10px;
 }

 .skills .skills-row .skills-column .skills-box .skills-text {
     padding: 0px 20px 0px 20px;

 }

 .skills .skills-row .skills-column .skills-box .skills-button {
     font-size: 16px;
     cursor: pointer;
     width: 100px;
     height: 20px;
     transition: border 0.7s ease;
     border: 0px;
 }

 .skills .skills-row .skills-column .skills-box .skills-button-1 {
     font-size: 16px;
     cursor: pointer;
     width: 100px;
     height: 20px;
     transition: border 0.7s ease;
     border: 0px;
 }

 .skills .skills-row .skills-column .skills-box .skills-button-2 {
     font-size: 16px;
     cursor: pointer;
     width: 100px;
     height: 20px;
     transition: border 0.7s ease;
     border: 0px;
 }

 .skills .skills-row .skills-column .skills-box .skills-button:hover {
     color: #e63946;
     transition: 0.4s ease;
 }

 .skills .skills-row .skills-column .skills-box .skills-button-1:hover {
     color: #457b9d;
     transition: 0.4s ease;
 }

 .skills .skills-row .skills-column .skills-box .skills-button-2:hover {
     color: #f4a261;
     transition: 0.4s ease;
 }

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

     .skills {}


     .skills .skills-row {
         display: block;
         width: 100%;
         text-align: center;



     }

     .skills .skills-row .skills-column .skills-box {}


 }

 /* || Seperator */

 .seperator-info {
     background-color: snow;
     padding: 50px;
     box-shadow: 0px 8px 8px 8px rgba(0, 0, 0, 0.12);

 }


 /* || Portfolio */

 .folio {
     background-color: snow;
     background-size: cover;
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     padding-bottom: 50px;

 }


 .folio .folio-head {
     padding: 10px 10px 10px 10px;
     font-size: 20px;
     color: #333333;
     text-align: center;
 }

 .folio .folio-solid {
     border: none;

 }

 .folio .folio-container {
     display: flex;
     flex-wrap: row wrap;
     justify-content: space-between;


 }

 .folio .folio-container .folio-link {
     text-decoration: none;
 }

 .fade {
     -webkit-animation-name: fade;
     -webkit-animation-duration: 1.5s;
     animation-name: fade;
     animation-duration: 1.5s;
 }

 @-webkit-keyframes fade {
     from {
         opacity: .4
     }

     to {
         opacity: 1
     }
 }

 @keyframes fade {
     from {
         opacity: .4
     }

     to {
         opacity: 1
     }
 }


 .folio .folio-container .folio-link .folio-box {
     flex: 1 0 500px;
     box-sizing: border-box;
     margin: 10px;
     padding-bottom: 10px;
     background-color: snow;
     box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
         0 6.7px 5.3px rgba(0, 0, 0, 0.048),
         0 12.5px 10px rgba(0, 0, 0, 0.06),
         0 22.3px 17.9px rgba(0, 0, 0, 0.072),
         0 41.8px 33.4px rgba(0, 0, 0, 0.086),
         0 100px 80px rgba(0, 0, 0, 0.12);
 }

 .folio .folio-container .folio-link .folio-box .folio-img {
     display: block;
     border: 0;
     width: 100%;
     height: auto;
 }

 .folio .folio-container .folio-link .folio-box:hover {
     -ms-transform: scale(1.02);
     -webkit-transform: scale(1.02);
     transform: scale(1.02);
     transition: 0.5s ease;

 }

 .folio .folio-container .folio-link .folio-box .folio-text-header {
     color: black;
     padding-left: 17px;
     font-weight: bold;
 }

 .folio .folio-container .folio-link .folio-box .folio-text {
     color: black;

     padding-left: 20px;
     padding-right: 20px;
     font-weight: 400px
 }

 .folio .folio-container .folio-link .folio-box .folio-text-require {
     color: grey;
     padding-left: 20px;
     font-weight: 400px;
 }

 .folio .dot {
     cursor: pointer;
     height: 15px;
     width: 15px;
     margin: 0 2px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
     transition: background-color 0.6s ease;


 }

 .folio .active,
 .dot:hover {
     background-color: #717171;
 }

 .folio .container .prev,
 .next {
     cursor: pointer;
     position: absolute;
     width: auto;
     padding: 16px;
     margin-top: -22px;
     color: white;
     font-weight: bold;
     font-size: 18px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
     user-select: none;
 }



 .folio .container .next {
     right: 0;
     border-radius: 3px 0 0 3px;
 }


 .folio .container .prev:hover,
 .next:hover {
     background-color: rgba(0, 0, 0, 0.8);

 }


 @media all and (max-width: 1438px) {

     .folio .folio-head {
         font-size: 30px;

     }

     .folio-container {
        flex-direction: row;
         
        

     }

     .folio-box {
         flex: 0 1 calc(25% - 1em);
     }

 }

 @media all and (max-width: 1024px) {

     .folio .folio-head {
         font-size: 30px;

     }

     .folio-container {
        flex-direction: column;
        

     }

     .folio-box {
         flex: 0 1 calc(25% - 1em);
     }

 }



 @media all and (max-width: 880px) {

     .folio .folio-head {
         font-size: 15px;

     }

     .folio-container {
         flex-direction: column;

     }
 }

 /* || Further Info */

 .cls-2 {
     fill: rgb(39, 38, 43);
 }

 .further {
     background-color: rgb(39, 38, 43);
     text-align: center;
     margin: 0px;
     padding: 100px 0px 0px 0px;

 }

 .further .further-text {
     color: snow;
     text-align: center;
     font-size: 35px;
     padding-bottom: 25px;
     margin: 0;
     font-weight: 400

 }

 .further .further-button {
     border: 2px solid white;
     background-color: transparent;
     color: white;
     font-weight: light;
     border-radius: 2px;
     text-align: center;
     font-size: 16px;
     cursor: pointer;
     width: 200px;
     height: 50px;
     transition: border 0.7s ease;
     box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
         0 6.7px 5.3px rgba(0, 0, 0, 0.048),
         0 12.5px 10px rgba(0, 0, 0, 0.06),
         0 22.3px 17.9px rgba(0, 0, 0, 0.072),
         0 41.8px 33.4px rgba(0, 0, 0, 0.086),
         0 100px 80px rgba(0, 0, 0, 0.12);

 }

 .further .further-button:hover {
     background-color: crimson;
     border: 2px solid crimson;
     border-radius: 2px;
     transition: border 0.7s ease;
     transition: background-color 0.7s ease;
     transition: border 0.7s ease-out;
     transition: background-color 0.7s ease-out;
 }

 .further .further-text-con {
     color: snow;
     text-align: center;
     font-size: 20px;
     padding: 40px 40px 100px 40px;
     margin: 0px;
 }

 @media screen and (max-width:1024px) {
     .further .further-text-con {
         font-size: 28px;
         padding: 40px 20px;
     }
 }


 @media screen and (max-width:880px) {
     .further .further-text-con {
         font-size: 18px;
         padding: 40px;
     }
 }


 /* || Footer */

 footer {
     bottom: 0;

 }

 @media (max-height:800px) {
     footer {
         position: static;
     }

     header {
         padding-top: 40px
     }
 }

 .footer-distributed {
     background-color: #2c292f;
     box-sizing: border-box;
     width: 100%;
     text-align: left;
     font: bold 16px sans-serif;
     padding: 50px 50px 60px 50px;
 }

 .footer-distributed .footer-left,
 .footer-distributed .footer-center,
 .footer-distributed .footer-right {
     display: inline-block;
     vertical-align: top;
 }

 .footer-distributed .footer-left {
     width: 30%;
 }

 .footer-distributed h3 {
     color: #ffffff;
     font: normal 36px 'Cookie', cursive;
     margin: 0;
 }

 .footer-distributed .footer-left img {
     width: 30%;
 }

 .footer-distributed h3 span {
     color: #e63946;
 }

 .footer-distributed .footer-links {
     color: #ffffff;
     margin: 20px 0 12px;
 }

 .footer-distributed .footer-links a:hover {
     color: #e63946;
     transition: 0.5s ease;
 }

 .footer-distributed .footer-links a {
     display: inline-block;
     line-height: 1.8;
     text-decoration: none;
     color: inherit;
 }

 .footer-distributed .footer-company-name {
     color: #8f9296;
     font-size: 14px;
     font-weight: normal;
     margin: 0;
 }

 .footer-distributed .footer-center {
     width: 35%;
 }

 .footer-distributed .footer-center i {
     background-color: #33383b;
     color: #ffffff;
     font-size: 25px;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     text-align: center;
     line-height: 42px;
     margin: 10px 15px;
     vertical-align: middle;
 }

 .footer-distributed .footer-center i.fa-envelope {
     font-size: 17px;
     line-height: 38px;
 }

 .footer-distributed .footer-center p {
     display: inline-block;
     color: #ffffff;
     vertical-align: middle;
     margin: 0;
 }

 .footer-distributed .footer-center p span {
     display: block;
     font-weight: normal;
     font-size: 14px;
     line-height: 2;
 }

 .footer-distributed .footer-center p a {
     color: #e0ac1c;
     text-decoration: none;
 }

 .footer-distributed .footer-right {
     width: 30%;
 }

 .footer-distributed .footer-company-about {
     line-height: 20px;
     color: #92999f;
     font-size: 13px;
     font-weight: normal;
     margin: 0;

 }

 .footer-distributed .footer-company-about span {
     display: block;
     color: #ffffff;
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 20px;
 }

 .footer-distributed .footer-icons {
     margin-top: 25px;
 }

 .footer-distributed .footer-icons a {
     display: inline-block;
     width: 35px;
     height: 35px;
     cursor: pointer;
     background-color: #33383b;
     border-radius: 2px;

     font-size: 20px;
     color: #ffffff;
     text-align: center;
     line-height: 35px;

     margin-right: 3px;
     margin-bottom: 5px;
 }

 @media (max-width: 880px) {

     .footer-distributed .footer-left,
     .footer-distributed .footer-center,
     .footer-distributed .footer-right {
         display: block;
         width: 100%;
         margin-bottom: 40px;
         text-align: center;
     }

     .footer-distributed .footer-center i {
         margin-left: 0;
     }

 }
 .cardContainer .cardRow .cardColumn2 .cardInforow .cardSkillscolumn1 .cardSkillsbox {
     display: flex;
     background-color: snow;
    border-radius: 100px;
    
     



 

    
}

 .cardContainer .cardRow .cardColumn2 .cardInforow .cardSKillsbox-2 {
    width: 90%;
     
     
    
    
}

 .cardContainer .cardRow .cardColumn2 .cardInforow .cardSKillsbox-1 {
     width: 20%;
     font-weight: bold;
     color: crimson;
     text-align: center;
     vertical-align: middle;
     font-size: 10px;
     padding-top: 6px 
    
}

li {
    padding-bottom: 10px;
}