:root {
    --gold: #ce9233;
    --white: #ffffff;
    --gray: #999999;
    --l-gray: #dddddd;
    --black: #000000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: roboto;
}

p {
    font-family: poppins;
}

.logo {
    width: 75px;
}

.spin-logo {
    width: 130px;
    position: absolute;
}

/*  */
.page-header-about {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/machine\ back.jpg) center center no-repeat;
    background-size: cover;
}

.btn-whatsapp img{
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 5.5rem;
    z-index: 99;
}

/* counter-section */
.counter-section {
    background-image: url(../img/counter.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem;
}

.counter-section h1,
.counter-section h5 {
    color: var(--white);
}

.counter-section .counter-container {
    /* background-color: var(--white); */
    border: 4px solid var(--l-gray);
    padding: 2rem;
    color: var(--white);
    text-align: center;
    border-bottom-left-radius: 2rem;
    border-top-right-radius: 2rem;
    transition: all 0.3s;
}

.counter-section .counter-container:hover {
    border: 4px solid transparent;
    background: rgba(206, 146, 51, 0.6);
}

.counter-section .counter-container h2 {
    color: var(--white);
    font-size: 3rem;
}

.counter-section .counter-container p {
    margin-bottom: 0;
}

.counter-section .counter-container i {
    /* color: var(--gold); */
    font-size: 3rem;
}

/* why-us */
.why-us {
    padding: 4rem 0;
}

.why-us-points-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid transparent;
    padding: 0.5rem;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.why-us-points-container:hover {
    border: 1px solid var(--l-gray);
    box-shadow: 0px 15px 8px rgba(0, 0, 0, 0.08);
}

.why-us-points-container i {
    font-size: 2rem;
    background-color: var(--gold);
    padding: 0.25rem 0.75rem;
    color: var(--white);
    border-radius: 100px;
}

.why-us-points-container h5 {
    margin-bottom: 0;
}

/* material-section */
.material-section {
    padding: 4rem 0;
    background-color: #eeeeee;
}

.mission-section {
    background-image: url(../img/company-mission.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
    background-position: center;
    padding: 4rem 0;
    color: var(--white);
}

.mission-section h1 {
    color: var(--white);
}

/*  */
.inner-product{
    border: 2px solid var(--l-gray);
    padding: 10px;
}