.container{
    max-width: 1100px;
    margin: 0 auto;
    overflow: auto;
    padding: 0 40px;
}

.parallax{
    position:relative;
}

.card{
    background-color: #222;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    padding: 20px;
    margin: 10px;
}

.card-2{
    background-color: #fff;
    color: black;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    padding: 20px;
    margin: 10px;
    min-height:450px;
    min-width:auto;
    word-wrap: break-word;
}


.card-3{
    background-color: #222;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    padding: 20px;
    margin: 0 10px 10px 10px;
}

.card-4{
    background-color: black;
    color: #fff;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 3px rgba(255,255,255,0.2);
    margin: 10px;
}

.card-5{
    background-color: #222;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    padding: 20px;
    margin: 10px;
}

.card-5:active{
        background-color: #ff8243;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        padding: 20px;
        margin: 10px;
}

.btn1{
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    background: var(--primary-colors);
    color: #fff;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    margin-right: 5px;
}

.btn2{
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    background: var(--secondary-colors);
    color: #fff;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    margin-left: 5px;
}

.btn3{
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
    background: none;
    color: #ff8c00;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    margin-right: 5px;
}

.btn-outline{
    background-color: transparent;
    border: 1px #fff solid;
}

.btn1:hover{
    transform: scale(0.98);
    text-decoration: none;
    color:#222;
    animation: transButton 0.3s ease-in;
}

.btn2:hover{
    transform: scale(0.98);
    text-decoration: none;
    color:#222;
    animation: transButton 0.3s ease-in;
}



@keyframes transButton{
    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(0.99);
    }

    100%{
        transform: scale(0.98);
    }
}

/* backgrounds & colored buttons */
.bg-primary, 
.btn-primary{
    background-color: var(--primary-colors);
    color: #fff;
}

.bg-secondary, 
.btn-secondary{
    background-color: var(--secondary-colors);
    color: #fff;
}

.bg-dark, 
.btn-dark{
    background-color: var(--dark-colors);
    color: #fff;
}

.bg-light, 
.btn-light{
    background-color: var(--light-colors);
    color: #333;
}

.bg-primary a, 
.btn-primary a,
.bg-secondary a, 
.btn-secondary a,
.bg-dark a, 
.btn-dark a {
    color:#fff;
}

/* TEXT COLORS */
.tx-primary{
    color: var(--primary-colors);
}

.tx-secondary{
    color: var(--secondary-colors);
}

.tx-dark{
    color: var(--dark-colors);
}

.tx-light{
    color: var(--light-colors);   
}


/* Text Sizes */
.lead{
    font-size: 20px;
}

.sm{
    font-size: 1rem;
}

.sm-2{
    font-size:1.2rem;
}

.md{
    font-size: 2rem;
}

.lg{
    font-size: 3rem;
}

.xl{
    font-size: 4rem;
}

.text-center{
    text-align: center;
    z-index: 15;
}

/*flex-direcion: column; turns the Main Axis into the Column; default is Row;
  justify-content --> pertains to the Main axis
  align items --> pertains to the cross or the perpendicular axis to the main.
*/
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.grid{
    display:grid;
    grid-template-columns: 1fr 1fr; /*or type repeat(2, 1fr)*/
    gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.grid-3{
    grid-template-columns: repeat(3, 1fr);
}

/* Margin */
.my-1{
    margin: 1rem 0;
}

.my-2{
    margin: 1.5rem 0;
}

.my-3{
    margin: 2rem 0;
}

.my-4{
    margin: 3rem 0;
}

.my-5{
    margin: 4rem 0;
}

.m-1{
    margin: 1rem;
}

.m-2{
    margin: 1.5rem;
}

.m-3{
    margin: 2rem;
}

.m-4{
    margin: 3rem;
}

.m-5{
    margin: 4rem;
}


/* Padding */
.py-1{
    padding: 1rem 0;
}

.py-2{
    padding: 1.5rem 0;
}

.py-3{
    padding: 2rem 0;
}

.py-4{
    padding: 3rem 0;
}

.py-5{
    padding: 4rem 0;
}

.px-1{
    padding: 0 1rem;
}

.px-2{
    padding: 0 1.5rem;
}

.px-3{
    padding: 0 2rem;
}

.px-4{
    padding: 0 3rem;
}

.px-5{
    padding: 0 4rem;
}

.pl-1{
    padding-left: 10px;
}

.pl-2{
    padding-left: 15px;
}

.pl-3{
    padding-left: 20px;
}

.pl-4{
    padding-left: 25px;
}

.pr-1{
    padding-left: 10px;
}

.pr-2{
    padding-left: 15px;
}

.pr-3{
    padding-left: 20px;
}

.pr-4{
    padding-left: 25px;
}

.p-1{
    padding: 1rem;
}

.p-2{
    padding: 1.5rem;
}

.p-3{
    padding: 2rem;
}

.p-4{
    padding: 3rem;
}

.p-5{
    padding: 4rem;
}


.pd-none{
    padding:10px 25px;
}

.pb-1{
    padding-bottom: 15px;
}

.pb-2{
    padding-bottom: 30px;
}

.pb-3{
    padding-bottom: 45px;
}

.pb-4{
    padding-bottom: 60px;
}

.pb-5{
    padding-bottom: 100px;
}


/*TOP,BOTTOM,LEFT,RIGHT = 0*/
.t-0{
    top:0%;
}

.b-0{
    bottom:0%;
}

.l-0{
    left:0%;
}

.r-0{
    right:0%;
}

/*POS-RELATIVE, ABSOLUTE, FIXED*/
.p-rel{
    position:relative;
}

.p-abs{
    position:absolute;
}

.p-fix{
    position:fixed;
}

/* No Wrap*/
.nwrap{
    white-space:nowrap;
}

/*BOLD TEXT*/
.tx-bold{
    font-weight:bold;
}

/*TEXT SHADOW*/
.tx-shadow{
    text-shadow: 4px 4px 3px rgba(0,0,0,0.9);
}

/*margin left and right*/
.mr{
    margin-right:10px;
}
.mr-1{
    margin-right:30px;
}

.mr-2{
    margin-right:40px;
}

.mr-3{
    margin-right:50px;
}

.mr-4{
    margin-right:60px;
}

.ml-1{
    margin-left:30px;
}

.ml-2{
    margin-left:60px;
}

.mb-1{
    margin-bottom:30px;
}
.mb-2{
    margin-bottom:50px;
}
.mb-3{
    margin-bottom:70px;
}
.mb-4{
    margin-bottom:90px;
}

/*Vacancy BUTTONS*/
.j-pad{
    padding: 10px 35px;
}

/*TEXT DECORATION*/
.tx-deco{
    list-style-type: circle;
}

.tx-italic{
    font-style: italic;
}

.bd-bot{
    border-bottom: 1px solid gray;
    margin:auto;
    padding-bottom: 10px;
}

.bd-bot2{
    margin:auto;
    padding-bottom: 10px;
}

.g-1{
    gap:30px;
}