.flex-column-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.flex-row-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-item {
    margin-top: 20px;
    width: calc( (100% / 3) - 20px);
}

.flex-item-4 {
    margin-top: 20px;
    width: calc( (100% / 4) - 20px);
}

.flex-2 {
    flex: 2
}

.justify-space-around {
    justify-content: space-around;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.txt-right {
    text-align: right;
}

.flex-col-100 {
    margin: 0 2%;
    width: 100%;
}


/*************
  CARDS
***************/

.card {
    background: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    /* border: 6px solid #f4f4f4; */
}

.card-title {
    padding: 15px;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 700;
    color: rgba(99, 99, 99, 0.8)
}

.card-tn {
    height: 200px;
}

.card-tn-sm {}

.card-tn-sm,
.card-tn img {
    width: 100%;
}

.card-content {
    padding: 15px;
    background: #f4f4f4;
}


/***********************************
  FONT SIZES
************************************/

.txt-12 {
    font-size: 12px;
}

.txt-13 {
    font-size: 13px;
}

.txt-14 {
    font-size: 14px;
}

.txt-16 {
    font-size: 16px;
}

.txt-18 {
    font-size: 18px;
}

.txt-20 {
    font-size: 20px;
}

.txt-22 {
    font-size: 22px;
}

.txt-24 {
    font-size: 24px;
}

.txt-30 {
    font-size: 30px;
}

.thin {
    font-weight: 100
}

.normal {
    font-weight: 500
}

.thick {
    font-weight: 500
}

.thicker {
    font-weight: 700
}

.thickest {
    font-weight: 800
}


/***********************************
  MARGINS
************************************/

.mar-right-20 {
    margin-right: 20px !important;
}

.mar-top-10 {
    margin-top: 10px !important;
}

.mar-top-15 {
    margin-top: 15px !important;
}

.mar-top-20 {
    margin-top: 20px !important;
}

.mar-btm-5 {
    margin-bottom: 5px !important;
}

.mar-btm-10 {
    margin-bottom: 10px !important;
}

.mar-btm-15 {
    margin-bottom: 15px !important;
}

.mar-btm-20 {
    margin-bottom: 20px !important;
}

.mar-btm-12px {
    margin-bottom: -12px !important;
}

.padding {
    padding: 15px;
}

.tootip-icon {
    border: 1px solid #ddd;
    padding: 0 2px;
}

.mandatory-asterix {
    color: #cc0000;
}

.link {
    cursor: pointer;
    color: #924f1b;
}


/*****************
MODAL
*******************/

.modal {
    margin: 20px 0;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 90%;
    height: 80vh;
    max-height: 100%;
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 9999;
    padding: 30px;
}

.modal-title {
    font-size: 30px;
    font-weight: 800;
    font-family: 'Conv_SketchRockwell-Bold';
}


/* .modal-preview {
    z-index: 99999;
}
 */


/* .modal-preview img {
    width: 500px;
} */

.chip {
    font-size: 12px;
    font-weight: 600;
    background: #fefef4;
    border: 1px solid #ebe0c0;
    padding: 10px;
    display: inline-block;
    margin: 0 10px 0 0;
    text-transform: uppercase;
}

.fade {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background-color: #000;
    outline: 0;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: contain;
    width: 100%;
    z-index: 9999;
}

#closeBtn {
    border-radius: 55px;
    background: #fff;
    box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
    border: 2px solid #e1e1e1;
    padding: 10px;
    display: inline-block;
    text-align: center;
    width: 20px;
    height: 20px;
}

#closeBtn i {
    font-size: 20px;
}

.tech-stack-name {
    margin: 0.5em 0.5em 0 0.5em;
    display: inline-block;
    font-size: 1em;
    border: 1px solid #ddd;
    padding: 0.5em;
    font-weight: 600;
}

.section-header {
    margin: 0 0 0 0;
    font-size: 1.2em;
    font-weight: 800;
}

.section-header span {
    font-size: 1.2em;
    font-weight: 800;
}