/* 
================ REFERENCES SECTION ========================
*/

.references-header{

    margin: 120px auto;
    margin-bottom: 0px;
    text-align: center;

}
.references-header h1{
    display: block;
    margin: auto;
     color: var(--header);
     font-size: 52px;

}
.references-body {
    display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
        margin-top: 50px;
        margin-bottom: 170px;
}
.reference .circle-img img{
    height: 70px;
    width: 70px;
    margin: auto;
    margin-top: 10px;
    border-radius: 50%;
}
.reference .circle-img
{
    text-align: center;
}
.reference {
    text-align: center;
    padding: 20px;
    padding-bottom: 10px;
    border-radius: 25px;
    display: flex;
    min-height: 330px;
    width: 270px;
    background-color: var(--bg2);
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 1s ease;
}
.reference:hover {
     box-shadow:  0 0  10px 5px  var(--bg2); /*linear-gradient(to bottom, var(--bg2), transparent); */
     transform: scale(1.01);
}
.reference-head {
    margin: 10px 0;
}
.rate-stars i {
    color: var(--header);
}
.reference-head h2:first-child {
    color: var(--header);
    margin-bottom: -15px;
}

.reference-head h2 {
    color: var(--header);
    margin-bottom: -5px;
}
.reference-head h2 {
    color: var(--header);
    margin-bottom: -5px;
}
.reference .quote {
    margin-bottom: 10px;
    font-style: italic;
}
.reference .reference-date {
    text-align: right;
    color: var(--header);
}
.reference hr {
    margin: 15px -20px 10px -20px;
    border: 2px solid var(--bg);
}
.job-title {
    font-weight: 700;
}


.reference-container {
    overflow: hidden;
    max-width: 931px;
    min-height: 330px;
    padding: 20px;
}
.reference-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (1.5rem * (var(--per-view) - 1))) / var(--per-view));
    grid-gap: 1.5rem;
    position: relative;
    left: 0;
    transition: .3s;
}


.arrows-slider {
    padding: 6px 10px 5px 10px ;
    border-radius: 50%;
    cursor: pointer;
    color: var(--bg);
    background-color: var(--text);
    transition: all 0.5s ease;
}
.arrows-slider:hover {
    color: var(--text);
    background-color: var(--bg2);
}
.arrows-slider:first-child {
    margin-right: 9px;
}
@media (max-width: 1256px) {
    .reference-container {
        overflow: hidden;
        width: 320px;
        min-height: 330px;
        padding: 20px;
    }
    
}
@media (max-width: 600px) {
    .reference-container {
        overflow: hidden;
        max-width: 320px;
        min-height: 330px;
        padding: 20px;
    }
    .reference {
        max-width: 270px;
        width: auto;
    }
    .reference-head h2 {
        font-size: 22px;
    }
    .arrows-slider:first-child {
        margin-right: 0px;
    }
    .references-header h1{
         font-size: 48px;
    
    }
}